remove top/bottom table scroll shadow

This commit is contained in:
jeffvli
2026-07-14 15:58:57 -07:00
parent 76b7ac8cec
commit a4306c98be
2 changed files with 0 additions and 67 deletions
@@ -30,7 +30,6 @@ const getPaneElements = ({
export const useTablePaneSync = ({
enableDrag,
enableDragScroll,
enableHeader,
handleRef,
onScrollEndRef,
pinnedLeftColumnCount,
@@ -45,7 +44,6 @@ export const useTablePaneSync = ({
}: {
enableDrag: boolean | undefined;
enableDragScroll: boolean | undefined;
enableHeader: boolean;
handleRef: React.RefObject<null | { internalState: ItemListStateActions }>;
onScrollEndRef: React.RefObject<
((offset: number, internalState: ItemListStateActions) => void) | undefined
@@ -634,34 +632,4 @@ export const useTablePaneSync = ({
row.removeEventListener('scroll', checkScrollPosition);
};
}, [pinnedLeftColumnCount, pinnedRightColumnCount, rowRef, scrollShadowStore]);
// Handle top shadow visibility based on vertical scroll
useEffect(() => {
const row = rowRef.current?.childNodes[0] as HTMLDivElement;
const pinnedRight = pinnedRightColumnRef.current?.childNodes[0] as HTMLDivElement;
if (!row || !enableHeader) {
const timeout = setTimeout(() => {
scrollShadowStore.setSnapshot({ showTopShadow: false });
}, 0);
return () => clearTimeout(timeout);
}
const scrollElement = pinnedRightColumnCount > 0 && pinnedRight ? pinnedRight : row;
const checkScrollPosition = throttle(() => {
const currentScrollTop = scrollElement.scrollTop;
scrollShadowStore.setSnapshot({ showTopShadow: currentScrollTop > 0 });
}, 50);
checkScrollPosition();
scrollElement.addEventListener('scroll', checkScrollPosition, { passive: true });
return () => {
checkScrollPosition.cancel();
scrollElement.removeEventListener('scroll', checkScrollPosition);
};
}, [enableHeader, pinnedRightColumnCount, pinnedRightColumnRef, rowRef, scrollShadowStore]);
};
@@ -126,25 +126,6 @@ export enum TableItemSize {
LARGE = 88,
}
const ItemTableScrollShadowTop = memo(function ItemTableScrollShadowTop({
enableHeader,
enableScrollShadow,
scrollShadowStore,
}: {
enableHeader: boolean;
enableScrollShadow: boolean;
scrollShadowStore: TableScrollShadowStore;
}) {
const { showTopShadow } = useSyncExternalStore(
scrollShadowStore.subscribe,
scrollShadowStore.getSnapshot,
);
if (!enableHeader || !enableScrollShadow || !showTopShadow) return null;
return <div className={styles.itemTableTopScrollShadow} />;
});
ItemTableScrollShadowTop.displayName = 'ItemTableScrollShadowTop';
const ItemTableScrollShadowLeft = memo(function ItemTableScrollShadowLeft({
enableScrollShadow,
pinnedLeftColumnCount,
@@ -585,11 +566,6 @@ const VirtualizedTableGrid = ({
/>
</div>
)}
<ItemTableScrollShadowTop
enableHeader={!!enableHeader}
enableScrollShadow={enableScrollShadow}
scrollShadowStore={scrollShadowStore}
/>
{!!pinnedLeftColumnCount && (
<div
className={styles.itemTablePinnedColumnsContainer}
@@ -644,11 +620,6 @@ const VirtualizedTableGrid = ({
/>
</div>
)}
<ItemTableScrollShadowTop
enableHeader={!!enableHeader}
enableScrollShadow={enableScrollShadow}
scrollShadowStore={scrollShadowStore}
/>
<div className={styles.itemTableGridContainer} ref={mergedRowRef}>
<Grid
cellComponent={RowCell}
@@ -707,11 +678,6 @@ const VirtualizedTableGrid = ({
/>
</div>
)}
<ItemTableScrollShadowTop
enableHeader={!!enableHeader}
enableScrollShadow={enableScrollShadow}
scrollShadowStore={scrollShadowStore}
/>
<div
className={styles.itemTablePinnedRightColumnsContainer}
ref={pinnedRightColumnRef}
@@ -1627,7 +1593,6 @@ const BaseItemTableList = ({
useTablePaneSync({
enableDrag,
enableDragScroll,
enableHeader,
handleRef,
onScrollEndRef,
pinnedLeftColumnCount,