packages/pass/components/Form/Field/RadioGroupField.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import { type FieldProps } from 'formik';
   4
   5 import { InputFieldTwo, Radio } from '@proton/components';
   6 import type { InputFieldProps } from '@proton/components/components/v2/field/InputField';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import { useFieldControl } from '../../../hooks/useFieldControl';
  10
  11 export type RadioValue = string | number | readonly string[];
  12
  13 type RadioGroupProps<T extends RadioValue> = {
  14     className?: string;
  15     name: string;
  16     value?: T;
  17     onChange?: (value: T) => void;
  18     options: { label: ReactNode; value: T; disabled?: boolean }[];
  19 };
  20
  21 const RadioGroup = <T extends RadioValue>({ name, options, value, className, onChange }: RadioGroupProps<T>) => {
  22     const handleChange = (value: T) => () => onChange?.(value);
  23
  24     return (
  25         <>
  26             {options.map((option, i) => (
  27                 <Radio
  28                     key={i}
  29                     id={`${name}[${i}]`}
  30                     onChange={handleChange(option.value)}
  31                     checked={value === option.value}
  32                     name={name}
  33                     className={clsx(['mr-8', 'mb-2', 'flex', className])}
  34                     disabled={option.disabled}
  35                 >
  36                     {option.label}
  37                 </Radio>
  38             ))}
  39         </>
  40     );
  41 };
  42
  43 type RadioGroupFieldProps<T extends RadioValue> = FieldProps & InputFieldProps<typeof RadioGroup<T>>;
  44
  45 export const RadioGroupField = <T extends RadioValue>({
  46     field,
  47     form,
  48     meta,
  49     onChange,
  50     ...props
  51 }: RadioGroupFieldProps<T>) => {
  52     const { error } = useFieldControl({ field, form, meta });
  53
  54     return (
  55         <InputFieldTwo<typeof RadioGroup<T>>
  56             as={RadioGroup}
  57             assistContainerClassName="empty:hidden"
  58             error={error}
  59             {...field}
  60             {...props}
  61             onChange={async (value: T) => {
  62                 await form.setFieldValue(field.name, value);
  63                 onChange?.(value);
  64             }}
  65         />
  66     );
  67 };