@ynput/ayon-frontend-shared 0.2.6 → 0.2.9

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.es.js

@@ -1,11 +1,12 @@
 import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
-import { memo, createElement, useMemo, useRef, useEffect } from "react";
+import { memo, createElement, useMemo, useRef, useEffect, useCallback } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { flexRender, useReactTable, filterFns, getSortedRowModel, getExpandedRowModel, getFilteredRowModel, getCoreRowModel } from "@tanstack/react-table";
 import clsx from "clsx";
 import buildTreeTableColumns from "./buildTreeTableColumns.es.js";
-import { TableCell as TableCell$1, TableWrapper, TableContainer, TableHeader, ColumnHeader, TR, HeaderCell, TableCellContent, HeaderButtons, ResizedHandler } from "./ProjectTreeTable.styled.es.js";
+import { TableCell as TableCell$1, TableWrapper, TableContainer, TR, TableHeader, ColumnHeader, HeaderCell, TableCellContent, HeaderButtons, ResizedHandler } from "./ProjectTreeTable.styled.es.js";
 import HeaderActionButton from "./components/HeaderActionButton.es.js";
+import RowDragHandleCellContent from "./components/RowDragHandleCellContent.es.js";
 import { EmptyPlaceholder } from "../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";
 import "../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
 import { useCellEditing } from "./context/CellEditingContext.es.js";
@@ -25,16 +26,22 @@ import { Icon } from "@ynput/ayon-react-components";
 import { useProjectTableContext } from "./context/ProjectTableContext.es.js";
 import { getTableFieldOptions } from "./utils/getTableFieldOptions.es.js";
 import { getReadOnlyLists } from "./utils/getReadOnlyLists.es.js";
-const getCommonPinningStyles = (column) => {
+import { DragOverlay } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.es.js";
+const getCommonPinningStyles = (column, isSortable) => {
   const isPinned = column.getIsPinned();
+  const offset = column.id !== ROW_SELECTION_COLUMN_ID && column.id !== DRAG_HANDLE_COLUMN_ID && isSortable ? -30 : 0;
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    left: isPinned === "left" ? `${column.getStart("left") + offset}px` : void 0,
+    // Removed offset
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
     zIndex: isPinned ? 100 : 0
   };
 };
+const DRAG_HANDLE_COLUMN_ID = "drag-handle";
 const ProjectTreeTable = ({
   scope,
   sliceId,
@@ -43,6 +50,12 @@ const ProjectTreeTable = ({
   readOnly,
   excludedColumns,
   extraColumns,
+  isLoading: isLoadingProp,
+  clientSorting = false,
+  sortableRows = false,
+  onRowReorder,
+  dndActiveId,
+  // Destructure new prop
   pt,
   ...props
 }) => {
@@ -63,7 +76,7 @@ const ProjectTreeTable = ({
     attribFields,
     entitiesMap,
     users,
-    isLoading,
+    isLoading: isLoadingData,
     isInitialized,
     expanded,
     projectName,
@@ -73,6 +86,7 @@ const ProjectTreeTable = ({
     updateSorting,
     showHierarchy
   } = useProjectTableContext();
+  const isLoading = isLoadingProp || isLoadingData;
   const { statuses = [], folderTypes = [], taskTypes = [], tags = [] } = projectInfo || {};
   const options = useMemo(
     () => getTableFieldOptions({
@@ -109,16 +123,35 @@ const ProjectTreeTable = ({
     () => isInitialized ? attribFields : loadingAttrib,
     [attribFields, loadingAttrib, isInitialized]
   );
-  const columns = useMemo(
-    () => buildTreeTableColumns({
+  const columns = useMemo(() => {
+    const baseColumns = buildTreeTableColumns({
       attribs: columnAttribs,
       showHierarchy,
       options,
       extraColumns,
       excluded: excludedColumns
-    }),
-    [columnAttribs, showHierarchy, options, extraColumns, excludedColumns]
-  );
+    });
+    if (sortableRows) {
+      return [
+        {
+          id: DRAG_HANDLE_COLUMN_ID,
+          header: () => null,
+          cell: () => null,
+          // Content rendered by TableBodyRow
+          size: 24,
+          minSize: 24,
+          maxSize: 24,
+          enableResizing: false,
+          enableSorting: false,
+          enableHiding: false,
+          enablePinning: false
+          // Programmatically pinned
+        },
+        ...baseColumns
+      ];
+    }
+    return baseColumns;
+  }, [columnAttribs, showHierarchy, options, extraColumns, excludedColumns, sortableRows]);
   const table = useReactTable({
     data: showLoadingRows ? loadingRows : tableData,
     columns,
@@ -140,7 +173,7 @@ const ProjectTreeTable = ({
     // EXPANDABLE
     onExpandedChange: updateExpanded,
     // SORTING
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: clientSorting ? getSortedRowModel() : void 0,
     onSortingChange: updateSorting,
     columnResizeMode: "onChange",
     onColumnPinningChange: columnPinningUpdater,
@@ -152,10 +185,22 @@ const ProjectTreeTable = ({
     state: {
       expanded,
       sorting,
-      columnPinning: {
-        left: [ROW_SELECTION_COLUMN_ID, ...columnPinning.left || []],
-        right: columnPinning.right
-      },
+      columnPinning: (() => {
+        const leftPins = [];
+        if (sortableRows) {
+          leftPins.push(DRAG_HANDLE_COLUMN_ID);
+        }
+        leftPins.push(ROW_SELECTION_COLUMN_ID);
+        const contextLeftPins = (columnPinning.left || []).filter(
+          (id) => id !== DRAG_HANDLE_COLUMN_ID && id !== ROW_SELECTION_COLUMN_ID
+        );
+        leftPins.push(...contextLeftPins);
+        const uniqueLeftPins = [...new Set(leftPins)];
+        return {
+          left: uniqueLeftPins,
+          right: columnPinning.right
+        };
+      })(),
       columnSizing,
       columnVisibility,
       columnOrder
@@ -198,7 +243,12 @@ const ProjectTreeTable = ({
       return acc;
     }, {});
   }, [attribFields]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const rowOrderIds = useMemo(() => tableData.map((row) => row.id), [tableData]);
+  const draggedRowData = useMemo(() => {
+    if (!dndActiveId || !sortableRows) return null;
+    return tableData.find((r) => r.id === dndActiveId);
+  }, [dndActiveId, tableData, sortableRows]);
+  const tableUiContent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     ClipboardProvider,
     {
       entitiesMap,
@@ -232,6 +282,7 @@ const ProjectTreeTable = ({
                     virtualPaddingRight,
                     isLoading,
                     readOnlyColumns,
+                    sortableRows,
                     ...pt == null ? void 0 : pt.head
                   }
                 ),
@@ -245,7 +296,9 @@ const ProjectTreeTable = ({
                     virtualPaddingRight,
                     showHierarchy,
                     attribs: attribFields,
-                    onOpenNew
+                    onOpenNew,
+                    rowOrderIds,
+                    sortableRows
                   }
                 )
               ]
@@ -255,6 +308,73 @@ const ProjectTreeTable = ({
       ) })
     }
   );
+  const dragOverlayPortal = sortableRows && dndActiveId && createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DragOverlay, { dropAnimation: null, children: draggedRowData ? (() => {
+      const overlayRowInstance = table.getRowModel().rows.find((r) => r.id === dndActiveId);
+      if (!overlayRowInstance) return null;
+      const tableWidth = table.getTotalSize();
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "table",
+        {
+          style: {
+            width: tableWidth,
+            borderCollapse: "collapse",
+            backgroundColor: "var(--md-sys-color-surface-container-high)",
+            boxShadow: "0 0 10px rgba(0,0,0,0.2)",
+            ...columnSizeVars
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TR, { style: { display: "flex", userSelect: "none" }, children: [
+            virtualPaddingLeft ? /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingLeft } }) : null,
+            columnVirtualizer.getVirtualItems().map((vc) => {
+              const cell = overlayRowInstance.getVisibleCells()[vc.index];
+              if (!cell) return null;
+              const cellStyleBase = {
+                ...getCommonPinningStyles(cell.column, true),
+                width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                display: "flex",
+                alignItems: "center",
+                height: 40
+              };
+              if (cell.column.id === DRAG_HANDLE_COLUMN_ID) {
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  TableCell$1,
+                  {
+                    style: { ...cellStyleBase, justifyContent: "center" },
+                    className: clsx(cell.column.id),
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "drag_handle" }),
+                      " "
+                    ]
+                  },
+                  `overlay-drag-${cell.id}`
+                );
+              }
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                TableCellMemo,
+                {
+                  cell,
+                  cellId: `overlay-${getCellId(overlayRowInstance.id, cell.column.id)}`,
+                  rowId: overlayRowInstance.id,
+                  showHierarchy
+                },
+                `overlay-cell-${cell.id}`
+              );
+            }),
+            virtualPaddingRight ? /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingRight } }) : null
+          ] }) })
+        }
+      );
+    })() : null }),
+    document.body
+  );
+  if (sortableRows) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      tableUiContent,
+      dragOverlayPortal
+    ] });
+  } else {
+    return tableUiContent;
+  }
 };
 const TableHead = ({
   columnVirtualizer,
@@ -263,6 +383,7 @@ const TableHead = ({
   virtualPaddingRight,
   isLoading,
   readOnlyColumns,
+  sortableRows,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { ...props, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -273,7 +394,8 @@ const TableHead = ({
       virtualPaddingLeft,
       virtualPaddingRight,
       isLoading,
-      readOnlyColumns
+      readOnlyColumns,
+      sortableRows
     },
     headerGroup.id
   )) });
@@ -284,7 +406,8 @@ const TableHeadRow = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   isLoading,
-  readOnlyColumns
+  readOnlyColumns,
+  sortableRows
 }) => {
   const virtualColumns = columnVirtualizer.getVirtualItems();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ColumnHeader, { style: { display: "flex" }, children: [
@@ -304,7 +427,8 @@ const TableHeadRow = ({
           canFilter: header.column.getCanFilter(),
           canHide: header.column.getCanHide(),
           canPin: header.column.getCanPin(),
-          canResize: header.column.getCanResize()
+          canResize: header.column.getCanResize(),
+          sortableRows
         },
         header.id
       );
@@ -323,7 +447,8 @@ const TableHeadCell = ({
   canSort,
   canPin,
   canResize,
-  isReadOnly
+  isReadOnly,
+  sortableRows
 }) => {
   const { column } = header;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -334,7 +459,7 @@ const TableHeadCell = ({
         "last-pinned-left": column.getIsPinned() === "left" && column.getIsLastColumn("left")
       }),
       style: {
-        ...getCommonPinningStyles(column),
+        ...getCommonPinningStyles(column, sortableRows),
         width: `calc(var(--header-${header == null ? void 0 : header.id}-size) * 1px)`
       },
       children: header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCellContent, { className: clsx("bold"), children: [
@@ -401,14 +526,16 @@ const TableBody = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   attribs,
-  onOpenNew
+  onOpenNew,
+  rowOrderIds,
+  sortableRows
 }) => {
   const { handleTableBodyContextMenu } = useCellContextMenu({ attribs, onOpenNew });
   const { handlePreFetchTasks } = usePrefetchFolderTasks();
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
-    estimateSize: () => showHierarchy ? 36 : 40,
+    estimateSize: () => 40,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,
     //measure dynamic row height, except in firefox because it measures table border height incorrectly
@@ -416,8 +543,16 @@ const TableBody = ({
     overscan: 5
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
+  const measureRowElement = useCallback(
+    (node) => {
+      if (node) {
+        rowVirtualizer.measureElement(node);
+      }
+    },
+    [rowVirtualizer]
+  );
   useKeyboardNavigation();
-  return virtualRows.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const tbodyContent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     "tbody",
     {
       style: {
@@ -431,72 +566,160 @@ const TableBody = ({
       },
       children: virtualRows.map((virtualRow) => {
         const row = rows[virtualRow.index];
+        if (!row) {
+          console.warn("Virtualized row data not found for index:", virtualRow.index);
+          return null;
+        }
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           TableBodyRow,
           {
-            columnVirtualizer,
             row,
-            rowVirtualizer,
-            virtualPaddingLeft,
-            virtualPaddingRight,
-            virtualRow,
-            showHierarchy
+            showHierarchy,
+            visibleCells: row.getVisibleCells(),
+            virtualColumns: columnVirtualizer.getVirtualItems(),
+            paddingLeft: virtualPaddingLeft,
+            paddingRight: virtualPaddingRight,
+            rowRef: measureRowElement,
+            dataIndex: virtualRow.index,
+            offsetTop: virtualRow.start,
+            sortableRows
           },
           row.id
         );
       })
     }
-  ) : tableContainerRef.current && createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(EmptyPlaceholder, { message: "No items found" }), tableContainerRef.current);
+  );
+  if (!virtualRows.length) {
+    return tableContainerRef.current && createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(EmptyPlaceholder, { message: "No items found" }), tableContainerRef.current);
+  }
+  if (sortableRows) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SortableContext, { items: rowOrderIds, strategy: verticalListSortingStrategy, children: tbodyContent });
+  } else {
+    return tbodyContent;
+  }
 };
 const TableBodyRow = ({
-  columnVirtualizer,
   row,
-  rowVirtualizer,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  virtualRow,
-  showHierarchy
+  showHierarchy,
+  visibleCells,
+  virtualColumns,
+  paddingLeft,
+  paddingRight,
+  rowRef,
+  dataIndex,
+  offsetTop,
+  sortableRows
 }) => {
-  const visibleCells = row.getVisibleCells();
-  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const sortable = sortableRows ? useSortable({ id: row.id }) : null;
+  const combinedRef = useCallback(
+    (node) => {
+      if (sortable) {
+        sortable.setNodeRef(node);
+      }
+      if (!(sortable && sortable.isDragging)) {
+        rowRef(node);
+      }
+    },
+    [sortable, rowRef]
+  );
+  const style = {
+    position: "absolute",
+    // Use absolute positioning for virtualized items
+    top: offsetTop,
+    // Position based on virtualizer's calculation (virtualRow.start)
+    left: 0,
+    // Span full width of the relative parent (tbody)
+    right: 0,
+    // Span full width
+    height: 40,
+    // Explicit height can be beneficial for absolute positioning
+    zIndex: sortable && sortable.isDragging ? 0 : 1,
+    // Ensure dragged item is above others
+    display: "flex",
+    // Styled.TR is display:flex
+    transform: sortable && sortable.transform ? CSS.Transform.toString(sortable.transform) : void 0,
+    // Apply dnd-kit's transform for drag effect
+    transition: sortable && sortable.transition ? sortable.transition : void 0,
+    visibility: sortable && sortable.isDragging ? "hidden" : "visible"
+    // Hide the row being dragged
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     TR,
     {
-      "data-index": virtualRow.index,
-      ref: (node) => rowVirtualizer.measureElement(node),
-      style: {
-        transform: `translateY(${virtualRow.start}px)`
-        //this should always be a `style` as it changes on scroll
-      },
+      ref: combinedRef,
+      "data-index": dataIndex,
+      style,
       children: [
-        virtualPaddingLeft ? (
+        paddingLeft ? (
           //fake empty column to the left for virtualization scroll padding
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingLeft } })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { display: "flex", width: paddingLeft } })
         ) : null,
         virtualColumns.map((vc) => {
           const cell = visibleCells[vc.index];
+          if (!cell) return null;
           const cellId = getCellId(row.id, cell.column.id);
+          if (cell.column.id === DRAG_HANDLE_COLUMN_ID) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TableCell$1,
+              {
+                style: {
+                  ...getCommonPinningStyles(cell.column, sortableRows),
+                  width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: 40
+                },
+                className: clsx(cell.column.id, {
+                  "last-pinned-left": cell.column.getIsPinned() === "left" && cell.column.getIsLastColumn("left")
+                }),
+                onMouseDown: (e) => e.stopPropagation(),
+                onMouseOver: (e) => e.stopPropagation(),
+                onDoubleClick: (e) => e.stopPropagation(),
+                onContextMenu: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  RowDragHandleCellContent,
+                  {
+                    attributes: sortable == null ? void 0 : sortable.attributes,
+                    listeners: sortable == null ? void 0 : sortable.listeners
+                  }
+                )
+              },
+              cell.id
+            );
+          }
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             TableCellMemo,
             {
               cell,
               cellId,
               rowId: row.id,
-              showHierarchy
+              showHierarchy,
+              sortableRows
             },
             cell.id
           );
         }),
-        virtualPaddingRight ? (
+        paddingRight ? (
           //fake empty column to the right for virtualization scroll padding
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingRight } })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { display: "flex", width: paddingRight } })
         ) : null
       ]
-    },
-    row.id
+    }
   );
 };
-const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props }) => {
+const TableCell = ({
+  cell,
+  rowId,
+  cellId,
+  className,
+  showHierarchy,
+  sortableRows,
+  ...props
+}) => {
   const {
     isCellSelected,
     isCellFocused,
@@ -533,9 +756,9 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
         ...borderClasses
       ),
       style: {
-        ...getCommonPinningStyles(cell.column),
+        ...getCommonPinningStyles(cell.column, sortableRows),
         width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-        height: showHierarchy ? 36 : 40
+        height: 40
       },
       onMouseDown: (e) => {
         if (e.button !== 0) return;
@@ -576,6 +799,7 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
 };
 const TableCellMemo = memo(TableCell);
 export {
+  DRAG_HANDLE_COLUMN_ID,
   ProjectTreeTable
 };
 //# sourceMappingURL=ProjectTreeTable.es.js.map