import React from 'react'; import {Grid} from '@material-ui/core'; import {useFormikContext, FieldArray} from 'formik'; import SQFormInclusionListItem from './SQFormInclusionListItem'; import type {FieldArrayRenderProps} from 'formik'; import type {GridProps} from '@material-ui/core'; import type {SQFormInclusionListItemProps} from './SQFormInclusionListItem'; import type {SQFormOption} from '../../types'; export interface SQFormInclusionListProps { /** the `name` must match the name of the desired array in `initialValues` */ name: string; /** boolean flag to trigger usage of Select All functionality */ useSelectAll?: boolean; /** array of items to put in the `name` array on 'select all' click */ selectAllData?: SQFormOption['value'][]; /** props for the Grid container wrapping the select all checkbox */ selectAllContainerProps?: GridProps; /** props for the 'select all' SQFormInclusionListItem component */ selectAllProps?: Partial< Omit<SQFormInclusionListItemProps, 'name' | 'isChecked' | 'onChange'> >; /** Children must be a function that accepts one param of type FieldArrayRenderProps and returns a single, or array of, SQFormInclusionListItems*/ children: (props: FieldArrayRenderProps) => JSX.Element | Array<JSX.Element>; } function SQFormInclusionList({ name, children, useSelectAll = false, selectAllData = [], selectAllContainerProps = {}, selectAllProps = {}, }: SQFormInclusionListProps): React.ReactElement { const {values, setFieldValue} = useFormikContext<{selectAll: boolean}>(); const handleSelectAllChange = ( event: React.ChangeEvent<HTMLInputElement> ) => { if (event.target.checked) { setFieldValue(name, selectAllData); } else { setFieldValue(name, []); } setFieldValue('selectAll', !values?.selectAll); }; if (!useSelectAll) { return <FieldArray name={name}>{children}</FieldArray>; } return ( <> <Grid container {...selectAllContainerProps}> <SQFormInclusionListItem label="Select All" {...selectAllProps} name="selectAll" isChecked={values.selectAll} onChange={handleSelectAllChange} /> </Grid> <FieldArray name={name}>{children}</FieldArray> </> ); } export default SQFormInclusionList;