packages/pass/components/Bulk/BulkActions.tsx

   1 import type { FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Icon } from '@proton/components';
   7 import { bulkSelectionDTO, useBulkSelect } from '@proton/pass/components/Bulk/BulkSelectProvider';
   8 import { useItemsActions } from '@proton/pass/components/Item/ItemActionsProvider';
   9 import { useNavigation } from '@proton/pass/components/Navigation/NavigationProvider';
  10
  11 type Props = { disabled?: boolean };
  12
  13 export const BulkActions: FC<Props> = (props) => {
  14     const { matchTrash } = useNavigation();
  15     const { selection, count } = useBulkSelect();
  16     const disabled = count === 0 || props.disabled;
  17
  18     const { moveMany, trashMany, deleteMany, restoreMany } = useItemsActions();
  19
  20     return matchTrash ? (
  21         <>
  22             <Button
  23                 color="weak"
  24                 disabled={disabled}
  25                 onClick={() => restoreMany(bulkSelectionDTO(selection))}
  26                 shape="solid"
  27                 size="small"
  28                 title={c('Action').t`Bulk restore items from trash`}
  29                 className="flex flex-nowrap gap-2 grow-0 text-sm text-semibold"
  30             >
  31                 <Icon name="clock-rotate-left" className="shrink-0" />
  32                 <span className="text-ellipsis hidden xl:block">{c('Action').t`Restore`}</span>
  33             </Button>
  34             <Button
  35                 color="weak"
  36                 disabled={disabled}
  37                 onClick={() => deleteMany(bulkSelectionDTO(selection))}
  38                 shape="solid"
  39                 size="small"
  40                 title={c('Action').t`Bulk delete items from trash`}
  41                 className="flex flex-nowrap gap-2 grow-0 text-sm text-semibold"
  42             >
  43                 <Icon name="trash-cross" className="shrink-0" />
  44                 <span className="text-ellipsis hidden xl:block">{c('Action').t`Delete`}</span>
  45             </Button>
  46         </>
  47     ) : (
  48         <>
  49             <Button
  50                 color="weak"
  51                 disabled={disabled}
  52                 onClick={() => moveMany(bulkSelectionDTO(selection))}
  53                 shape="solid"
  54                 size="small"
  55                 title={c('Action').t`Bulk move items to another vault`}
  56                 className="flex flex-nowrap gap-2 grow-0 text-sm text-semibold"
  57             >
  58                 <Icon name="folder-arrow-in" className="shrink-0" />
  59                 <span className="text-ellipsis hidden xl:block">{c('Action').t`Move`}</span>
  60             </Button>
  61             <Button
  62                 color="weak"
  63                 disabled={disabled}
  64                 onClick={() => trashMany(bulkSelectionDTO(selection))}
  65                 shape="solid"
  66                 size="small"
  67                 title={c('Action').t`Bulk move items to trash`}
  68                 className="flex flex-nowrap gap-2 grow-0 text-sm text-semibold"
  69             >
  70                 <Icon name="trash" className="shrink-0" />
  71                 <span className="text-ellipsis hidden xl:block">{c('Action').t`Trash`}</span>
  72             </Button>
  73         </>
  74     );
  75 };