packages/pass/components/Bulk/BulkView.tsx

   1 import { type FC } from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { useCanDragItems } from '@proton/pass/hooks/useItemDrag';
   7
   8 import { useBulkSelect } from './BulkSelectProvider';
   9
  10 export const BulkView: FC = () => {
  11     const { count, clear } = useBulkSelect();
  12     const draggable = useCanDragItems();
  13
  14     const semiboldText = (
  15         <span className="text-semibold" key="bulk-count">
  16             {
  17                 // Translator: the full context is: "You selected <number> item(s) in this vault", where <number> item(s) is with semibold styling
  18                 c('Message').ngettext(msgid`${count} item`, `${count} items`, count)
  19             }
  20         </span>
  21     );
  22
  23     return (
  24         <div className="flex justify-center items-center w-full m-auto overflow-x-auto p-3 h-full bg-strong">
  25             <div className="flex flex-column items-center gap-3 text-center p-2 w-full">
  26                 {count === 0 ? (
  27                     <p>{
  28                         // Translator: this message is when there are 0 items selected, as part of the bulk select actions
  29                         c('Title').t`No items selected`
  30                     }</p>
  31                 ) : (
  32                     <>
  33                         <div className="mb-4">
  34                             <div>
  35                                 {
  36                                     // Translator: full sentence is: You selected <number> item/s in this vault; where semiboldText=<number> item/s
  37                                     c('Message').jt`You selected ${semiboldText} in this vault.`
  38                                 }
  39                             </div>
  40                             {draggable && (
  41                                 <div className="color-weak">
  42                                     {c('Message').ngettext(
  43                                         msgid`You can drag and drop the selected item to another vault`,
  44                                         `You can drag and drop the selected items to another vault`,
  45                                         count
  46                                     )}
  47                                 </div>
  48                             )}
  49                         </div>
  50                         <Button shape="solid" size="small" color="weak" onClick={clear}>{
  51                             // Translator: this is button action for deselecting all of the items in bulk select action
  52                             c('Action').t`Deselect`
  53                         }</Button>
  54                     </>
  55                 )}
  56             </div>
  57         </div>
  58     );
  59 };