Adjust scrollarea to add styles and omit header
This commit is contained in:
parent
18c18ea322
commit
6ef88e56ec
1 changed files with 17 additions and 7 deletions
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
{!noHeader && (
|
||||||
<PageHeader
|
<PageHeader
|
||||||
isHidden={hideHeader}
|
isHidden={hideHeader}
|
||||||
position="absolute"
|
position="absolute"
|
||||||
style={{ opacity: scrollYProgress as any }}
|
style={{ opacity: scrollYProgress as any }}
|
||||||
{...pageHeaderProps}
|
{...pageHeaderProps}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
<StyledNativeScrollArea
|
<StyledNativeScrollArea
|
||||||
ref={mergedRef}
|
ref={mergedRef}
|
||||||
className={hideScrollbar ? 'hide-scrollbar' : undefined}
|
className={hideScrollbar ? 'hide-scrollbar' : undefined}
|
||||||
|
|
Reference in a new issue