packages/components/containers/layouts/ViewLayoutCards.tsx

   1 import { c } from 'ttag';
   2
   3 import LayoutCards from '@proton/components/components/input/LayoutCards';
   4 import { VIEW_LAYOUT } from '@proton/shared/lib/mail/mailSettings';
   5 import inboxColumnSvg from '@proton/styles/assets/img/layout/layout-thumb-inbox-column.svg';
   6 import inboxRowSvg from '@proton/styles/assets/img/layout/layout-thumb-inbox-row.svg';
   7
   8 const { COLUMN, ROW } = VIEW_LAYOUT;
   9
  10 interface Props {
  11     viewLayout: VIEW_LAYOUT;
  12     onChange: (viewLayout: VIEW_LAYOUT) => void;
  13     loading: boolean;
  14     describedByID: string;
  15     className?: string;
  16     liClassName?: string;
  17 }
  18
  19 const ViewLayoutCards = ({ viewLayout, onChange, loading, className, liClassName, describedByID, ...rest }: Props) => {
  20     const layoutCardColumn = {
  21         value: COLUMN,
  22         selected: viewLayout === COLUMN,
  23         disabled: loading,
  24         name: 'viewLayout',
  25         label: c('Label to change view layout').t`Column`,
  26         onChange() {
  27             onChange(COLUMN);
  28         },
  29         src: inboxColumnSvg,
  30         describedByID,
  31     };
  32     const layoutCardRow = {
  33         value: ROW,
  34         selected: viewLayout === ROW,
  35         disabled: loading,
  36         name: 'viewLayout',
  37         label: c('Label to change view layout').t`Row`,
  38         onChange() {
  39             onChange(ROW);
  40         },
  41         src: inboxRowSvg,
  42         describedByID,
  43     };
  44
  45     return (
  46         <LayoutCards
  47             list={[layoutCardColumn, layoutCardRow]}
  48             className={className}
  49             liClassName={liClassName}
  50             describedByID={describedByID}
  51             {...rest}
  52         />
  53     );
  54 };
  55
  56 export default ViewLayoutCards;