packages/components/containers/layouts/FontSizeSelect.tsx

   1 import Option from '@proton/components/components/option/Option';
   2 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
   3
   4 import { DEFAULT_FONT_SIZE, FONT_SIZES } from '../../components/editor/constants';
   5
   6 interface Props {
   7     id: string;
   8     fontSize: number;
   9     onChange: (value: number) => void;
  10     loading: boolean;
  11 }
  12
  13 const options = Object.entries(FONT_SIZES).map(([valueInPx]) => {
  14     const fontSizeNumber = valueInPx.replace('px', '');
  15     return { text: fontSizeNumber, value: parseInt(fontSizeNumber, 10) };
  16 });
  17
  18 const FontSizeSelect = ({ id, fontSize, onChange, loading, ...rest }: Props) => {
  19     const isValid = options.some((option) => fontSize === option.value);
  20     const fontFaceSize = isValid ? fontSize : DEFAULT_FONT_SIZE;
  21
  22     return (
  23         <SelectTwo
  24             id={id}
  25             value={fontFaceSize}
  26             disabled={loading}
  27             onChange={({ value }) => {
  28                 onChange(value);
  29             }}
  30             {...rest}
  31         >
  32             {options.map(({ text, value }) => (
  33                 <Option key={value} value={value} title={text} />
  34             ))}
  35         </SelectTwo>
  36     );
  37 };
  38
  39 export default FontSizeSelect;