packages/pass/components/Menu/Vault/TrashItem.tsx

   1 import { type FC } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { selectTrashedItems } from '@proton/pass/store/selectors';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import { DropdownMenuButton } from '../../Layout/Dropdown/DropdownMenuButton';
  10
  11 type Props = {
  12     dense?: boolean;
  13     selected: boolean;
  14     handleTrashEmpty: () => void;
  15     handleTrashRestore: () => void;
  16     onSelect: () => void;
  17 };
  18
  19 export const TrashItem: FC<Props> = ({ dense, selected, handleTrashRestore, handleTrashEmpty, onSelect }) => {
  20     const count = useSelector(selectTrashedItems).length;
  21
  22     return (
  23         <DropdownMenuButton
  24             label={c('Label').t`Trash`}
  25             icon="trash"
  26             onClick={onSelect}
  27             className={clsx(selected && 'sidebar-item-selected', !dense && 'py-3')}
  28             parentClassName={clsx('pass-vault-submenu-vault-item w-full')}
  29             quickActions={[
  30                 <DropdownMenuButton
  31                     key="trash-restore"
  32                     onClick={handleTrashRestore}
  33                     label={c('Label').t`Restore all items`}
  34                     icon="arrow-up-and-left"
  35                 />,
  36
  37                 <DropdownMenuButton
  38                     key="trash-empty"
  39                     onClick={handleTrashEmpty}
  40                     label={c('Label').t`Empty trash`}
  41                     icon="trash-cross"
  42                     danger
  43                 />,
  44             ]}
  45             extra={<span className="pass-vault--count shrink-0 color-weak mx-1">{count}</span>}
  46         />
  47     );
  48 };