packages/components/containers/layouts/StickyLabelsToggle.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 { STICKY_LABELS } from '@proton/shared/lib/mail/mailSettings';
   6
   7 const { ENABLED, DISABLED } = STICKY_LABELS;
   8
   9 interface Props {
  10     id: string;
  11     stickyLabels: STICKY_LABELS;
  12     onToggle: (value: STICKY_LABELS) => void;
  13     loading: boolean;
  14     disabled?: boolean;
  15 }
  16
  17 const StickyLabelsToggle = ({ id, stickyLabels, onToggle, loading, ...rest }: Props) => {
  18     const { state, toggle } = useToggle(stickyLabels === ENABLED);
  19
  20     const handleToggle = ({ target }: ChangeEvent<HTMLInputElement>) => {
  21         onToggle(target.checked ? ENABLED : DISABLED);
  22         toggle();
  23     };
  24
  25     return <Toggle id={id} checked={state} onChange={handleToggle} loading={loading} {...rest} />;
  26 };
  27
  28 export default StickyLabelsToggle;