Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 824db72

Browse files
RafaelGBRafaelGB
committed
dnd fixed!
1 parent 9e3b853 commit 824db72

File tree

3 files changed

+59
-53
lines changed

3 files changed

+59
-53
lines changed

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,6 @@
6262
"react-color": "2.19.3",
6363
"react-csv": "2.2.2",
6464
"react-datepicker": "4.8.0",
65-
"react-dnd": "16.0.1",
66-
"react-dnd-html5-backend": "16.0.1",
6765
"react-dom": "18.2.0",
6866
"react-popper": "2.3.0",
6967
"react-select": "5.4.0",

‎src/components/Table.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ import { HeaderNavBar } from "components/NavBar";
3838
import TableHeader from "components/TableHeader";
3939
import CustomTemplateSelectorStyles from "components/styles/RowTemplateStyles";
4040
import Select, { OnChangeValue } from "react-select";
41-
import { DndProvider } from "react-dnd";
42-
import { HTML5Backend } from "react-dnd-html5-backend";
4341
import TableRow from "components/TableRow";
4442
import getInitialColumnSizing from "components/behavior/InitialColumnSizeRecord";
4543
import { globalDatabaseFilterFn } from "components/reducers/TableFilterFlavours";
@@ -333,7 +331,7 @@ export function Table(tableData: TableDataType) {
333331
className={`${c("tr header-group")}`}
334332
>
335333
{/* TODO manage context with documentFragment in any way to fix DnD conflict with Obsidian */}
336-
<DndProvider
334+
{/* <DndProvider
337335
key={`${headerGroup.id}-${headerGroupIndex}-dnd-provider`}
338336
debugMode={globalConfig.enable_debug_mode}
339337
backend={HTML5Backend}
@@ -343,28 +341,28 @@ export function Table(tableData: TableDataType) {
343341
? activeWindow
344342
: activeDocument.createElement("div"))
345343
}
346-
>
347-
{headerGroup.headers
348-
.filter(
349-
(o: Header<RowDataType, TableColumn>) =>
350-
(o.column.columnDef as TableColumn).key !==
351-
MetadataColumns.ADD_COLUMN
344+
> */}
345+
{headerGroup.headers
346+
.filter(
347+
(o: Header<RowDataType, TableColumn>) =>
348+
(o.column.columnDef as TableColumn).key !==
349+
MetadataColumns.ADD_COLUMN
350+
)
351+
.map(
352+
(
353+
header: Header<RowDataType, TableColumn>,
354+
headerIndex: number
355+
) => (
356+
<TableHeader
357+
key={`${header.id}-${headerIndex}`}
358+
table={table}
359+
header={header}
360+
reorderColumn={reorderColumn}
361+
headerIndex={headerIndex}
362+
/>
352363
)
353-
.map(
354-
(
355-
header: Header<RowDataType, TableColumn>,
356-
headerIndex: number
357-
) => (
358-
<TableHeader
359-
key={`${header.id}-${headerIndex}`}
360-
table={table}
361-
header={header}
362-
reorderColumn={reorderColumn}
363-
headerIndex={headerIndex}
364-
/>
365-
)
366-
)}
367-
</DndProvider>
364+
)}
365+
{/* </DndProvider> */}
368366
{headerGroup.headers
369367
.filter(
370368
(o: Header<RowDataType, TableColumn>) =>

‎src/components/TableHeader.tsx‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import React from "react";
2-
import { Column, flexRender } from "@tanstack/react-table";
2+
import { flexRender } from "@tanstack/react-table";
33
import { c } from "helpers/StylesHelper";
44
import { TableHeaderProps } from "cdm/HeaderModel";
5-
import { useDrag, useDrop } from "react-dnd";
6-
import { RowDataType } from "cdm/FolderModel";
7-
import { DnDConfiguration } from "helpers/Constants";
85

96
export default function TableHeader(headerProps: TableHeaderProps) {
107
const { table, header, reorderColumn, headerIndex } = headerProps;
118
const { view } = table.options.meta;
129
const { columnOrder } = table.options.state;
13-
10+
const [isDragging, setIsDragging] = React.useState(false);
11+
const dndRef = React.useRef(null);
1412
function moveColumn(
1513
draggedColumnId: string,
1614
targetColumnId: string,
@@ -27,37 +25,49 @@ export default function TableHeader(headerProps: TableHeaderProps) {
2725
return newColumnOrder;
2826
}
2927

30-
const [, dropRef] = useDrop({
31-
accept: DnDConfiguration.DRAG_TYPE,
32-
drop: (draggedColumn: Column<RowDataType>) => {
33-
const newColumnOrder = moveColumn(
34-
draggedColumn.id,
35-
header.column.id,
36-
columnOrder
37-
);
38-
table.setColumnOrder(newColumnOrder);
39-
},
40-
});
41-
42-
const [{ isDragging }, dragRef] = useDrag({
43-
collect: (monitor) => ({
44-
isDragging: monitor.isDragging(),
45-
}),
46-
item: () => header.column,
47-
type: DnDConfiguration.DRAG_TYPE,
48-
});
49-
5028
return (
5129
<div
5230
key={`${header.id}-${headerIndex}`}
5331
className={`${c("th noselect")} header`}
32+
ref={dndRef}
5433
style={{
5534
width: header.getSize(),
5635
opacity: isDragging ? 0.5 : 1,
5736
}}
58-
ref={dropRef}
37+
onDrop={(e) => {
38+
e.preventDefault();
39+
const newColumnOrder = moveColumn(
40+
e.dataTransfer.getData("dbfolderDragId"),
41+
header.column.id,
42+
columnOrder
43+
);
44+
table.setColumnOrder(newColumnOrder);
45+
return false;
46+
}}
47+
draggable
48+
onDragStart={(e) => {
49+
setIsDragging(true);
50+
e.dataTransfer.effectAllowed = "move";
51+
e.dataTransfer.setData("dbfolderDragId", header.column.id);
52+
}}
53+
onDragEnter={(e) => {
54+
dndRef.current.classList.add("over");
55+
}}
56+
onDragLeave={(e) => {
57+
dndRef.current.classList.remove("over");
58+
}}
59+
onDragEnd={(e) => {
60+
setIsDragging(false);
61+
}}
62+
onDragOver={(e) => {
63+
if (e.preventDefault) {
64+
e.preventDefault();
65+
}
66+
e.dataTransfer.dropEffect = "move";
67+
return false;
68+
}}
5969
>
60-
<div ref={dragRef} key={`${header.id}-${headerIndex}-dnd`}>
70+
<div key={`${header.id}-${headerIndex}-dnd`}>
6171
{header.isPlaceholder
6272
? null
6373
: flexRender(header.column.columnDef.header, header.getContext())}

0 commit comments

Comments
 (0)