packages/components/containers/layouts/ViewModeToggle.tsx

   1 import type { ChangeEvent } from 'react';
   2
   3 import Toggle from '@proton/components/components/toggle/Toggle';
   4 import useToggle from '@proton/components/hooks/useToggle';
   5 import { VIEW_MODE } from '@proton/shared/lib/mail/mailSettings';
   6
   7 const { GROUP, SINGLE } = VIEW_MODE;
   8
   9 interface Props {
  10     viewMode: VIEW_MODE;
  11     onToggle: (viewMode: VIEW_MODE) => void;
  12     loading: boolean;
  13     id: string;
  14 }
  15
  16 const ViewModeToggle = ({ viewMode, onToggle, loading, id, ...rest }: Props) => {
  17     const { state, toggle } = useToggle(viewMode === GROUP);
  18
  19     const handleToggle = ({ target }: ChangeEvent<HTMLInputElement>) => {
  20         onToggle(target.checked ? GROUP : SINGLE);
  21         toggle();
  22     };
  23
  24     return <Toggle id={id} checked={state} onChange={handleToggle} loading={loading} {...rest} />;
  25 };
  26
  27 export default ViewModeToggle;