Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 110x 110x 110x 110x 110x 110x 137x 137x 137x 137x 137x 137x 205x 137x 110x | import { FieldProps } from 'formik';
import { kebabCase } from 'lodash';
import React, { memo, useCallback, Fragment, FunctionComponent, ReactNode } from 'react';
import BasicFormField from './BasicFormField';
import CheckboxInput from './CheckboxInput';
import FormFieldError from './FormFieldError';
export interface CheckboxFormFieldProps {
additionalClassName?: string;
disabled?: boolean;
name: string;
id?: string;
labelContent: ReactNode;
onChange?(isChecked: boolean): void;
}
const CheckboxFormField: FunctionComponent<CheckboxFormFieldProps> = ({
additionalClassName,
disabled = false,
labelContent,
onChange,
name,
id,
}) => {
const renderField = useCallback(({ field }: FieldProps) => (
<Fragment>
{ <CheckboxInput
{ ...field }
checked={ !!field.value }
disabled={ disabled }
id={ id || field.name }
label={ labelContent }
/> }
<FormFieldError
name={ name }
testId={ `${kebabCase(name)}-field-error-message` }
/>
</Fragment>
), [
disabled,
id,
labelContent,
name,
]);
return <BasicFormField
additionalClassName={ additionalClassName }
name={ name }
onChange={ onChange }
render={ renderField }
/>;
};
export default memo(CheckboxFormField);
|