vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 21:50:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

use throttle on scroll shadow instead of debounce

Browse Source
This commit is contained in:
jeffvli
2026-01-03 03:08:05 -08:00
parent ba32832619
commit f4f75f342c
1 changed files with 13 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+13 -28
View File
@@ -2,6 +2,7 @@
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
import clsx from 'clsx'; import clsx from 'clsx';
import throttle from 'lodash/throttle';
import { AnimatePresence, motion } from 'motion/react'; import { AnimatePresence, motion } from 'motion/react';
import { useOverlayScrollbars } from 'overlayscrollbars-react'; import { useOverlayScrollbars } from 'overlayscrollbars-react';
import React, { import React, {
@@ -1654,28 +1655,20 @@ const BaseItemTableList = ({
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
} }
let debounceTimeout: NodeJS.Timeout | null = null; const checkScrollPosition = throttle(() => {
const checkScrollPosition = () => { const scrollLeft = row.scrollLeft;
if (debounceTimeout) { const maxScrollLeft = row.scrollWidth - row.clientWidth;
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(() => {
const scrollLeft = row.scrollLeft;
const maxScrollLeft = row.scrollWidth - row.clientWidth;
setShowLeftShadow(pinnedLeftColumnCount > 0 && scrollLeft > 0); setShowLeftShadow(pinnedLeftColumnCount > 0 && scrollLeft > 0);
setShowRightShadow(pinnedRightColumnCount > 0 && scrollLeft < maxScrollLeft); setShowRightShadow(pinnedRightColumnCount > 0 && scrollLeft < maxScrollLeft);
}, 50); // 50ms debounce for shadow visibility }, 50);
};
checkScrollPosition(); checkScrollPosition();
row.addEventListener('scroll', checkScrollPosition, { passive: true }); row.addEventListener('scroll', checkScrollPosition, { passive: true });
return () => { return () => {
if (debounceTimeout) { checkScrollPosition.cancel();
clearTimeout(debounceTimeout);
}
row.removeEventListener('scroll', checkScrollPosition); row.removeEventListener('scroll', checkScrollPosition);
}; };
}, [pinnedLeftColumnCount, pinnedRightColumnCount]); }, [pinnedLeftColumnCount, pinnedRightColumnCount]);
@@ -1696,25 +1689,17 @@ const BaseItemTableList = ({
// When right-pinned columns exist, use right pinned column's scroll position // When right-pinned columns exist, use right pinned column's scroll position
const scrollElement = pinnedRightColumnCount > 0 && pinnedRight ? pinnedRight : row; const scrollElement = pinnedRightColumnCount > 0 && pinnedRight ? pinnedRight : row;
let debounceTimeout: NodeJS.Timeout | null = null; const checkScrollPosition = throttle(() => {
const checkScrollPosition = () => { const currentScrollTop = scrollElement.scrollTop;
if (debounceTimeout) { setShowTopShadow(currentScrollTop > 0);
clearTimeout(debounceTimeout); }, 50);
}
debounceTimeout = setTimeout(() => {
const currentScrollTop = scrollElement.scrollTop;
setShowTopShadow(currentScrollTop > 0);
}, 50);
};
checkScrollPosition(); checkScrollPosition();
scrollElement.addEventListener('scroll', checkScrollPosition, { passive: true }); scrollElement.addEventListener('scroll', checkScrollPosition, { passive: true });
return () => { return () => {
if (debounceTimeout) { checkScrollPosition.cancel();
clearTimeout(debounceTimeout);
}
scrollElement.removeEventListener('scroll', checkScrollPosition); scrollElement.removeEventListener('scroll', checkScrollPosition);
}; };
}, [enableHeader, pinnedRightColumnCount]); }, [enableHeader, pinnedRightColumnCount]);