watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 06:37:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

More refactoring and clean-up.

Browse source
This commit is contained in:
Mike Cao 2023-02-10 03:26:57 -08:00
parent f062cdbed2
commit c815e7cd51
16 changed files with 101 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

33
components/helpers/StickyHeader.js
View file

@ -1,23 +1,32 @@
import { useEffect, useRef } from 'react';
import { useMeasure, useCombinedRefs } from 'react-basics';
import classNames from 'classnames';
import useSticky from 'hooks/useSticky';
import { UI_LAYOUT_BODY } from 'lib/constants';
export default function StickyHeader({ className, stickyClassName, stickyStyle, children }) {
const { ref, isSticky } = useSticky();
const initialWidth = useRef(0);
useEffect(() => {
initialWidth.current = ref.current.clientWidth;
}, [ref]);
export default function StickyHeader({
className,
stickyClassName,
stickyStyle,
enabled = true,
children,
}) {
const { ref: scrollRef, isSticky } = useSticky({ scrollElementId: UI_LAYOUT_BODY });
const { ref: measureRef, dimensions } = useMeasure();
return (
<div
ref={ref}
data-sticky={isSticky}
className={classNames(className, { [stickyClassName]: isSticky })}
style={isSticky ? { ...stickyStyle, width: initialWidth.current } : null}
ref={measureRef}
data-sticky={enabled && isSticky}
style={enabled && isSticky ? { height: dimensions.height } : null}
>
{children}
<div
ref={scrollRef}
className={classNames(className, { [stickyClassName]: enabled && isSticky })}
style={enabled && isSticky ? { ...stickyStyle, width: dimensions.width } : null}
>
{children}
</div>
</div>
);
}