packages/drive-store/components/FileBrowser/GridView/GridHeader.tsx

   1 import * as React from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import { Checkbox, Icon, Loader, TableHeaderCell, TableRowSticky, Tooltip } from '@proton/components';
   6 import { SORT_DIRECTION } from '@proton/shared/lib/constants';
   7 import { getNumAccessesTooltipMessage } from '@proton/shared/lib/drive/translations';
   8
   9 import { stopPropagation } from '../../../utils/stopPropagation';
  10 import SortDropdown from '../../sections/SortDropdown';
  11 import { SelectionState } from '../hooks/useSelectionControls';
  12 import type { SortParams } from '../interface';
  13 import { useSelection } from '../state/useSelection';
  14
  15 interface Props<T> {
  16     isLoading?: boolean;
  17     itemCount: number;
  18     scrollAreaRef: React.RefObject<HTMLDivElement>;
  19
  20     // sorting
  21     activeSortingText?: string;
  22     onSort?: (sortParams: SortParams<T>) => void;
  23     sortField?: SortParams<T>['sortField'];
  24     sortFields?: T[];
  25     sortOrder?: SortParams<T>['sortOrder'];
  26 }
  27
  28 export const GridHeader = <T extends string>({
  29     isLoading,
  30     sortFields,
  31     onSort,
  32     itemCount,
  33     scrollAreaRef,
  34     activeSortingText,
  35
  36     sortField,
  37     sortOrder,
  38 }: Props<T>) => {
  39     const selection = useSelection();
  40
  41     const handleSort = (key: T) => {
  42         if (!sortField || !sortOrder || !onSort) {
  43             return;
  44         }
  45
  46         const direction =
  47             sortField === key && sortOrder === SORT_DIRECTION.ASC ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC;
  48
  49         onSort({ sortField: key as T, sortOrder: direction });
  50     };
  51
  52     const getSortDirectionForKey = (key: T) => (sortField === key ? sortOrder : undefined);
  53
  54     const selectedCount = selection?.selectedItemIds.length;
  55
  56     return (
  57         <thead onContextMenu={stopPropagation}>
  58             <TableRowSticky scrollAreaRef={scrollAreaRef}>
  59                 <TableHeaderCell className="file-browser-header-checkbox-cell">
  60                     <div role="presentation" key="select-all" className="flex pl-2" onClick={stopPropagation}>
  61                         <Checkbox
  62                             indeterminate={selection?.selectionState === SelectionState.SOME}
  63                             className="expand-click-area mr-1"
  64                             disabled={!itemCount}
  65                             checked={selection?.selectionState !== SelectionState.NONE}
  66                             onChange={
  67                                 selection?.selectionState === SelectionState.SOME
  68                                     ? selection?.clearSelections
  69                                     : selection?.toggleAllSelected
  70                             }
  71                         >
  72                             {selectedCount ? (
  73                                 <span className="ml-2">
  74                                     {c('Info').ngettext(
  75                                         msgid`${selectedCount} selected`,
  76                                         `${selectedCount} selected`,
  77                                         selectedCount
  78                                     )}
  79                                 </span>
  80                             ) : null}
  81                         </Checkbox>
  82                         {selection?.selectionState !== SelectionState.NONE && isLoading ? (
  83                             <Loader className="flex shrink-0" />
  84                         ) : null}
  85                     </div>
  86                 </TableHeaderCell>
  87                 {selection?.selectionState === SelectionState.NONE && sortFields?.length && sortField && (
  88                     <>
  89                         <TableHeaderCell
  90                             className="w-custom"
  91                             style={{ '--w-custom': '10em' }}
  92                             onSort={() => handleSort(sortField)}
  93                             direction={getSortDirectionForKey(sortField)}
  94                             isLoading={isLoading}
  95                         >
  96                             {activeSortingText}
  97                             {sortField === 'numAccesses' && (
  98                                 <Tooltip className="pl-1" title={getNumAccessesTooltipMessage()}>
  99                                     <Icon name="info-circle" size={3.5} alt={getNumAccessesTooltipMessage()} />
 100                                 </Tooltip>
 101                             )}
 102                         </TableHeaderCell>
 103                         <TableHeaderCell>
 104                             <SortDropdown
 105                                 className="file-browser-header-sort-cell"
 106                                 sortFields={sortFields}
 107                                 sortField={sortField}
 108                                 onSort={onSort}
 109                             />
 110                         </TableHeaderCell>
 111                     </>
 112                 )}
 113             </TableRowSticky>
 114         </thead>
 115     );
 116 };