refactor: extend checkbox field input
This commit is contained in:
parent
a97a034178
commit
8810673492
@ -89,13 +89,27 @@ interface CheckboxFieldProps {
|
|||||||
name: string
|
name: string
|
||||||
isChecked: boolean
|
isChecked: boolean
|
||||||
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||||
|
type?: 'default' | 'stylized'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CheckboxField = React.memo(
|
export const CheckboxField = React.memo(
|
||||||
({ label, name, isChecked, handleChange }: CheckboxFieldProps) => (
|
({
|
||||||
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
|
label,
|
||||||
<label className='form-label labelMain'>{label}</label>
|
name,
|
||||||
|
isChecked,
|
||||||
|
handleChange,
|
||||||
|
type = 'default'
|
||||||
|
}: CheckboxFieldProps) => (
|
||||||
|
<div
|
||||||
|
className={`inputLabelWrapperMain inputLabelWrapperMainAlt${
|
||||||
|
type === 'stylized' ? ` inputLabelWrapperMainAltStylized` : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<label htmlFor={name} className='form-label labelMain'>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
|
id={name}
|
||||||
type='checkbox'
|
type='checkbox'
|
||||||
className='CheckboxMain'
|
className='CheckboxMain'
|
||||||
name={name}
|
name={name}
|
||||||
|
@ -395,6 +395,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
|
|||||||
name='nsfw'
|
name='nsfw'
|
||||||
isChecked={formState.nsfw}
|
isChecked={formState.nsfw}
|
||||||
handleChange={handleCheckboxChange}
|
handleChange={handleCheckboxChange}
|
||||||
|
type='stylized'
|
||||||
/>
|
/>
|
||||||
<div className='inputLabelWrapperMain'>
|
<div className='inputLabelWrapperMain'>
|
||||||
<div className='labelWrapperMain'>
|
<div className='labelWrapperMain'>
|
||||||
|
@ -55,6 +55,7 @@ export const WritePage = () => {
|
|||||||
name='nsfw'
|
name='nsfw'
|
||||||
isChecked={false}
|
isChecked={false}
|
||||||
handleChange={() => {}}
|
handleChange={() => {}}
|
||||||
|
type='stylized'
|
||||||
/>
|
/>
|
||||||
<div className='IBMSMSMBS_WriteAction'>
|
<div className='IBMSMSMBS_WriteAction'>
|
||||||
<button className='btn btnMain' type='button'>
|
<button className='btn btnMain' type='button'>
|
||||||
|
Loading…
Reference in New Issue
Block a user