mirror of
https://github.com/docmost/docmost.git
synced 2026-06-15 22:48:42 +08:00
refactor(base): stabilize column-reorder dnd effect against WS-driven refetches
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { memo, useCallback, useEffect, useRef, useState } from "react";
|
import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||||
import { Header, flexRender } from "@tanstack/react-table";
|
import { Header, flexRender } from "@tanstack/react-table";
|
||||||
import { Popover } from "@mantine/core";
|
import { Popover } from "@mantine/core";
|
||||||
import { useAtom } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
@@ -100,7 +100,18 @@ export const GridHeaderCell = memo(function GridHeaderCell({
|
|||||||
setPropertyMenuDirty(dirty);
|
setPropertyMenuDirty(dirty);
|
||||||
}, [setPropertyMenuDirty]);
|
}, [setPropertyMenuDirty]);
|
||||||
|
|
||||||
const isSortableDisabled = isRowNumber || isPinned === "left";
|
const isSortableDisabled = isRowNumber || !!isPinned;
|
||||||
|
|
||||||
|
// onColumnReorder ultimately depends on React Query result objects
|
||||||
|
// (activeView, base) via persistViewConfig — their identity changes on
|
||||||
|
// every cache invalidation (i.e. every WS-driven collab refresh). Holding
|
||||||
|
// the callback in a ref keeps it out of the DnD effect's dep array, so
|
||||||
|
// we don't tear down and re-register the pragmatic-dnd adapter on every
|
||||||
|
// header cell each time another user edits the base.
|
||||||
|
const onColumnReorderRef = useRef(onColumnReorder);
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
onColumnReorderRef.current = onColumnReorder;
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const el = cellRef.current;
|
const el = cellRef.current;
|
||||||
@@ -142,13 +153,13 @@ export const GridHeaderCell = memo(function GridHeaderCell({
|
|||||||
axis: "horizontal",
|
axis: "horizontal",
|
||||||
});
|
});
|
||||||
if (finishIndex === startIndex) return;
|
if (finishIndex === startIndex) return;
|
||||||
onColumnReorder?.(source.data.columnId as string, finishIndex);
|
onColumnReorderRef.current?.(source.data.columnId as string, finishIndex);
|
||||||
triggerPostMoveFlash(el);
|
triggerPostMoveFlash(el);
|
||||||
liveRegion.announce(`Moved column to position ${finishIndex + 1}`);
|
liveRegion.announce(`Moved column to position ${finishIndex + 1}`);
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}, [header.column.id, isSortableDisabled, onColumnReorder, getColumnOrder]);
|
}, [header.column.id, isSortableDisabled, getColumnOrder]);
|
||||||
|
|
||||||
const handleHeaderClick = useCallback(() => {
|
const handleHeaderClick = useCallback(() => {
|
||||||
setEditingCell(null);
|
setEditingCell(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user