watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 22:57:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

More deletes. Fixed sticky header.

Browse source
This commit is contained in:
Mike Cao 2023-02-08 23:14:11 -08:00
parent 87bbaa7f1d
commit 45c13da262
23 changed files with 69 additions and 582 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/helpers/StickyHeader.js
View file

@ -1,46 +1,15 @@
import { useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import useSticky from 'hooks/useSticky';
export default function StickyHeader({
className,
stickyClassName,
stickyStyle,
children,
enabled = true,
}) {
const [sticky, setSticky] = useState(false);
const ref = useRef();
const top = useRef(0);
useEffect(() => {
const checkPosition = () => {
if (ref.current) {
if (!top.current) {
top.current = ref.current.offsetTop + ref.current.offsetHeight;
}
const state = window.pageYOffset > top.current;
if (sticky !== state) {
setSticky(state);
}
}
};
if (enabled) {
checkPosition();
window.addEventListener('scroll', checkPosition);
}
return () => {
window.removeEventListener('scroll', checkPosition);
};
}, [sticky, enabled]);
export default function StickyHeader({ className, stickyClassName, stickyStyle, children }) {
const { ref, isSticky } = useSticky();
return (
<div
ref={ref}
data-sticky={sticky}
className={classNames(className, { [stickyClassName]: sticky })}
style={sticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
data-sticky={isSticky}
className={classNames(className, { [stickyClassName]: isSticky })}
style={isSticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
>
{children}
</div>