diff --git a/services/frontend/src/components/global/FormElements/Toggle.tsx b/services/frontend/src/components/global/FormElements/Toggle.tsx new file mode 100644 index 0000000..c30dd01 --- /dev/null +++ b/services/frontend/src/components/global/FormElements/Toggle.tsx @@ -0,0 +1,72 @@ +import lodash from "lodash"; +import { useFormikContext } from "formik"; +import { FunctionComponent, ReactElement, useCallback } from "react"; +import { Button, styled } from "@mui/joy"; + +export interface IToggleProps { + name: string; + label: string; + help?: string; + options: { + text: string; + value: string; + }[]; +} + +interface IToggleButtonProps { + index: number; + total: number; +} + +const Root = styled("div")` + display: flex; + flex-direction: row; +`; + +const ToggleButton = styled(Button)(({ index, total }) => ({ + borderRadius: ` + ${index === 0 ? "8px" : "0px"} + ${index === total - 1 ? "8px" : "0px"} + ${index === total - 1 ? "8px" : "0px"} + ${index === 0 ? "8px" : "0px"} + `, + fontSize: 11 +})); + +const Toggle: FunctionComponent = ( + props: IToggleProps +): ReactElement => { + const { name, help, options } = props; + const formik = useFormikContext(); + const error = + lodash.get(formik.touched, name) && lodash.get(formik.errors, name); + const value = lodash.get(formik.values, name); + + const handleChange = (value: string) => () => { + formik.setFieldValue(name, value); + }; + + return ( + + {options.map((option, index) => ( + + {option.text} + + ))} + +
+ {error && {error}} + {!error && help} +
+
+ ); +}; + +export default Toggle;