mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-21 18:06:30 +02:00
remove top/bottom table scroll shadow
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user