vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-07-16 15:39:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix item table scroll sync when pinned columns change

Browse Source
This commit is contained in:
jeffvli
2026-07-11 13:33:42 -07:00
parent 641e938f86
commit 58ae496e05
2 changed files with 281 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/hooks/use-table-pane-sync.ts
+139 -43
View File
@@ -7,6 +7,26 @@ import { useEffect } from 'react';
import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state'; import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
const getPaneScrollViewport = (ref: React.RefObject<HTMLDivElement | null>) =>
ref.current?.firstElementChild as HTMLDivElement | undefined;
const getPaneElements = ({
pinnedLeftColumnRef,
pinnedRightColumnRef,
pinnedRowRef,
rowRef,
}: {
pinnedLeftColumnRef: React.RefObject<HTMLDivElement | null>;
pinnedRightColumnRef: React.RefObject<HTMLDivElement | null>;
pinnedRowRef: React.RefObject<HTMLDivElement | null>;
rowRef: React.RefObject<HTMLDivElement | null>;
}) => ({
header: getPaneScrollViewport(pinnedRowRef),
pinnedLeft: getPaneScrollViewport(pinnedLeftColumnRef),
pinnedRight: getPaneScrollViewport(pinnedRightColumnRef),
row: getPaneScrollViewport(rowRef),
});
export const useTablePaneSync = ({ export const useTablePaneSync = ({
enableDrag, enableDrag,
enableDragScroll, enableDragScroll,
@@ -21,6 +41,7 @@ export const useTablePaneSync = ({
rowRef, rowRef,
scrollContainerRef, scrollContainerRef,
scrollShadowStore, scrollShadowStore,
scrollSyncKey,
}: { }: {
enableDrag: boolean | undefined; enableDrag: boolean | undefined;
enableDragScroll: boolean | undefined; enableDragScroll: boolean | undefined;
@@ -37,6 +58,7 @@ export const useTablePaneSync = ({
rowRef: React.RefObject<HTMLDivElement | null>; rowRef: React.RefObject<HTMLDivElement | null>;
scrollContainerRef: React.RefObject<HTMLDivElement | null>; scrollContainerRef: React.RefObject<HTMLDivElement | null>;
scrollShadowStore: TableScrollShadowStore; scrollShadowStore: TableScrollShadowStore;
scrollSyncKey: string;
}) => { }) => {
// Main grid overlayscrollbars - only handle X-axis if right-pinned columns exist // Main grid overlayscrollbars - only handle X-axis if right-pinned columns exist
const [initialize, osInstance] = useOverlayScrollbars({ const [initialize, osInstance] = useOverlayScrollbars({
@@ -144,6 +166,7 @@ export const useTablePaneSync = ({
osInstance, osInstance,
pinnedRightColumnCount, pinnedRightColumnCount,
scrollContainerRef, scrollContainerRef,
scrollSyncKey,
]); ]);
useEffect(() => { useEffect(() => {
@@ -235,39 +258,86 @@ export const useTablePaneSync = ({
osInstanceRightPinned, osInstanceRightPinned,
pinnedRightColumnCount, pinnedRightColumnCount,
pinnedRightColumnRef, pinnedRightColumnRef,
scrollSyncKey,
]); ]);
useEffect(() => { useEffect(() => {
const header = pinnedRowRef.current?.childNodes[0] as HTMLDivElement; let disposed = false;
const row = rowRef.current?.childNodes[0] as HTMLDivElement; let cleanup: (() => void) | undefined;
const pinnedLeft = pinnedLeftColumnRef.current?.childNodes[0] as HTMLDivElement; let setupFrameId = 0;
const pinnedRight = pinnedRightColumnRef.current?.childNodes[0] as HTMLDivElement;
if (!row) return; const resolvePaneRefs = () =>
getPaneElements({
pinnedLeftColumnRef,
pinnedRightColumnRef,
pinnedRowRef,
rowRef,
});
const isVerticalScrollHostReady = (
row: HTMLDivElement,
pinnedRight: HTMLDivElement | undefined,
) => {
const verticalScrollHost = pinnedRightColumnCount > 0 ? pinnedRight : row;
if (!verticalScrollHost) {
return false;
}
if (pinnedRightColumnCount > 0) {
return verticalScrollHost.scrollHeight > verticalScrollHost.clientHeight;
}
return verticalScrollHost.scrollHeight > 0;
};
const setupScrollSync = () => {
if (disposed) {
return;
}
cleanup?.();
const { header, pinnedLeft, pinnedRight, row } = resolvePaneRefs();
if (!row || !isVerticalScrollHostReady(row, pinnedRight)) {
setupFrameId = requestAnimationFrame(setupScrollSync);
return;
}
// Ensure all containers have the same height
const syncHeights = () => { const syncHeights = () => {
const rowHeight = row.scrollHeight; const panes = resolvePaneRefs();
const syncRow = panes.row;
const syncPinnedLeft = panes.pinnedLeft;
const syncPinnedRight = panes.pinnedRight;
if (!syncRow) {
return;
}
const rowHeight = syncRow.scrollHeight;
let targetHeight = rowHeight; let targetHeight = rowHeight;
if (pinnedLeft) { if (syncPinnedLeft) {
const pinnedLeftHeight = pinnedLeft.scrollHeight; targetHeight = Math.max(targetHeight, syncPinnedLeft.scrollHeight);
targetHeight = Math.max(targetHeight, pinnedLeftHeight);
} }
if (pinnedRight) { if (syncPinnedRight) {
const pinnedRightHeight = pinnedRight.scrollHeight; targetHeight = Math.max(targetHeight, syncPinnedRight.scrollHeight);
targetHeight = Math.max(targetHeight, pinnedRightHeight);
} }
if (pinnedLeft && pinnedLeft.style.height !== `${targetHeight}px`) { if (targetHeight <= 0) {
pinnedLeft.style.height = `${targetHeight}px`; return;
} }
if (pinnedRight && pinnedRight.style.height !== `${targetHeight}px`) {
pinnedRight.style.height = `${targetHeight}px`; if (syncPinnedLeft && syncPinnedLeft.style.height !== `${targetHeight}px`) {
syncPinnedLeft.style.height = `${targetHeight}px`;
} }
if (row.style.height !== `${targetHeight}px`) { if (syncPinnedRight && syncPinnedRight.style.height !== `${targetHeight}px`) {
row.style.height = `${targetHeight}px`; syncPinnedRight.style.height = `${targetHeight}px`;
}
if (rowHeight > 0 && syncRow.style.height !== `${targetHeight}px`) {
syncRow.style.height = `${targetHeight}px`;
} }
}; };
@@ -295,8 +365,10 @@ export const useTablePaneSync = ({
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
scrollingElements.delete(element); scrollingElements.delete(element);
const panes = resolvePaneRefs();
const hasRightPinnedColumns = pinnedRightColumnCount > 0; const hasRightPinnedColumns = pinnedRightColumnCount > 0;
const scrollElement = hasRightPinnedColumns && pinnedRight ? pinnedRight : row; const scrollElement =
hasRightPinnedColumns && panes.pinnedRight ? panes.pinnedRight : panes.row;
if (scrollElement && onScrollEndRef.current) { if (scrollElement && onScrollEndRef.current) {
onScrollEndRef.current( onScrollEndRef.current(
@@ -316,12 +388,24 @@ export const useTablePaneSync = ({
const currentElement = e.currentTarget as HTMLDivElement; const currentElement = e.currentTarget as HTMLDivElement;
markElementAsScrolling(currentElement); markElementAsScrolling(currentElement);
const panes = resolvePaneRefs();
const syncHeader = panes.header;
const syncRow = panes.row;
const syncPinnedLeft = panes.pinnedLeft;
const syncPinnedRight = panes.pinnedRight;
if (!syncRow) {
return;
}
const shouldSync = const shouldSync =
currentElement === activeElement.element || scrollingElements.has(currentElement); currentElement === activeElement.element ||
scrollingElements.has(currentElement);
if (!shouldSync) return; if (!shouldSync) return;
const scrollTop = (e.currentTarget as HTMLDivElement).scrollTop; const scrollTop = currentElement.scrollTop;
const scrollLeft = (e.currentTarget as HTMLDivElement).scrollLeft; const scrollLeft = currentElement.scrollLeft;
const isScrolling = { const isScrolling = {
header: false, header: false,
@@ -332,59 +416,59 @@ export const useTablePaneSync = ({
const hasRightPinnedColumns = pinnedRightColumnCount > 0; const hasRightPinnedColumns = pinnedRightColumnCount > 0;
if (header && e.currentTarget === header && !isScrolling.row) { if (syncHeader && currentElement === syncHeader && !isScrolling.row) {
isScrolling.row = true; isScrolling.row = true;
row.scrollTo({ behavior: 'instant', left: scrollLeft }); syncRow.scrollTo({ behavior: 'instant', left: scrollLeft });
isScrolling.row = false; isScrolling.row = false;
} }
if ( if (
e.currentTarget === row && currentElement === syncRow &&
!isScrolling.header && !isScrolling.header &&
!isScrolling.pinnedLeft && !isScrolling.pinnedLeft &&
!isScrolling.pinnedRight !isScrolling.pinnedRight
) { ) {
if (header) { if (syncHeader) {
isScrolling.header = true; isScrolling.header = true;
header.scrollTo({ behavior: 'instant', left: scrollLeft }); syncHeader.scrollTo({ behavior: 'instant', left: scrollLeft });
} }
if (hasRightPinnedColumns && pinnedRight) { if (hasRightPinnedColumns && syncPinnedRight) {
isScrolling.pinnedRight = true; isScrolling.pinnedRight = true;
pinnedRight.scrollTo({ behavior: 'instant', top: scrollTop }); syncPinnedRight.scrollTo({ behavior: 'instant', top: scrollTop });
isScrolling.pinnedRight = false; isScrolling.pinnedRight = false;
} else { } else {
if (pinnedLeft) { if (syncPinnedLeft) {
isScrolling.pinnedLeft = true; isScrolling.pinnedLeft = true;
pinnedLeft.scrollTo({ behavior: 'instant', top: scrollTop }); syncPinnedLeft.scrollTo({ behavior: 'instant', top: scrollTop });
} }
if (pinnedRight) { if (syncPinnedRight) {
isScrolling.pinnedRight = true; isScrolling.pinnedRight = true;
pinnedRight.scrollTo({ behavior: 'instant', top: scrollTop }); syncPinnedRight.scrollTo({ behavior: 'instant', top: scrollTop });
} }
} }
isScrolling.header = false; isScrolling.header = false;
isScrolling.pinnedLeft = false; isScrolling.pinnedLeft = false;
} }
if (pinnedLeft && e.currentTarget === pinnedLeft && !isScrolling.row) { if (syncPinnedLeft && currentElement === syncPinnedLeft && !isScrolling.row) {
if (hasRightPinnedColumns && pinnedRight) { if (hasRightPinnedColumns && syncPinnedRight) {
isScrolling.pinnedRight = true; isScrolling.pinnedRight = true;
pinnedRight.scrollTo({ behavior: 'instant', top: scrollTop }); syncPinnedRight.scrollTo({ behavior: 'instant', top: scrollTop });
isScrolling.pinnedRight = false; isScrolling.pinnedRight = false;
} else { } else {
isScrolling.row = true; isScrolling.row = true;
row.scrollTo({ behavior: 'instant', top: scrollTop }); syncRow.scrollTo({ behavior: 'instant', top: scrollTop });
isScrolling.row = false; isScrolling.row = false;
} }
} }
if (pinnedRight && e.currentTarget === pinnedRight && !isScrolling.row) { if (syncPinnedRight && currentElement === syncPinnedRight && !isScrolling.row) {
isScrolling.row = true; isScrolling.row = true;
row.scrollTo({ behavior: 'instant', top: scrollTop }); syncRow.scrollTo({ behavior: 'instant', top: scrollTop });
isScrolling.row = false; isScrolling.row = false;
if (pinnedLeft) { if (syncPinnedLeft) {
isScrolling.pinnedLeft = true; isScrolling.pinnedLeft = true;
pinnedLeft.scrollTo({ behavior: 'instant', top: scrollTop }); syncPinnedLeft.scrollTo({ behavior: 'instant', top: scrollTop });
isScrolling.pinnedLeft = false; isScrolling.pinnedLeft = false;
} }
} }
@@ -423,7 +507,7 @@ export const useTablePaneSync = ({
if (pinnedLeft) resizeObserver.observe(pinnedLeft); if (pinnedLeft) resizeObserver.observe(pinnedLeft);
if (pinnedRight) resizeObserver.observe(pinnedRight); if (pinnedRight) resizeObserver.observe(pinnedRight);
return () => { cleanup = () => {
clearTimeout(timeoutId); clearTimeout(timeoutId);
scrollTimeouts.forEach((timeout) => clearTimeout(timeout)); scrollTimeouts.forEach((timeout) => clearTimeout(timeout));
scrollTimeouts.clear(); scrollTimeouts.clear();
@@ -452,6 +536,17 @@ export const useTablePaneSync = ({
} }
resizeObserver.disconnect(); resizeObserver.disconnect();
}; };
};
setupFrameId = requestAnimationFrame(() => {
setupFrameId = requestAnimationFrame(setupScrollSync);
});
return () => {
disposed = true;
cancelAnimationFrame(setupFrameId);
cleanup?.();
};
}, [ }, [
handleRef, handleRef,
onScrollEndRef, onScrollEndRef,
@@ -461,6 +556,7 @@ export const useTablePaneSync = ({
pinnedRightColumnRef, pinnedRightColumnRef,
pinnedRowRef, pinnedRowRef,
rowRef, rowRef,
scrollSyncKey,
]); ]);
// Handle left and right shadow visibility based on horizontal scroll // Handle left and right shadow visibility based on horizontal scroll
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+12
View File
@@ -1557,6 +1557,17 @@ const BaseItemTableList = ({
scrollCellProps, scrollCellProps,
}); });
const scrollSyncKey = useMemo(
() =>
parsedColumns
.map(
(col) =>
`${col.id}:${col.pinned ?? 'none'}:${col.width}:${col.isEnabled !== false}`,
)
.join('|'),
[parsedColumns],
);
useTablePaneSync({ useTablePaneSync({
enableDrag, enableDrag,
enableDragScroll, enableDragScroll,
@@ -1571,6 +1582,7 @@ const BaseItemTableList = ({
rowRef, rowRef,
scrollContainerRef, scrollContainerRef,
scrollShadowStore, scrollShadowStore,
scrollSyncKey,
}); });
// Create a wrapper for getRowHeight that doesn't require cellProps (for sticky group rows hook) // Create a wrapper for getRowHeight that doesn't require cellProps (for sticky group rows hook)