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

Adjust scrollarea to add styles and omit header

Browse source
This commit is contained in:
jeffvli 2023-02-05 18:02:27 -08:00
parent 18c18ea322
commit 6ef88e56ec
1 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -54,8 +54,11 @@ export const ScrollArea = forwardRef(({ children, ...props }: ScrollAreaProps, r
interface NativeScrollAreaProps { interface NativeScrollAreaProps {
children: React.ReactNode; children: React.ReactNode;
debugScrollPosition?: boolean; debugScrollPosition?: boolean;
noHeader?: boolean;
pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any }; pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any };
scrollBarOffset?: string; scrollBarOffset?: string;
scrollHideDelay?: number;
style: React.CSSProperties;
} }
export const NativeScrollArea = forwardRef( export const NativeScrollArea = forwardRef(
@ -65,13 +68,18 @@ export const NativeScrollArea = forwardRef(
pageHeaderProps, pageHeaderProps,
debugScrollPosition, debugScrollPosition,
scrollBarOffset, scrollBarOffset,
scrollHideDelay,
noHeader,
...props ...props
}: NativeScrollAreaProps, }: NativeScrollAreaProps,
ref: Ref<HTMLDivElement>, ref: Ref<HTMLDivElement>,
) => { ) => {
const [hideScrollbar, setHideScrollbar] = useState(false); const [hideScrollbar, setHideScrollbar] = useState(false);
const [hideHeader, setHideHeader] = useState(true); const [hideHeader, setHideHeader] = useState(true);
const { start, clear } = useTimeout(() => setHideScrollbar(true), 1000); const { start, clear } = useTimeout(
() => setHideScrollbar(true),
scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 1000,
);
const containerRef = useRef(null); const containerRef = useRef(null);
const mergedRef = useMergedRef(ref, containerRef); const mergedRef = useMergedRef(ref, containerRef);
@ -110,12 +118,14 @@ export const NativeScrollArea = forwardRef(
return ( return (
<> <>
<PageHeader {!noHeader && (
isHidden={hideHeader} <PageHeader
position="absolute" isHidden={hideHeader}
style={{ opacity: scrollYProgress as any }} position="absolute"
{...pageHeaderProps} style={{ opacity: scrollYProgress as any }}
/> {...pageHeaderProps}
/>
)}
<StyledNativeScrollArea <StyledNativeScrollArea
ref={mergedRef} ref={mergedRef}
className={hideScrollbar ? 'hide-scrollbar' : undefined} className={hideScrollbar ? 'hide-scrollbar' : undefined}