pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix noHeader implementation for scrollArea

Browse source
This commit is contained in:
jeffvli 2023-07-21 18:00:13 -07:00
parent f274801be6
commit 20524452ae
1 changed files with 16 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/renderer/components/scroll-area/index.tsx
View file

@ -49,7 +49,7 @@ interface NativeScrollAreaProps {
children: React.ReactNode; children: React.ReactNode;
debugScrollPosition?: boolean; debugScrollPosition?: boolean;
noHeader?: boolean; noHeader?: boolean;
pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any }; pageHeaderProps?: PageHeaderProps & { offset: number; target?: any };
scrollBarOffset?: string; scrollBarOffset?: string;
scrollHideDelay?: number; scrollHideDelay?: number;
style?: React.CSSProperties; style?: React.CSSProperties;
@ -72,36 +72,34 @@ export const NativeScrollArea = forwardRef(
const containerRef = useRef(null); const containerRef = useRef(null);
const [isPastOffset, setIsPastOffset] = useState(false); const [isPastOffset, setIsPastOffset] = useState(false);
// useInView initializes as false, so we need to track this to properly render the header
const isInViewInitializedRef = useRef<boolean | null>(null);
const isInView = useInView({ const isInView = useInView({
current: pageHeaderProps?.target?.current, current: pageHeaderProps?.target?.current,
}); });
useEffect(() => {
if (!isInViewInitializedRef.current && isInView) {
isInViewInitializedRef.current = true;
}
}, [isInView]);
const [initialize] = useOverlayScrollbars({ const [initialize] = useOverlayScrollbars({
defer: true, defer: false,
events: { events: {
scroll: (_instance, e) => { scroll: (_instance, e) => {
if (!pageHeaderProps?.offset) { if (noHeader) {
return; return setIsPastOffset(true);
}
if (pageHeaderProps?.target || !pageHeaderProps?.offset) {
return setIsPastOffset(true);
} }
const offset = pageHeaderProps?.offset; const offset = pageHeaderProps?.offset;
const scrollTop = (e?.target as HTMLDivElement)?.scrollTop; const scrollTop = (e?.target as HTMLDivElement)?.scrollTop;
if (scrollTop > offset && isPastOffset === false) { if (scrollTop > offset && isPastOffset === false) {
setIsPastOffset(true); return setIsPastOffset(true);
} else if (scrollTop <= offset && isPastOffset === true) {
setIsPastOffset(false);
} }
if (scrollTop <= offset && isPastOffset === true) {
return setIsPastOffset(false);
}
return null;
}, },
}, },
options: { options: {
@ -122,12 +120,9 @@ export const NativeScrollArea = forwardRef(
} }
}, [initialize]); }, [initialize]);
// console.log('isPastOffsetRef.current', isPastOffsetRef.current);
const mergedRef = useMergedRef(ref, containerRef); const mergedRef = useMergedRef(ref, containerRef);
const shouldShowHeader = const shouldShowHeader = !noHeader && isPastOffset && !isInView;
!noHeader && (isPastOffset || (isInViewInitializedRef.current && !isInView));
return ( return (
<> <>