All files / libs/design-system/ext/src/lib/forms/formik-select FormikSelect.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo } from 'react';

import { Select, type SelectOption, type SelectOptionGroup, type SelectProps } from '@allshares/studio-design-system';
import { useFormikFieldAdapter, type FormikFieldProps } from '@amalia/ext/formik';

export type FormikSelectProps<
  TOption extends SelectOption = SelectOption,
  TIsMultiple extends boolean | undefined = undefined,
  TUseOptionAsValue extends boolean | undefined = undefined,
  TIsClearable extends boolean | undefined = true,
  TGroup extends SelectOptionGroup<TOption> = SelectOptionGroup<TOption>,
> = FormikFieldProps<SelectProps<TOption, TIsMultiple, TUseOptionAsValue, TIsClearable, TGroup>>;

const FormikSelectBase = function FormikSelect<
  TOption extends SelectOption = SelectOption,
  TIsMultiple extends boolean | undefined = undefined,
  TUseOptionAsValue extends boolean | undefined = undefined,
  TIsClearable extends boolean | undefined = true,
  TGroup extends SelectOptionGroup<TOption> = SelectOptionGroup<TOption>,
>({
  validate, // Omit validate and any props not passed to Select.
  ...props
}: FormikSelectProps<TOption, TIsMultiple, TUseOptionAsValue, TIsClearable, TGroup>) {
  const formikFieldProps = useFormikFieldAdapter<
    SelectProps<TOption, TIsMultiple, TUseOptionAsValue, TIsClearable, TGroup>['value']
  >({ ...props, validate });

  return (
    <Select<TOption, TIsMultiple, TUseOptionAsValue, TIsClearable, TGroup>
      {...props}
      {...formikFieldProps}
    />
  );
};

export const FormikSelect = memo(FormikSelectBase) as typeof FormikSelectBase;