applications/drive/src/app/components/sections/SortDropdown.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Dropdown, DropdownCaret, DropdownMenu, DropdownMenuButton, usePopperAnchor } from '@proton/components';
   7 import { SORT_DIRECTION } from '@proton/shared/lib/constants';
   8 import generateUID from '@proton/utils/generateUID';
   9
  10 import type { SortParams } from '../FileBrowser/interface';
  11
  12 export default function SortDropdown<T extends string>({
  13     sortFields,
  14     sortField,
  15     onSort,
  16     className,
  17 }: {
  18     sortFields?: T[];
  19     sortField: SortParams<T>['sortField'];
  20     onSort?: (sortParams: SortParams<T>) => void;
  21     className?: string;
  22 }) {
  23     const [uid] = useState(generateUID('dropdown'));
  24     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  25
  26     const dropdownMenuButtons = sortFields?.map((sortFieldToCheck) => (
  27         <DropdownMenuButton
  28             key={sortFieldToCheck}
  29             className="flex flex-nowrap text-left"
  30             onClick={() => onSort?.({ sortField: sortFieldToCheck, sortOrder: SORT_DIRECTION.ASC })}
  31             aria-current={sortField === sortFieldToCheck}
  32         >
  33             {translateSortField(sortFieldToCheck)}
  34         </DropdownMenuButton>
  35     ));
  36
  37     return (
  38         <>
  39             <Button
  40                 className={className}
  41                 aria-describedby={uid}
  42                 ref={anchorRef}
  43                 aria-expanded={isOpen}
  44                 onClick={toggle}
  45                 data-testid="toolbar-sort"
  46                 title={c('Title').t`Sort files/folders`}
  47                 shape="ghost"
  48                 size="small"
  49                 icon
  50             >
  51                 <DropdownCaret isOpen={isOpen} className="expand-caret toolbar-icon my-auto" size={4} />
  52             </Button>
  53             <Dropdown
  54                 id={uid}
  55                 isOpen={isOpen}
  56                 anchorRef={anchorRef}
  57                 onClose={close}
  58                 originalPlacement="bottom-start"
  59                 className="dropdown--no-max-size"
  60             >
  61                 <DropdownMenu>{dropdownMenuButtons}</DropdownMenu>
  62             </Dropdown>
  63         </>
  64     );
  65 }
  66
  67 export function translateSortField(sortField: string): string {
  68     const translations: Record<string, string> = {
  69         name: c('Label').t`Name`,
  70         size: c('Label').t`Size`,
  71         // Type is not used (in UI) at this moment, but users might have set
  72         // it, so we keep the code, so it continue to work until user changes
  73         // the sorting. Also, we might get it back at some point.
  74         mimeType: c('Label').t`Type`,
  75         fileModifyTime: c('Label').t`Modified`,
  76         metaDataModifyTime: c('Label').t`Modified`,
  77         linkCreateTime: c('Label').t`Created`,
  78         linkExpireTime: c('Label').t`Expires`,
  79         numAccesses: c('Label').t`# of downloads`,
  80         sharedOn: c('Label').t`Shared by`,
  81         sharedBy: c('Label').t`Shared on`,
  82         trashed: c('Label').t`Deleted`,
  83     };
  84     return translations[sortField];
  85 }