diff --git a/src/common/components/forms/FormChipControl.tsx b/src/common/components/forms/FormChipControl.tsx new file mode 100644 index 000000000..9878344b6 --- /dev/null +++ b/src/common/components/forms/FormChipControl.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; + +import { Box, Chip, FormControl } from '@mui/joy'; + +import type { FormRadioOption } from './FormRadioControl'; +import { FormLabelStart } from './FormLabelStart'; + + +const _styles = { + + control: { + justifyContent: 'space-between', + alignItems: 'center', + } as const, + + chipGroup: { + display: 'flex', + flexWrap: 'wrap', + gap: 1, + } as const, + + chip: { + '--Chip-minHeight': '1.75rem', // this makes it prob better + px: 1.5, + } as const, + +} as const; + + +/** + * Exact drop-in replacement for FormRadioControl, but with Chips. + */ +export const FormChipControl = (props: { + // specific + size?: 'sm' | 'md' | 'lg', + // =FormRadioControl + title: string | React.JSX.Element; + description?: string | React.JSX.Element; + tooltip?: string | React.JSX.Element; + disabled?: boolean; + options: FormRadioOption[]; + value?: TValue; + onChange: (value: TValue) => void; +}) => { + + const { onChange } = props; + + const handleChipClick = React.useCallback((value: TValue) => { + if (!props.disabled) + onChange(value); + }, [onChange, props.disabled]); + + return ( + + {(!!props.title || !!props.description) && } + + {props.options.map((option) => ( + handleChipClick(option.value)} + sx={_styles.chip} + > + {option.label} + + ))} + + + ); +};