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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
var _Td;
import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import _unshiftInstanceProperty from "core-js-pure/stable/instance/unshift.js";
import React, { useCallback, useEffect } from 'react';
import Td from "../TableTd.js";
import { TableContext } from "../TableContext.js";
import { TableClickableButtonTd, TableClickableHead, TableIconSrTh, isTableHead, onClickTr } from "../TableClickableHead.js";
import { TableAccordionContext } from "./TableAccordionContext.js";
import { TableAccordionContentSingle, TableAccordionContentRow } from "./TableAccordionContent.js";
export function TableAccordionHead(allProps) {
  var _React$useContext;
  const {
    children,
    expanded,
    noAnimation,
    keepInDOM,
    onClick,
    onOpened,
    onClosed,
    count,
    ...props
  } = allProps;
  const tableContext = React.useContext(TableContext);
  const [trIsOpen, setOpen] = React.useState(() => {
    if (typeof expanded === 'boolean') {
      return expanded;
    } else if (typeof location !== 'undefined') {
      const id = props === null || props === void 0 ? void 0 : props.id;
      if (id && '#' + id === location.hash) {
        return true;
      }
    }
    return false;
  });
  const [trIsHover, setHover] = React.useState(false);
  const [trHadClick, setHadClick] = React.useState(false);
  let headerContent = React.Children.toArray(children);
  const addContent = useCallback(content => {
    if (tableContext.allProps.accordionChevronPlacement === 'end') {
      _pushInstanceProperty(headerContent).call(headerContent, content);
    } else {
      _unshiftInstanceProperty(headerContent).call(headerContent, content);
    }
  }, [headerContent, tableContext.allProps.accordionChevronPlacement]);
  const onMouseLeaveHandler = useCallback(() => {
    setHover(false);
    setHadClick(false);
  }, []);
  const toggleOpenFn = useCallback(event => {
    const doc = document;
    if (typeof doc !== 'undefined' && typeof doc.startViewTransition !== 'undefined') {
      if (tableContext.hasAccordionRows && !trIsOpen) {
        var _doc$startViewTransit;
        (_doc$startViewTransit = doc.startViewTransition) === null || _doc$startViewTransit === void 0 || _doc$startViewTransit.call(doc, () => {
          setOpen(true);
        });
      } else {
        setOpen(!trIsOpen);
      }
    } else {
      setOpen(!trIsOpen);
    }
    setHadClick(true);
    onClick === null || onClick === void 0 || onClick(event);
  }, [onClick, tableContext.hasAccordionRows, trIsOpen]);
  const toggleOpenTr = useCallback((event, allowInteractiveElement) => {
    onClickTr(event, allowInteractiveElement, toggleOpenFn);
  }, [toggleOpenFn]);
  const onMouseEnterHandler = useCallback(() => {
    setHover(true);
  }, []);
  const onKeyDownHandler = useCallback(event => {
    toggleOpenTr(event, true);
  }, [toggleOpenTr]);
  const accordionContent = headerContent.filter(element => {
    return isAccordionElement(element);
  });
  const hasAccordionContent = accordionContent.length !== 0 && accordionContent.every(element => React.isValidElement(element));
  useEffect(() => {
    var _tableContext$collaps;
    if (hasAccordionContent && tableContext !== null && tableContext !== void 0 && (_tableContext$collaps = tableContext.collapseTrCallbacks) !== null && _tableContext$collaps !== void 0 && _tableContext$collaps.current && count) {
      tableContext.collapseTrCallbacks.current[count] = () => {
        setOpen(false);
      };
    }
  }, [count, tableContext === null || tableContext === void 0 ? void 0 : tableContext.collapseTrCallbacks, hasAccordionContent]);
  const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
  if (hasAccordionContent) {
    headerContent = headerContent.filter(element => {
      return !isAccordionElement(element);
    });
    addContent(React.createElement(TableClickableButtonTd, {
      trIsOpen: trIsOpen,
      ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionToggleButtonSR,
      icon: "chevron_down",
      onClick: toggleOpenTr,
      key: "td-icon"
    }));
  } else if (isTableHead(headerContent)) {
    var _tableContext$allProp;
    addContent(React.createElement(TableIconSrTh, {
      key: "th-icon",
      text: tableContext === null || tableContext === void 0 || (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.accordionToggleButtonSR
    }));
  } else if (!hasAccordionContent) {
    addContent(_Td || (_Td = React.createElement(Td, {
      key: "empty-td"
    })));
  }
  const countTds = hasAccordionContent ? headerContent.filter(element => {
    return element.type === Td || element.type === TableClickableButtonTd;
  }).length : null;
  return React.createElement(TableAccordionContext.Provider, {
    value: {
      toggleOpenTr,
      trIsOpen,
      noAnimation,
      keepInDOM,
      countTds,
      onOpened,
      onClosed
    }
  }, React.createElement(TableClickableHead, _extends({
    trIsOpen: trIsOpen,
    trIsHover: trIsHover,
    trHadClick: trHadClick,
    clickable: hasAccordionContent,
    noAnimation: noAnimation,
    onClick: toggleOpenTr,
    onMouseEnter: onMouseEnterHandler,
    onMouseLeave: onMouseLeaveHandler,
    onKeyDown: onKeyDownHandler,
    ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionToggleButtonSR
  }, props), headerContent), accordionContent);
}
const isAccordionElement = element => element.type === TableAccordionContentSingle || element.type === TableAccordionContentRow;
//# sourceMappingURL=TableAccordionHead.js.map