packages/components/containers/layouts/ComposerModeCards.tsx

   1 import { c } from 'ttag';
   2
   3 import LayoutCards from '@proton/components/components/input/LayoutCards';
   4 import { COMPOSER_MODE } from '@proton/shared/lib/mail/mailSettings';
   5 import composerMaximizedSvg from '@proton/styles/assets/img/layout/layout-thumb-composer-maximized.svg';
   6 import composerPopUpSvg from '@proton/styles/assets/img/layout/layout-thumb-composer-normal.svg';
   7
   8 const { POPUP, MAXIMIZED } = COMPOSER_MODE;
   9
  10 interface Props {
  11     composerMode: COMPOSER_MODE;
  12     onChange: (composerMode: COMPOSER_MODE) => void;
  13     loading: boolean;
  14     describedByID: string;
  15     className?: string;
  16     liClassName?: string;
  17 }
  18
  19 const ComposerModeCards = ({
  20     composerMode,
  21     onChange,
  22     className,
  23     liClassName,
  24     loading,
  25     describedByID,
  26     ...rest
  27 }: Props) => {
  28     const layoutCardPopup = {
  29         value: POPUP,
  30         selected: composerMode === POPUP,
  31         disabled: loading,
  32         name: 'composerMode',
  33         label: c('Label to change composer mode').t`Normal`,
  34         onChange() {
  35             onChange(POPUP);
  36         },
  37         src: composerPopUpSvg,
  38         describedByID,
  39     };
  40     const layoutCardMaximized = {
  41         value: MAXIMIZED,
  42         selected: composerMode === MAXIMIZED,
  43         disabled: loading,
  44         name: 'composerMode',
  45         label: c('Label to change composer mode').t`Maximized`,
  46         onChange() {
  47             onChange(MAXIMIZED);
  48         },
  49         src: composerMaximizedSvg,
  50         describedByID,
  51     };
  52
  53     return (
  54         <LayoutCards
  55             list={[layoutCardPopup, layoutCardMaximized]}
  56             className={className}
  57             liClassName={liClassName}
  58             describedByID={describedByID}
  59             {...rest}
  60         />
  61     );
  62 };
  63
  64 export default ComposerModeCards;