applications/drive/src/app/components/FolderTree/FolderTree.tsx

   1 import React, { useRef } from 'react';
   2
   3 import { TableRowBusy } from '@proton/components';
   4
   5 import type { DecryptedLink, TreeItem } from '../../store';
   6 import ExpandableRow from './ExpandableRow';
   7 import { FloatingEllipsisContext } from './FloatingEllipsisContext';
   8 import useFloatingEllipsisContext from './hooks/useFloatingEllipsisContext';
   9
  10 interface Props {
  11     treeItems: TreeItem | TreeItem[];
  12     selectedItemId?: string;
  13     onSelect: (link: DecryptedLink) => void;
  14     rowIsDisabled?: (item: TreeItem) => boolean;
  15     toggleExpand: (linkId: string) => void;
  16     isLoaded: boolean;
  17 }
  18
  19 const FolderTree = ({ isLoaded, treeItems, selectedItemId, onSelect, rowIsDisabled, toggleExpand }: Props) => {
  20     const treeItemsArray = Array.isArray(treeItems) ? treeItems : [treeItems];
  21
  22     const containerRef = useRef<HTMLDivElement>(null);
  23     const resizableRef = useRef<HTMLTableElement>(null);
  24
  25     const context = useFloatingEllipsisContext({ containerRef, resizableRef });
  26
  27     const generateRows = (items: TreeItem[], depth = 0) => {
  28         const rows = items.map((item: TreeItem) => {
  29             const { link, children, isExpanded, isLoaded } = item;
  30             const isDisabled = rowIsDisabled ? rowIsDisabled(item) : false;
  31             const childrenRows = children.length ? generateRows(children, depth + 1) : null;
  32             return (
  33                 <ExpandableRow
  34                     key={link.linkId}
  35                     link={link}
  36                     isDisabled={isDisabled}
  37                     isSelected={selectedItemId === link.linkId}
  38                     isExpanded={isExpanded}
  39                     isLoaded={isLoaded}
  40                     depth={depth}
  41                     onSelect={onSelect}
  42                     toggleExpand={toggleExpand}
  43                 >
  44                     {childrenRows}
  45                 </ExpandableRow>
  46             );
  47         });
  48
  49         return <>{rows}</>;
  50     };
  51
  52     const rows = generateRows(treeItemsArray);
  53
  54     return (
  55         <FloatingEllipsisContext.Provider value={context}>
  56             <div className="folder-tree" ref={containerRef}>
  57                 <table ref={resizableRef} className="folder-tree-table simple-table simple-table--is-hoverable ">
  58                     <tbody>{isLoaded ? rows : <TableRowBusy />}</tbody>
  59                 </table>
  60             </div>
  61         </FloatingEllipsisContext.Provider>
  62     );
  63 };
  64
  65 export default FolderTree;