@dnb/eufemia/extensions/forms/Wizard/Container/useStepAnimation.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useEffect, useRef } from 'react';
import { useIsomorphicLayoutEffect as useLayoutEffect } from "../../../../shared/helpers/useIsomorphicLayoutEffect.js";
export default function useStepAnimation({
  activeIndexRef,
  stepElementRef,
  executeLayoutAnimationRef
}) {
  const activeIndex = activeIndexRef.current;
  const indexRef = useRef(activeIndex);
  useEffect(() => {
    indexRef.current = activeIndex;
  }, [activeIndex]);
  const executeLayoutAnimation = useCallback(() => {
    window.requestAnimationFrame(() => {
      try {
        const elements = stepElementRef.current.querySelectorAll('.dnb-forms-step > *, .dnb-forms-button-row > *');
        elements.forEach((element, i) => {
          element.style.setProperty('--element-index', String(i + 1));
          element.classList.add('appear-fx');
        });
      } catch (error) {}
    });
  }, [stepElementRef]);
  executeLayoutAnimationRef.current = executeLayoutAnimation;
  useLayoutEffect(() => {
    if (activeIndex === indexRef.current) {
      return;
    }
    executeLayoutAnimation();
  }, [activeIndex, executeLayoutAnimation]);
}
//# sourceMappingURL=useStepAnimation.js.map