packages/components/containers/payments/CountriesDropdown.tsx

   1 import { useMemo, useState } from 'react';
   2
   3 import Option from '@proton/components/components/option/Option';
   4 import type { SearcheableSelectProps } from '@proton/components/components/selectTwo/SearchableSelect';
   5 import SearchableSelect from '@proton/components/components/selectTwo/SearchableSelect';
   6 import { defaultFilterFunction } from '@proton/components/components/selectTwo/helpers';
   7 import type { SelectChangeEvent } from '@proton/components/components/selectTwo/select';
   8 import type { CountryItem } from '@proton/components/helpers/countries';
   9 import { DEFAULT_SEPARATOR, getFullList } from '@proton/components/helpers/countries';
  10
  11 export const useCountries = () => {
  12     const countries = useMemo(() => getFullList(), []);
  13
  14     const [country, innerSetCountry] = useState(countries[0]);
  15
  16     const getCountryByValue = (value: string) => countries.find((country) => country.value === value) ?? countries[0];
  17
  18     const setCountry = (value: string) => {
  19         if (value === DEFAULT_SEPARATOR.value) {
  20             return;
  21         }
  22
  23         innerSetCountry(getCountryByValue(value));
  24     };
  25
  26     const getCountryByCode = (countryCode: string) => countries.find((country) => country.value === countryCode);
  27
  28     return { countries, country, setCountry, getCountryByCode };
  29 };
  30
  31 interface Props {
  32     onChange?: (countryCode: string) => void;
  33     selectedCountryCode: string;
  34     autoComplete?: string;
  35     'data-testid'?: string;
  36     id?: string;
  37     unstyled?: boolean;
  38     className?: string;
  39     isOpen?: boolean;
  40     onOpen?: () => void;
  41     onClose?: () => void;
  42     disabled?: boolean;
  43 }
  44
  45 const CountriesDropdown = ({ onChange, selectedCountryCode, ...rest }: Props) => {
  46     const { countries, getCountryByCode } = useCountries();
  47     const selectedCountryItem = getCountryByCode(selectedCountryCode);
  48
  49     const searchableSelectProps: SearcheableSelectProps<CountryItem> = {
  50         onChange: ({ value: countryItem }: SelectChangeEvent<CountryItem>) => {
  51             if (countryItem.value === DEFAULT_SEPARATOR.value) {
  52                 return;
  53             }
  54             onChange?.(countryItem.value);
  55         },
  56         value: selectedCountryItem,
  57         search: (option, keyword) => {
  58             if (option.value.isTop) {
  59                 return false;
  60             }
  61
  62             return defaultFilterFunction(option, keyword);
  63         },
  64         children: countries.map((countryItem) => {
  65             const { key, value, label, disabled } = countryItem;
  66
  67             return (
  68                 <Option
  69                     key={key}
  70                     value={countryItem}
  71                     title={label}
  72                     disabled={disabled}
  73                     data-testid={`country-${value}`}
  74                 >
  75                     {value === DEFAULT_SEPARATOR.value ? <hr className="m-0" /> : label}
  76                 </Option>
  77             );
  78         }),
  79         ...rest,
  80     };
  81
  82     return <SearchableSelect {...searchableSelectProps} />;
  83 };
  84
  85 export default CountriesDropdown;