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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 110x 110x 110x 110x 110x 110x 110x 110x 110x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 110x 1x 1x 1x 1x 1x 1x 1x 110x | import { FormFieldItem } from '@bigcommerce/checkout-sdk';
import { getIn, FieldArray, FieldArrayRenderProps } from 'formik';
import { difference, kebabCase, noop, pick } from 'lodash';
import React, { memo, useCallback, ChangeEvent, FunctionComponent, ReactNode } from 'react';
import DynamicFormFieldType from './DynamicFormFieldType';
import DynamicInput from './DynamicInput';
import FormFieldContainer from './FormFieldContainer';
import FormFieldError from './FormFieldError';
import MultiCheckboxControl from './MultiCheckboxControl';
export interface CheckboxGroupFormFieldProps {
id: string;
label: ReactNode;
name: string;
options: FormFieldItem[];
onChange?(values: string[]): void;
}
type MultiCheckboxFormFieldProps = (
CheckboxGroupFormFieldProps &
Pick<FieldArrayRenderProps, 'push' | 'remove' | 'pop' | 'form'>
);
const MultiCheckboxFormField: FunctionComponent<MultiCheckboxFormFieldProps> = ({
form: { values, errors },
id,
label,
name,
onChange = noop,
options,
push,
remove,
}) => {
const handleSelectAll = useCallback(() => {
const checkedValues: string[] = getIn(values, name) || [];
difference(options.map(({ value }) => value), checkedValues)
.forEach(val => push(val));
onChange(getIn(values, name));
}, [
name,
onChange,
options,
push,
values,
]);
const handleSelectNone = useCallback(() => {
const checkedValues: string[] = getIn(values, name) || [];
checkedValues.forEach(() => remove(0));
onChange(getIn(values, name));
}, [
name,
onChange,
remove,
values,
]);
const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const checkedValues: string[] = getIn(values, name) || [];
const { value, checked } = event.target;
if (checked) {
push(value);
} else {
remove(checkedValues.indexOf(value));
}
onChange(getIn(values, name));
}, [
name,
onChange,
push,
remove,
values,
]);
return <FormFieldContainer hasError={ getIn(errors, name) && getIn(errors, name).length }>
{ label }
{ options.length > 1 && <MultiCheckboxControl
onSelectedAll={ handleSelectAll }
onSelectedNone={ handleSelectNone }
testId={ id }
/> }
<DynamicInput
fieldType={ DynamicFormFieldType.checkbox }
id={ id }
name={ name }
onChange={ handleInputChange }
options={ options }
value={ getIn(values, name) || [] }
/>
<FormFieldError
name={ name }
testId={ `${kebabCase(name)}-field-error-message` }
/>
</FormFieldContainer>;
};
const CheckboxGroupFormField: FunctionComponent<CheckboxGroupFormFieldProps> = ({
id,
label,
name,
onChange,
options,
}) => {
const renderField = useCallback((renderProps: FieldArrayRenderProps) => (
<MultiCheckboxFormField
id={ id }
label={ label }
name={ name }
onChange={ onChange }
options={ options }
{ ...pick(renderProps, [
'form',
'pop',
'push',
'remove',
]) }
/>
), [
id,
label,
name,
onChange,
options,
]);
return <FieldArray
name={ name }
render={ renderField }
/>;
};
export default memo(CheckboxGroupFormField);
|