alinea/dist/ui/hook/UseAutoHide.js

Headless git-based CMS

import "../../chunks/chunk-NZLE2WMY.js";

// src/ui/hook/UseAutoHide.ts
import { useEffect, useRef } from "react";
var useAutoHide = (options) => {
  const ref = useRef(null);
  const height = useRef(0);
  const lastScroll = useRef(0);
  const offset = useRef(0);
  useEffect(() => {
    const dom = ref.current;
    const { style } = dom;
    const scroll = () => {
      const y = options?.scrollRef?.current ? options?.scrollRef?.current.scrollTop : window.pageYOffset;
      const diff = lastScroll.current - y;
      const last = offset.current;
      offset.current += diff;
      if (offset.current < -height.current) offset.current = -height.current;
      if (y <= 0 || offset.current > 0) offset.current = 0;
      if (last !== offset.current)
        style.transform = `translateY(${offset.current}px)`;
      lastScroll.current = y;
      if (y <= height.current) dom.classList.add("is-top");
      else dom.classList.remove("is-top");
    };
    const trackHeight = () => {
      height.current = dom.offsetHeight + (options?.addToHeight || 0);
    };
    trackHeight();
    scroll();
    const target = options?.scrollRef?.current || window;
    target.addEventListener("scroll", scroll);
    window.addEventListener("resize", trackHeight);
    return () => {
      target.removeEventListener("scroll", scroll);
      window.removeEventListener("resize", trackHeight);
    };
  }, [options?.scrollRef, options?.addToHeight]);
  return { ref };
};
export {
  useAutoHide
};