@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/hooks/useViewportFill.js

@@ -0,0 +1,80 @@
+'use client';
+import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
+  const [maxHeight, setMaxHeight] = useState(min);
+  const raf = useRef(null);
+  const measure = useCallback(() => {
+    if (typeof window === "undefined" || !ref.current) return;
+    const el = ref.current;
+    const rect = el.getBoundingClientRect();
+    let top = rect.top;
+    if (includeMarginTop) {
+      const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
+      top -= marginTop;
+    }
+    const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+    setMaxHeight((prev) => prev === next ? prev : next);
+  }, [ref, bottomOffset, min, includeMarginTop]);
+  const scheduleMeasure = useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (raf.current != null) {
+      cancelAnimationFrame(raf.current);
+    }
+    raf.current = window.requestAnimationFrame(() => {
+      raf.current = null;
+      measure();
+    });
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+  }, [measure]);
+  useEffect(() => {
+    var _a;
+    if (typeof window === "undefined" || !ref.current) return;
+    const target = ref.current;
+    const extra = (_a = watchRef == null ? void 0 : watchRef.current) != null ? _a : null;
+    const parent = target.parentElement;
+    const onResize = () => scheduleMeasure();
+    const onTransitionOrAnimationEnd = () => scheduleMeasure();
+    window.addEventListener("resize", onResize);
+    document.addEventListener("transitionend", onTransitionOrAnimationEnd, true);
+    document.addEventListener("animationend", onTransitionOrAnimationEnd, true);
+    let resizeObserver = null;
+    if ("ResizeObserver" in window) {
+      resizeObserver = new ResizeObserver(() => scheduleMeasure());
+      resizeObserver.observe(target);
+      if (parent && parent !== target) {
+        resizeObserver.observe(parent);
+      }
+      if (extra && extra !== target && extra !== parent) {
+        resizeObserver.observe(extra);
+      }
+    }
+    return () => {
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("transitionend", onTransitionOrAnimationEnd, true);
+      document.removeEventListener("animationend", onTransitionOrAnimationEnd, true);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (raf.current != null) {
+        cancelAnimationFrame(raf.current);
+        raf.current = null;
+      }
+    };
+  }, [ref, watchRef, scheduleMeasure]);
+  const style = useMemo(
+    () => ({
+      maxHeight,
+      overflow: "auto"
+    }),
+    [maxHeight]
+  );
+  return {
+    maxHeight,
+    style,
+    recompute: measure
+  };
+}
+
+export { useViewportFill };