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

   1 import { type FC, type MutableRefObject, useRef } from 'react';
   2
   3 import { type FieldProps } from 'formik';
   4
   5 import { InputFieldTwo, SelectTwo } 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 import { FieldBox, type FieldBoxProps } from './Layout/FieldBox';
  11
  12 export type SelectFieldProps = FieldProps &
  13     InputFieldProps<typeof SelectTwo> &
  14     Omit<FieldBoxProps, 'actions' | 'actionsContainerClassName'> & { selectClassName?: string };
  15
  16 const Loader: FC = () => <div className="pass-skeleton pass-skeleton--select" />;
  17
  18 export const SelectField: FC<SelectFieldProps> = ({
  19     children,
  20     className,
  21     field,
  22     form,
  23     icon,
  24     loading,
  25     meta,
  26     selectClassName,
  27     onValue,
  28     renderSelected,
  29     ...props
  30 }) => {
  31     const { error } = useFieldControl({ field, form, meta });
  32     const fieldBoxRef = useRef<HTMLDivElement>(null);
  33
  34     return (
  35         <FieldBox className={clsx('items-center', className)} icon={icon} ref={fieldBoxRef} unstyled={props.unstyled}>
  36             <InputFieldTwo<typeof SelectTwo>
  37                 as={SelectTwo}
  38                 assistContainerClassName="empty:hidden"
  39                 error={error}
  40                 labelContainerClassName="expand-click-area color-weak m-0 text-normal text-sm"
  41                 originalPlacement="bottom"
  42                 renderSelected={() => (loading ? <Loader /> : renderSelected?.())}
  43                 anchorRef={fieldBoxRef as MutableRefObject<any>}
  44                 unstyled
  45                 {...field}
  46                 {...props}
  47                 className={selectClassName}
  48                 onChange={undefined}
  49                 onValue={(value: unknown) => {
  50                     onValue?.(value);
  51                     return form.setFieldValue(field.name, value);
  52                 }}
  53             >
  54                 {children}
  55             </InputFieldTwo>
  56         </FieldBox>
  57     );
  58 };