Merge branch 'improve-dnd'

Author: RafaelGB

src/cdm/HeaderModel.ts

@@ -1,4 +1,4 @@
-import { Header, Table } from "@tanstack/react-table";
+import { ColumnOrderState, Header, Table } from "@tanstack/react-table";
 import { DatabaseHeaderProps, RowDataType, TableColumn } from "cdm/FolderModel";
 
 export type HeaderMenuProps = {
@@ -15,9 +15,6 @@ export type HeaderMenuProps = {
 export type TableHeaderProps = {
     table: Table<RowDataType>;
     header: Header<RowDataType, TableColumn>;
-    findColumn: (id: string) => {
-        findedColumn: TableColumn;
-        index: number;
-    };
+    reorderColumn: (draggedColumnId: string, targetColumnId: string, columnOrder: string[]) => ColumnOrderState;
     headerIndex: number;
 };

src/components/DefaultCell.tsx

@@ -61,6 +61,8 @@ export default function DefaultCell(
       /** Checkbox option */
       case InputType.CHECKBOX:
         return <CheckboxCell defaultCell={defaultCell} />;
+
+      /** New column option */
       case InputType.NEW_COLUMN:
         // Do nothing
         break;

src/components/Table.tsx

@@ -103,16 +103,18 @@ export function Table(tableData: TableDataType) {
     columnsInfo.getValueOfAllColumnsAsociatedWith("id")
   );
 
-  const findColumn = React.useCallback(
-    (id: string) => {
-      const findedColumn = columns.find((c) => c.id === id);
-      return {
-        findedColumn,
-        index: columns.indexOf(findedColumn),
-      };
-    },
-    [columns]
-  );
+  const reorderColumn = (
+    draggedColumnId: string,
+    targetColumnId: string,
+    columnOrder: string[]
+  ): ColumnOrderState => {
+    columnOrder.splice(
+      columnOrder.indexOf(targetColumnId),
+      0,
+      columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string
+    );
+    return [...columnOrder];
+  };
   // Niveling number of columns
   if (columnOrder.length !== columns.length) {
     setColumnOrder(columnsInfo.getValueOfAllColumnsAsociatedWith("id"));
@@ -352,7 +354,7 @@ export function Table(tableData: TableDataType) {
                             key={`${header.id}-${headerIndex}`}
                             table={table}
                             header={header}
-                            findColumn={findColumn}
+                            reorderColumn={reorderColumn}
                             headerIndex={headerIndex}
                           />
                         )

src/components/TableHeader.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { flexRender } from "@tanstack/react-table";
+import { Column, flexRender } from "@tanstack/react-table";
 import { c } from "helpers/StylesHelper";
 import { TableHeaderProps } from "cdm/HeaderModel";
 import { useDrag, useDrop } from "react-dnd";
-import { TableColumn } from "cdm/FolderModel";
+import { RowDataType } from "cdm/FolderModel";
 import { DnDConfiguration } from "helpers/Constants";
 
 interface DragItem {
@@ -13,76 +13,57 @@ interface DragItem {
 }
 
 export default function TableHeader(headerProps: TableHeaderProps) {
-  const { table, header, findColumn, headerIndex } = headerProps;
-  const { id } = header.column.columnDef as TableColumn;
-  const { view, tableState } = table.options.meta;
+  const { table, header, reorderColumn, headerIndex } = headerProps;
+  const { view } = table.options.meta;
   const { columnOrder } = table.options.state;
-  const columns = tableState.columns((state) => state.columns);
 
-  const originalIndex = React.useMemo(() => {
-    return columnOrder.findIndex((colId) => colId === id);
-  }, [columnOrder]);
-
-  //DnD
-  const DnDref = React.useRef<HTMLDivElement>(null);
-
-  function moveColumn(source: number, destinationKey: string) {
-    const { index: destIndex } = findColumn(destinationKey);
-    const newColumnOrder = [...columnOrder];
-    newColumnOrder.splice(destIndex, 1);
-    newColumnOrder.splice(source, 0, columns[destIndex].id);
-    table.setColumnOrder(newColumnOrder);
+  function moveColumn(
+    draggedColumnId: string,
+    targetColumnId: string,
+    columnOrder: string[]
+  ) {
+    const newColumnOrder = reorderColumn(
+      draggedColumnId,
+      targetColumnId,
+      columnOrder
+    );
+    // Save on disk
     view.diskConfig.reorderColumns(newColumnOrder);
+    // Save on memory
+    return newColumnOrder;
   }
 
-  const [{ isDragging, handlerId }, drag] = useDrag(
-    () => ({
-      type: DnDConfiguration.DRAG_TYPE,
-      item: { id, originalIndex },
-      collect: (monitor) => ({
-        handlerId: monitor.getHandlerId(),
-        isDragging: monitor.isDragging(),
-      }),
-      end: (item, monitor) => {
-        const { id: droppedId, originalIndex } = item;
-        const didDrop = monitor.didDrop();
-        if (!didDrop) {
-          moveColumn(originalIndex, droppedId);
-        }
-      },
-    }),
-    [id, originalIndex, findColumn]
-  );
+  const [, dropRef] = useDrop({
+    accept: DnDConfiguration.DRAG_TYPE,
+    drop: (draggedColumn: Column<RowDataType>) => {
+      const newColumnOrder = moveColumn(
+        draggedColumn.id,
+        header.column.id,
+        columnOrder
+      );
+      table.setColumnOrder(newColumnOrder);
+    },
+  });
 
-  const [, drop] = useDrop(
-    () => ({
-      accept: DnDConfiguration.DRAG_TYPE,
-      hover({ id: draggedId }: DragItem) {
-        if (draggedId !== id) {
-          const { index: overIndex } = findColumn(id);
-          moveColumn(overIndex, draggedId);
-        }
-      },
+  const [{ isDragging }, dragRef] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
     }),
-    [findColumn]
-  );
+    item: () => header.column,
+    type: DnDConfiguration.DRAG_TYPE,
+  });
 
-  const opacity = isDragging ? 0 : 1;
-  drag(drop(DnDref));
   return (
     <div
       key={`${header.id}-${headerIndex}`}
       className={`${c("th noselect")} header`}
       style={{
         width: header.getSize(),
-        opacity,
+        opacity: isDragging ? 0.5 : 1,
       }}
+      ref={dropRef}
     >
-      <div
-        ref={DnDref}
-        data-handler-id={handlerId}
-        key={`${header.id}-${headerIndex}-dnd`}
-      >
+      <div ref={dragRef} key={`${header.id}-${headerIndex}-dnd`}>
         {header.isPlaceholder
           ? null
           : flexRender(header.column.columnDef.header, header.getContext())}

src/mock/mockDataviewUtils.ts

@@ -7,6 +7,6 @@ export const generateStateManager = (): StateManager => {
         app.workspace.getMostRecentLeaf(),
         null
     );
-    const stateManager = new StateManager(app, initialView, null, null, null);
+    const stateManager = new StateManager(initialView, null, null, null);
     return stateManager;
 };