applications/drive/src/app/components/FileBrowser/ListView/ItemRow.tsx

   1 import { memo, useEffect } from 'react';
   2
   3 import { DragMoveContainer, TableRow } from '@proton/components';
   4 import { isEquivalent } from '@proton/shared/lib/helpers/object';
   5 import clsx from '@proton/utils/clsx';
   6 import shallowEqual from '@proton/utils/shallowEqual';
   7
   8 import useDragAndDrop from '../hooks/useDragAndDrop';
   9 import useFileBrowserItem from '../hooks/useFileBrowserItem';
  10 import type { DragMoveControls, FileBrowserBaseItem } from '../interface';
  11
  12 interface ListItemProps<T extends FileBrowserBaseItem> {
  13     Cells: React.FC<{ item: any }>[];
  14     item: T;
  15     style?: React.CSSProperties;
  16
  17     isMultiSelectionDisabled?: boolean;
  18
  19     onItemContextMenu?: (e: any) => void;
  20     onItemOpen?: (id: string) => void;
  21     onItemRender?: (item: any) => void;
  22
  23     dragMoveControls?: DragMoveControls;
  24 }
  25
  26 const ItemRow = <T extends FileBrowserBaseItem>({
  27     style,
  28     item,
  29     Cells,
  30
  31     isMultiSelectionDisabled,
  32
  33     onItemContextMenu,
  34     onItemOpen,
  35     onItemRender,
  36     dragMoveControls,
  37 }: ListItemProps<T>) => {
  38     const { isSelected, itemHandlers } = useFileBrowserItem({
  39         id: item.id,
  40         isItemLocked: item.isLocked,
  41         onItemOpen,
  42         onItemContextMenu: onItemContextMenu,
  43         isMultiSelectionDisabled,
  44     });
  45     const dragnDropControls = useDragAndDrop({
  46         item,
  47         dragMoveControls,
  48     });
  49
  50     const { draggable, dragMoveItems } = dragnDropControls;
  51     const { dragging, DragMoveContent } = dragnDropControls.dragMove;
  52
  53     useEffect(() => {
  54         onItemRender?.(item);
  55     }, [onItemRender]);
  56
  57     return (
  58         <>
  59             {draggable && dragMoveControls && (
  60                 <DragMoveContent dragging={dragging} data={dragMoveItems}>
  61                     <DragMoveContainer>{dragnDropControls.moveText}</DragMoveContainer>
  62                 </DragMoveContent>
  63             )}
  64             <TableRow
  65                 style={{ ...style, ...item.itemRowStyle }}
  66                 tabIndex={0}
  67                 role="button"
  68                 draggable={draggable}
  69                 className={clsx([
  70                     'file-browser-list-item flex user-select-none group-hover-opacity-container',
  71                     (isSelected || dragMoveControls?.isActiveDropTarget || item.isLocked) && 'bg-strong',
  72                     (dragging || item.isLocked) && 'opacity-50',
  73                     item.isInvitation && 'file-browser-list-item--invitation',
  74                 ])}
  75                 aria-disabled={item.isLocked}
  76                 {...itemHandlers}
  77                 {...dragnDropControls.itemHandlers}
  78             >
  79                 {Cells.map((Cell, index) => (
  80                     <Cell key={item.id + index} item={item} />
  81                 ))}
  82             </TableRow>
  83         </>
  84     );
  85 };
  86
  87 export default memo(ItemRow, (a, b) => {
  88     if (isEquivalent(a, b)) {
  89         return true;
  90     }
  91
  92     if (
  93         !isEquivalent(a.style || {}, b.style || {}) ||
  94         !isEquivalent(a.item, b.item) ||
  95         !shallowEqual(a.Cells, b.Cells)
  96     ) {
  97         return false;
  98     }
  99
 100     const dragControlsEqual =
 101         a.dragMoveControls?.dragging === b.dragMoveControls?.dragging &&
 102         a.dragMoveControls?.isActiveDropTarget === b.dragMoveControls?.isActiveDropTarget &&
 103         a.dragMoveControls?.selectedItems === b.dragMoveControls?.selectedItems;
 104
 105     return dragControlsEqual;
 106 });