@dnb/eufemia/components/height-animation/useHeightAnimation.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useMemo, useRef, useState } from 'react';
import HeightAnimationInstance from "./HeightAnimationInstance.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "../../shared/helpers/useIsomorphicLayoutEffect.js";
export function useHeightAnimation(targetRef, {
  open = true,
  animate = true,
  children = null,
  compensateForGap,
  onInit = null,
  onOpen = null,
  onAnimationStart = null,
  onAnimationEnd = null
} = {}) {
  var _instRef$current2;
  const instRef = useRef(null);
  const isInitialRenderRef = useRef(typeof globalThis !== 'undefined' ? globalThis.readjustTime !== -1 : true);
  const [isOpen, setIsOpen] = useState(open);
  const [isVisible, setIsVisible] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  const [isVisibleParallax, setParallax] = useState(open);
  const eventsRef = useRef({
    onInit,
    onAnimationEnd,
    onAnimationStart,
    onOpen
  });
  eventsRef.current.onInit = onInit;
  eventsRef.current.onAnimationEnd = onAnimationEnd;
  eventsRef.current.onAnimationStart = onAnimationStart;
  eventsRef.current.onOpen = onOpen;
  useLayoutEffect(() => {
    var _eventsRef$current$on, _eventsRef$current;
    instRef.current = new HeightAnimationInstance();
    (_eventsRef$current$on = (_eventsRef$current = eventsRef.current).onInit) === null || _eventsRef$current$on === void 0 || _eventsRef$current$on.call(_eventsRef$current, instRef.current);
    return () => {
      var _instRef$current;
      (_instRef$current = instRef.current) === null || _instRef$current === void 0 || _instRef$current.remove();
      instRef.current = null;
    };
  }, []);
  useLayoutEffect(() => {
    instRef.current.setOptions({
      animate
    });
    if (typeof global !== 'undefined' && globalThis.IS_TEST) {
      instRef.current.setOptions({
        animate: false
      });
    }
  }, [animate]);
  const handleCompensateForGap = useCallback(() => {
    if (compensateForGap) {
      let gap = compensateForGap;
      const {
        elem
      } = instRef.current;
      if (compensateForGap === 'auto') {
        gap = window.getComputedStyle(elem.parentElement).getPropertyValue('row-gap');
      }
      elem.style.marginTop = `calc(${gap} * -1)`;
      const inner = elem.querySelector('.compensateForGap');
      inner.style.marginTop = gap;
    }
  }, [compensateForGap]);
  useLayoutEffect(() => {
    instRef.current.onStart(state => {
      switch (state) {
        case 'opening':
          handleCompensateForGap();
          setIsVisible(true);
          setParallax(true);
          setIsAnimating(true);
          break;
        case 'closing':
          setParallax(false);
          setIsAnimating(true);
          break;
        case 'adjusting':
          setIsAnimating(true);
          break;
      }
      if (!isInitialRenderRef.current) {
        var _eventsRef$current$on2, _eventsRef$current2;
        (_eventsRef$current$on2 = (_eventsRef$current2 = eventsRef.current).onAnimationStart) === null || _eventsRef$current$on2 === void 0 || _eventsRef$current$on2.call(_eventsRef$current2, state);
      }
    });
    instRef.current.onEnd(state => {
      var _eventsRef$current$on3, _eventsRef$current3, _eventsRef$current$on4, _eventsRef$current4;
      switch (state) {
        case 'opened':
          setIsVisible(true);
          setIsOpen(true);
          setIsAnimating(false);
          (_eventsRef$current$on3 = (_eventsRef$current3 = eventsRef.current).onOpen) === null || _eventsRef$current$on3 === void 0 || _eventsRef$current$on3.call(_eventsRef$current3, true);
          break;
        case 'closed':
          setIsVisible(false);
          setIsOpen(false);
          setParallax(false);
          setIsAnimating(false);
          (_eventsRef$current$on4 = (_eventsRef$current4 = eventsRef.current).onOpen) === null || _eventsRef$current$on4 === void 0 || _eventsRef$current$on4.call(_eventsRef$current4, false);
          break;
        case 'adjusted':
          setIsAnimating(false);
          break;
      }
      if (!isInitialRenderRef.current) {
        var _eventsRef$current$on5, _eventsRef$current5;
        (_eventsRef$current$on5 = (_eventsRef$current5 = eventsRef.current).onAnimationEnd) === null || _eventsRef$current$on5 === void 0 || _eventsRef$current$on5.call(_eventsRef$current5, state);
      }
    });
  }, [compensateForGap, handleCompensateForGap]);
  useOpenClose({
    open,
    instRef,
    isInitialRenderRef,
    targetRef
  });
  useAdjust({
    children,
    instRef,
    isInitialRenderRef,
    targetRef
  });
  const firstPaintStyle = open && !isVisible && !isAnimating && ((_instRef$current2 = instRef.current) === null || _instRef$current2 === void 0 ? void 0 : _instRef$current2.firstPaintStyle) || {};
  const isInDOM = open || isVisible;
  return {
    open,
    isOpen,
    isInDOM,
    isVisible,
    isVisibleParallax,
    isAnimating,
    firstPaintStyle
  };
}
function useOpenClose({
  open,
  instRef,
  isInitialRenderRef,
  targetRef
}) {
  const isTest = typeof process !== 'undefined' && process.env.NODE_ENV === 'test' && typeof globalThis.IS_TEST === 'undefined';
  useLayoutEffect(() => {
    instRef.current.setElement(targetRef.current);
    if (!targetRef.current || instRef.current.state === 'init' && isInitialRenderRef.current) {
      if (open) {
        instRef.current.setAsOpen();
      } else {
        instRef.current.setAsClosed();
      }
    } else {
      if (open) {
        instRef.current.open();
      } else {
        instRef.current.close();
      }
    }
    if (isTest) {
      var _targetRef$current;
      const event = new CustomEvent('transitionend');
      (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 || _targetRef$current.dispatchEvent(event);
    }
  }, [open, targetRef, instRef, isInitialRenderRef, isTest]);
  useLayoutEffect(() => {
    const run = () => {
      isInitialRenderRef.current = false;
    };
    if (globalThis.bypassTime === -1 || isTest) {
      run();
    } else {
      var _window$requestAnimat, _window;
      (_window$requestAnimat = (_window = window).requestAnimationFrame) === null || _window$requestAnimat === void 0 || _window$requestAnimat.call(_window, run);
    }
  }, [isInitialRenderRef, isTest]);
}
function useAdjust({
  children,
  instRef,
  isInitialRenderRef,
  targetRef
}) {
  const fromHeight = useRef(0);
  const [timer] = useState(() => Date.now());
  const shouldAdjust = () => {
    var _instRef$current3;
    switch ((_instRef$current3 = instRef.current) === null || _instRef$current3 === void 0 ? void 0 : _instRef$current3.state) {
      case 'opened':
      case 'adjusted':
      case 'adjusting':
        return !isInitialRenderRef.current && Date.now() - timer > (globalThis.readjustTime || 100);
    }
    return false;
  };
  useMemo(() => {
    if (shouldAdjust()) {
      var _instRef$current4;
      fromHeight.current = (_instRef$current4 = instRef.current) === null || _instRef$current4 === void 0 ? void 0 : _instRef$current4.getHeight();
    }
  }, [children]);
  useLayoutEffect(() => {
    if (shouldAdjust()) {
      instRef.current.setElement(targetRef.current);
      instRef.current.elem.style.height = '';
      const toHeight = instRef.current.getHeight();
      instRef.current.adjustTo(fromHeight.current, toHeight);
    }
  }, [children]);
}
//# sourceMappingURL=useHeightAnimation.js.map