packages/pass/components/Bulk/BulkToggle.tsx

   1 import { type FC, useEffect } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, Kbd } from '@proton/atoms';
   6 import { Icon, Tooltip } from '@proton/components';
   7 import { useBulkSelect } from '@proton/pass/components/Bulk/BulkSelectProvider';
   8 import { metaKey } from '@proton/shared/lib/helpers/browser';
   9
  10 type Props = { disabled?: boolean };
  11
  12 export const BulkToggle: FC<Props> = ({ disabled }) => {
  13     const bulk = useBulkSelect();
  14
  15     useEffect(() => {
  16         if (disabled) bulk.disable();
  17     }, [disabled]);
  18
  19     return (
  20         <Tooltip
  21             key="bulk-toggle"
  22             openDelay={500}
  23             isOpen={bulk.enabled ? false : undefined}
  24             originalPlacement={'bottom'}
  25             title={<Kbd shortcut={metaKey} />}
  26         >
  27             <Button
  28                 shape="solid"
  29                 size="small"
  30                 color="weak"
  31                 onClick={bulk[bulk.enabled ? 'disable' : 'enable']}
  32                 title={c('Action').t`Bulk select items`}
  33                 disabled={disabled}
  34                 className="flex flex-nowrap gap-2 grow-0 text-sm text-semibold max-w-1/3"
  35             >
  36                 {bulk.enabled ? (
  37                     c('Action').t`Cancel`
  38                 ) : (
  39                     <>
  40                         <Icon name="checkmark-triple" className="shrink-0" />
  41                         <span className="text-ellipsis hidden xl:block">{c('Action').t`Multiple select`}</span>
  42                     </>
  43                 )}
  44             </Button>
  45         </Tooltip>
  46     );
  47 };