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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
var _Td;
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) {
  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?.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') {
      headerContent.push(content);
    } else {
      headerContent.unshift(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) {
        doc.startViewTransition?.(() => {
          setOpen(true);
        });
      } else {
        setOpen(!trIsOpen);
      }
    } else {
      setOpen(!trIsOpen);
    }
    setHadClick(true);
    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(() => {
    if (hasAccordionContent && tableContext?.collapseTrCallbacks?.current && count) {
      tableContext.collapseTrCallbacks.current[count] = () => {
        setOpen(false);
      };
    }
  }, [count, tableContext?.collapseTrCallbacks, hasAccordionContent]);
  const tableContextAllProps = React.useContext(TableContext)?.allProps;
  if (hasAccordionContent) {
    headerContent = headerContent.filter(element => {
      return !isAccordionElement(element);
    });
    addContent(React.createElement(TableClickableButtonTd, {
      trIsOpen: trIsOpen,
      ariaLabel: tableContextAllProps?.accordionToggleButtonSR,
      icon: "chevron_down",
      onClick: toggleOpenTr,
      key: "td-icon"
    }));
  } else if (isTableHead(headerContent)) {
    addContent(React.createElement(TableIconSrTh, {
      key: "th-icon",
      text: tableContext?.allProps?.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?.accordionToggleButtonSR
  }, props), headerContent), accordionContent);
}
const isAccordionElement = element => element.type === TableAccordionContentSingle || element.type === TableAccordionContentRow;
//# sourceMappingURL=TableAccordionHead.js.map