vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

optimize library header bar render

Browse Source
This commit is contained in:
jeffvli
2025-11-19 19:24:03 -08:00
parent c6a3b6381c
commit 591972a20b
2 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/native-scroll-area/native-scroll-area.tsx
+22 -14
View File
@@ -32,30 +32,38 @@ export const NativeScrollArea = forwardRef(
current: pageHeaderProps?.target?.current, current: pageHeaderProps?.target?.current,
}); });
const scrollHandlerRef = useRef<number | null>(null);
const [initialize] = useOverlayScrollbars({ const [initialize] = useOverlayScrollbars({
defer: false, defer: false,
events: { events: {
scroll: (_instance, e) => { scroll: (_instance, e) => {
if (noHeader) { if (scrollHandlerRef.current) {
return setIsPastOffset(true); cancelAnimationFrame(scrollHandlerRef.current);
} }
if (pageHeaderProps?.target || !pageHeaderProps?.offset) { scrollHandlerRef.current = requestAnimationFrame(() => {
return setIsPastOffset(true); if (noHeader) {
} return setIsPastOffset(true);
}
const offset = pageHeaderProps?.offset; if (pageHeaderProps?.target || !pageHeaderProps?.offset) {
const scrollTop = (e?.target as HTMLDivElement)?.scrollTop; return setIsPastOffset(true);
}
if (scrollTop > offset && isPastOffset === false) { const offset = pageHeaderProps?.offset;
return setIsPastOffset(true); const scrollTop = (e?.target as HTMLDivElement)?.scrollTop;
}
if (scrollTop <= offset && isPastOffset === true) { if (scrollTop > offset && isPastOffset === false) {
return setIsPastOffset(false); return setIsPastOffset(true);
} }
return null; if (scrollTop <= offset && isPastOffset === true) {
return setIsPastOffset(false);
}
return null;
});
}, },
}, },
options: { options: {
src/renderer/features/shared/components/library-header-bar.tsx
+7 -5
View File
@@ -1,5 +1,5 @@
import { closeAllModals, openModal } from '@mantine/modals'; import { closeAllModals, openModal } from '@mantine/modals';
import { ReactNode, useCallback } from 'react'; import { memo, ReactNode, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import styles from './library-header-bar.module.css'; import styles from './library-header-bar.module.css';
@@ -18,7 +18,7 @@ interface LibraryHeaderBarProps {
children: ReactNode; children: ReactNode;
} }
export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => { const LibraryHeaderBarComponent = ({ children }: LibraryHeaderBarProps) => {
return <div className={styles.headerContainer}>{children}</div>; return <div className={styles.headerContainer}>{children}</div>;
}; };
@@ -94,6 +94,8 @@ const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => {
return <Badge {...props}>{isLoading ? <Spinner /> : children}</Badge>; return <Badge {...props}>{isLoading ? <Spinner /> : children}</Badge>;
}; };
LibraryHeaderBar.Title = Title; export const LibraryHeaderBar = Object.assign(memo(LibraryHeaderBarComponent), {
LibraryHeaderBar.PlayButton = HeaderPlayButton; Badge: HeaderBadge,
LibraryHeaderBar.Badge = HeaderBadge; PlayButton: HeaderPlayButton,
Title,
});