MultiSelect

[screw123]

./src/component/Formik-MultiSelect.js

This is a component for Formik form Parent will provide {options} as props, which is [{value: String, label: String}, ...] If options.length <= 3, generate "option boxes" If options.length > 3, generate "react-select" dropdown box

Props List

• [x] field: { name, value, ...fields } <-- from Formik

• [x] form: { touched, errors, setFieldValue } <-- from Formik

• [x] classNames <-- no use in P001, keep as placeholder

• [x] options <-- option list as described above

• [x] disabled <-- if true, show alternative UI + disable interaction

• [x] label <-- from Formik, show as label for this component when rendering with form

• [x] multiSelect <-- if true, allow choosing multiple options. In this case, field.value should provide as array

• [x] isLoading: if true, show alternative UI + disable interaction. react-select version is done, "option-box" version not yet

• [x] hidden <-- if true, do not render this component

• [x] customOption: accepts a react component. This will be directly passed to Select from react-select as a custom render for option, if option.length > 3. If option.length<=3, this customOption will replace <div>{options[i].label}</div> and become child of RadioBlock (Reference: https://react-select.com/components)

A custom option will need to accept and react to following props:

• data: The whole object in the array. E.g. if options=[{_id, value, name, itemNo, user}, ...], data will be {_id, value, name, itemNo, user}

• key: unique identifier for React

• selected: a boolean to show which item is selected.

• onClick: callback for toggling

• disabled: boolean

• innerProps: a set of props. Come from react-select. For sample code, refer to AddressDisplay of #16

• [x] customMultiValueLabel: accepts a react component. This will be directly passed to Select from react-select as a custom render for MultiValueLabel, if option.length > 3. If option.length<=3, this has no effect. (Reference: https://react-select.com/components)

• [ x] placeHolder: accepts a placeholder for react-select. No use for radio-box

Spec

• [x] Once component is rendered, when optioned is (de)selected, update Formik's state by calling setFieldValue(name, value), where name = props.field.name, value=selected options's value (strip value from {value/label} object

• [x] if isLoading is true, show a loading icon. For "option-box" version, please use LoadingIcon (in ./src/components/Loading.js) + "Loading..." as word

[screw123]

Is done

[screw123]

Change required.

Props

• [ ] customOption: accepts a react component. This will be directly passed to Select from react-select as a custom render for option, if option.length > 3. If option.length<=3, this customOption will replace <div>{options[i].label}</div> and become child of RadioBlock (Reference: https://react-select.com/components)

• [ ] customMultiValueLabel: accepts a react component. This will be directly passed to Select from react-select as a custom render for MultiValueLabel, if option.length > 3. If option.length<=3, this has no effect. (Reference: https://react-select.com/components)

Spec

• [ ] if isLoading is true, show a loading icon. For "option-box" version, please use LoadingIcon (in ./src/components/Loading.js) + "Loading..." as word