Merge branch 'dnd-try'

Author: RafaelGB

package.json

@@ -62,8 +62,6 @@
 		"react-color": "2.19.3",
 		"react-csv": "2.2.2",
 		"react-datepicker": "4.8.0",
-		"react-dnd": "16.0.1",
-		"react-dnd-html5-backend": "16.0.1",
 		"react-dom": "18.2.0",
 		"react-popper": "2.3.0",
 		"react-select": "5.4.0",

src/cdm/SettingsModel.ts

@@ -16,7 +16,6 @@ export interface GlobalSettings {
     enable_debug_mode: boolean;
     logger_level_info: string;
     media_settings: MediaSettings;
-    enable_dnd: boolean;
     enable_show_state: boolean;
 }
 

src/components/Table.tsx

@@ -38,8 +38,6 @@ import { HeaderNavBar } from "components/NavBar";
 import TableHeader from "components/TableHeader";
 import CustomTemplateSelectorStyles from "components/styles/RowTemplateStyles";
 import Select, { OnChangeValue } from "react-select";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
 import TableRow from "components/TableRow";
 import getInitialColumnSizing from "components/behavior/InitialColumnSizeRecord";
 import { globalDatabaseFilterFn } from "components/reducers/TableFilterFlavours";
@@ -333,7 +331,7 @@ export function Table(tableData: TableDataType) {
                   className={`${c("tr header-group")}`}
                 >
                   {/* TODO manage context with documentFragment in any way to fix DnD conflict with Obsidian */}
-                  <DndProvider
+                  {/* <DndProvider
                     key={`${headerGroup.id}-${headerGroupIndex}-dnd-provider`}
                     debugMode={globalConfig.enable_debug_mode}
                     backend={HTML5Backend}
@@ -343,28 +341,28 @@ export function Table(tableData: TableDataType) {
                         ? activeWindow
                         : activeDocument.createElement("div"))
                     }
-                  >
-                    {headerGroup.headers
-                      .filter(
-                        (o: Header<RowDataType, TableColumn>) =>
-                          (o.column.columnDef as TableColumn).key !==
-                          MetadataColumns.ADD_COLUMN
+                  > */}
+                  {headerGroup.headers
+                    .filter(
+                      (o: Header<RowDataType, TableColumn>) =>
+                        (o.column.columnDef as TableColumn).key !==
+                        MetadataColumns.ADD_COLUMN
+                    )
+                    .map(
+                      (
+                        header: Header<RowDataType, TableColumn>,
+                        headerIndex: number
+                      ) => (
+                        <TableHeader
+                          key={`${header.id}-${headerIndex}`}
+                          table={table}
+                          header={header}
+                          reorderColumn={reorderColumn}
+                          headerIndex={headerIndex}
+                        />
                       )
-                      .map(
-                        (
-                          header: Header<RowDataType, TableColumn>,
-                          headerIndex: number
-                        ) => (
-                          <TableHeader
-                            key={`${header.id}-${headerIndex}`}
-                            table={table}
-                            header={header}
-                            reorderColumn={reorderColumn}
-                            headerIndex={headerIndex}
-                          />
-                        )
-                      )}
-                  </DndProvider>
+                    )}
+                  {/* </DndProvider> */}
                   {headerGroup.headers
                     .filter(
                       (o: Header<RowDataType, TableColumn>) =>

src/components/TableHeader.tsx

@@ -1,16 +1,14 @@
 import React from "react";
-import { Column, flexRender } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
 import { c } from "helpers/StylesHelper";
 import { TableHeaderProps } from "cdm/HeaderModel";
-import { useDrag, useDrop } from "react-dnd";
-import { RowDataType } from "cdm/FolderModel";
-import { DnDConfiguration } from "helpers/Constants";
 
 export default function TableHeader(headerProps: TableHeaderProps) {
   const { table, header, reorderColumn, headerIndex } = headerProps;
   const { view } = table.options.meta;
   const { columnOrder } = table.options.state;
-
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dndRef = React.useRef(null);
   function moveColumn(
     draggedColumnId: string,
     targetColumnId: string,
@@ -27,37 +25,49 @@ export default function TableHeader(headerProps: TableHeaderProps) {
     return newColumnOrder;
   }
 
-  const [, dropRef] = useDrop({
-    accept: DnDConfiguration.DRAG_TYPE,
-    drop: (draggedColumn: Column<RowDataType>) => {
-      const newColumnOrder = moveColumn(
-        draggedColumn.id,
-        header.column.id,
-        columnOrder
-      );
-      table.setColumnOrder(newColumnOrder);
-    },
-  });
-
-  const [{ isDragging }, dragRef] = useDrag({
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    item: () => header.column,
-    type: DnDConfiguration.DRAG_TYPE,
-  });
-
   return (
     <div
       key={`${header.id}-${headerIndex}`}
       className={`${c("th noselect")} header`}
+      ref={dndRef}
       style={{
         width: header.getSize(),
         opacity: isDragging ? 0.5 : 1,
       }}
-      ref={dropRef}
+      onDrop={(e) => {
+        e.preventDefault();
+        const newColumnOrder = moveColumn(
+          e.dataTransfer.getData("dbfolderDragId"),
+          header.column.id,
+          columnOrder
+        );
+        table.setColumnOrder(newColumnOrder);
+        return false;
+      }}
+      draggable
+      onDragStart={(e) => {
+        setIsDragging(true);
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("dbfolderDragId", header.column.id);
+      }}
+      onDragEnter={(e) => {
+        dndRef.current.classList.add("over");
+      }}
+      onDragLeave={(e) => {
+        dndRef.current.classList.remove("over");
+      }}
+      onDragEnd={(e) => {
+        setIsDragging(false);
+      }}
+      onDragOver={(e) => {
+        if (e.preventDefault) {
+          e.preventDefault();
+        }
+        e.dataTransfer.dropEffect = "move";
+        return false;
+      }}
     >
-      <div ref={dragRef} key={`${header.id}-${headerIndex}-dnd`}>
+      <div key={`${header.id}-${headerIndex}-dnd`}>
         {header.isPlaceholder
           ? null
           : flexRender(header.column.columnDef.header, header.getContext())}

src/helpers/Constants.ts

@@ -294,7 +294,6 @@ export const YAML_INDENT = Object.freeze("  ");
 export const DEFAULT_SETTINGS: DatabaseSettings = {
   global_settings: {
     enable_debug_mode: false,
-    enable_dnd: false,
     enable_show_state: false,
     logger_level_info: 'error',
     media_settings: {

src/settings/DeveloperSection.ts

@@ -3,7 +3,6 @@ import { SettingHandlerResponse } from 'settings/handlers/AbstractSettingHandler
 import { LoggerToggleHandler } from 'settings/handlers/developer/LoggerToggleHandler';
 import { TableStateToggleHandler } from 'settings/handlers/developer/TableStateToggleHandler';
 import { LoggerLevelInfoDropDownHandler } from 'settings/handlers/developer/LoggerLevelInfoDropDownHandler';
-import { DnDToggleHandler } from 'settings/handlers/developer/DnDToggleHandler';
 import { AbstractChain } from 'patterns/AbstractFactoryChain';
 import { AbstractHandler } from 'patterns/AbstractHandler';
 
@@ -20,7 +19,6 @@ class DeveloperSetttingsSection extends AbstractChain<SettingHandlerResponse> {
     }
     protected getHandlers(): AbstractHandler<SettingHandlerResponse>[] {
         return [
-            new DnDToggleHandler(),
             new LoggerToggleHandler(),
             new LoggerLevelInfoDropDownHandler(),
             new TableStateToggleHandler()