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 | 111x 111x 111x 111x 111x 111x 109x 109x 109x 109x 109x 4x 4x 109x 109x 111x | import { noop } from 'lodash';
import React, { createContext, memo, useCallback, useMemo, FunctionComponent, ReactNode } from 'react';
import { connectFormik, ConnectFormikProps } from '../../common/form';
import { Accordion } from '../accordion';
export interface ChecklistProps {
children: ReactNode;
defaultSelectedItemId?: string;
isDisabled?: boolean;
name: string;
onSelect?(value: string): void;
}
export interface ChecklistContextProps {
name: string;
}
export const ChecklistContext = createContext<ChecklistContextProps | undefined>(undefined);
const Checklist: FunctionComponent<
ChecklistProps &
ConnectFormikProps<{ [key: string]: string }>
> = ({
formik: { setFieldValue },
name,
onSelect = noop,
...props
}) => {
const handleSelect = useCallback((value: string) => {
setFieldValue(name, value);
onSelect(value);
}, [
name,
onSelect,
setFieldValue,
]);
const contextValue = useMemo(() => ({ name }), [name]);
return (
<ChecklistContext.Provider value={ contextValue }>
<Accordion
{ ...props }
className="form-checklist optimizedCheckout-form-checklist"
onSelect={ handleSelect }
/>
</ChecklistContext.Provider>
);
};
export default connectFormik(memo(Checklist));
|