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

   1 import type { ReactNode } from 'react';
   2 import React, { useRef } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import { FileIcon, Icon, TableRowBusy, Tooltip } from '@proton/components';
   8 import clsx from '@proton/utils/clsx';
   9
  10 import type { DecryptedLink } from '../../store';
  11 import FloatingEllipsis from './FloatingEllipsis';
  12
  13 interface Props {
  14     link: DecryptedLink;
  15     depth: number;
  16     isDisabled?: boolean;
  17     isSelected: boolean;
  18     isExpanded: boolean;
  19     isLoaded: boolean;
  20     onSelect: (link: DecryptedLink) => void;
  21     toggleExpand: (linkId: string) => void;
  22     children?: ReactNode;
  23 }
  24
  25 const ExpandableRow = ({
  26     link,
  27     depth,
  28     isDisabled = false,
  29     isSelected,
  30     isExpanded,
  31     isLoaded,
  32     onSelect,
  33     toggleExpand,
  34     children,
  35 }: Props) => {
  36     const handleSelect = () => {
  37         if (isDisabled) {
  38             return;
  39         }
  40         onSelect(link);
  41     };
  42
  43     const paddingElement = { width: `${depth * 1.5}em` };
  44
  45     const floatingEllipsisVisibilityControlRef = useRef<HTMLDivElement>(null);
  46
  47     return (
  48         <>
  49             <tr
  50                 className={clsx(['folder-tree-list-item', !isDisabled && 'cursor-pointer', isSelected && 'bg-strong'])}
  51                 onClick={handleSelect}
  52             >
  53                 <td className="flex items-center flex-nowrap m-0 pl-custom relative">
  54                     <div
  55                         className={clsx([
  56                             `folder-tree-list-item-selected flex shrink-0`,
  57                             !isSelected && 'folder-tree-list-item-selected-hidden',
  58                         ])}
  59                     >
  60                         <span className="flex justify-center items-center w-8 h-8 bg-primary rounded-full">
  61                             <Icon name="checkmark" className="p-1" size={4} />
  62                         </span>
  63                     </div>
  64                     <div className="flex shrink-0 folder-tree-list-item-indent" style={paddingElement}></div>
  65                     <div className="folder-tree-list-item-expand shrink-0 relative">
  66                         <Button
  67                             disabled={isDisabled}
  68                             style={{ visibility: link.isFile ? 'hidden' : 'visible' }}
  69                             className="folder-tree-list-item-expand-button expand-click-area"
  70                             onClick={(e) => {
  71                                 e.stopPropagation();
  72                                 e.currentTarget.blur();
  73                                 toggleExpand(link.linkId);
  74                             }}
  75                         >
  76                             <Icon
  77                                 size={3}
  78                                 name="chevron-down"
  79                                 alt={isExpanded ? c('Action').t`Collapse` : c('Action').t`Expand`}
  80                                 className={isExpanded ? 'rotateX-180' : undefined}
  81                             />
  82                         </Button>
  83                     </div>
  84                     <div key="Name" className="folder-tree-list-item-name flex items-center flex-nowrap w-full">
  85                         <FileIcon mimeType={link.isFile ? link.mimeType : 'Folder'} className="mr-2" />
  86                         <Tooltip title={link.name} originalPlacement="bottom">
  87                             <span ref={floatingEllipsisVisibilityControlRef} className="text-nowrap pr-8">
  88                                 {link.name}
  89                             </span>
  90                         </Tooltip>
  91                     </div>
  92                     <FloatingEllipsis visibilityControlRef={floatingEllipsisVisibilityControlRef} />
  93                 </td>
  94             </tr>
  95             {isExpanded && (
  96                 <>
  97                     {children}
  98                     {!isLoaded && <TableRowBusy />}
  99                 </>
 100             )}
 101         </>
 102     );
 103 };
 104
 105 export default ExpandableRow;