@dnb/eufemia/components/table/table-accordion/useTableAnimationHandler.js

DNB Eufemia Design System UI Library

import React, { useCallback } from 'react';
import { getClosestScrollViewElement } from "../../../shared/component-helper.js";
import { useHeightAnimation } from "../../height-animation/useHeightAnimation.js";
import { TableAccordionContext } from "./TableAccordionContext.js";
export function useTableAnimationHandler({
  innerRef,
  trRef,
  expanded,
  noAnimation
}) {
  const tableAccordionContext = React.useContext(TableAccordionContext);
  const [ariaLive, setAriaLive] = React.useState(null);
  const open = Boolean(expanded || (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen));
  const scrollViewHandler = useCallback(clip => {
    const scrollView = getClosestScrollViewElement(trRef.current);
    if (scrollView instanceof HTMLElement) {
      scrollView.style.overflowY = clip ? 'clip' : '';
    }
  }, [trRef]);
  const onOpen = useCallback(state => {
    setAriaLive(state ? true : null);
  }, []);
  const onAnimationStart = useCallback(() => {
    scrollViewHandler(true);
  }, [scrollViewHandler]);
  const onAnimationEnd = useCallback(state => {
    var _tableAccordionContex, _tableAccordionContex2;
    const event = {
      target: trRef.current
    };
    switch (state) {
      case 'opened':
        (_tableAccordionContex = tableAccordionContext.onOpened) === null || _tableAccordionContex === void 0 || _tableAccordionContex.call(tableAccordionContext, event);
        break;
      case 'closed':
        (_tableAccordionContex2 = tableAccordionContext.onClosed) === null || _tableAccordionContex2 === void 0 || _tableAccordionContex2.call(tableAccordionContext, event);
        break;
    }
    scrollViewHandler(false);
  }, [scrollViewHandler, tableAccordionContext, trRef]);
  const {
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  } = useHeightAnimation(innerRef, {
    open,
    animate: Boolean(!noAnimation && !(tableAccordionContext !== null && tableAccordionContext !== void 0 && tableAccordionContext.noAnimation)),
    onOpen,
    onAnimationStart,
    onAnimationEnd
  });
  return {
    ariaLive,
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  };
}
export default useTableAnimationHandler;
//# sourceMappingURL=useTableAnimationHandler.js.map