packages/components/containers/layouts/FontFaceSelect.tsx

   1 import Option from '@proton/components/components/option/Option';
   2 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
   3
   4 import { DEFAULT_FONT_FACE, FONT_FACES } from '../../components/editor/constants';
   5
   6 interface Props {
   7     id: string;
   8     fontFace: string;
   9     onChange: (value: string) => void;
  10     loading: boolean;
  11 }
  12
  13 const options = Object.values(FONT_FACES).map(({ label: text, value }) => ({ text, value: value.toLowerCase() }));
  14
  15 const FontFaceSelect = ({ id, fontFace, onChange, loading, ...rest }: Props) => {
  16     const isValid = fontFace && options.some((option) => option.value === fontFace.toLowerCase());
  17     // FontFace default API value is null and it doesn't trigger default parameter value
  18     const fontFaceValue = isValid ? fontFace.toLowerCase() : DEFAULT_FONT_FACE.toLowerCase();
  19
  20     return (
  21         <SelectTwo
  22             id={id}
  23             value={fontFaceValue}
  24             disabled={loading}
  25             onChange={({ value: selectedValue }) => {
  26                 const option = Object.values(FONT_FACES).find(({ value }) => value.toLowerCase() === selectedValue);
  27
  28                 if (option) {
  29                     onChange(option.value);
  30                 }
  31             }}
  32             {...rest}
  33         >
  34             {options.map(({ text, value }) => (
  35                 <Option key={value} title={text} value={value} />
  36             ))}
  37         </SelectTwo>
  38     );
  39 };
  40
  41 export default FontFaceSelect;