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

DNB Eufemia Design System UI Library

"use client";

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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function TableAccordionHead(allProps) {
  const {
    children,
    expanded,
    noAnimation,
    keepInDOM,
    onClick,
    onOpen,
    onClose,
    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 === 'right') {
      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(_jsx(TableClickableButtonTd, {
      trIsOpen: trIsOpen,
      ariaLabel: tableContextAllProps?.accordionToggleButtonSR,
      icon: "chevron_down",
      onClick: toggleOpenTr
    }, "td-icon"));
  } else if (isTableHead(headerContent)) {
    addContent(_jsx(TableIconSrTh, {
      text: tableContext?.allProps?.accordionToggleButtonSR
    }, "th-icon"));
  } else if (!hasAccordionContent) {
    addContent(_Td || (_Td = _jsx(Td, {}, "empty-td")));
  }
  const countTds = hasAccordionContent ? headerContent.filter(element => {
    const el = element;
    return el.type === Td || el.type === TableClickableButtonTd;
  }).length : null;
  return _jsxs(TableAccordionContext, {
    value: {
      toggleOpenTr,
      trIsOpen,
      noAnimation,
      keepInDOM,
      countTds,
      onOpen,
      onClose
    },
    children: [_jsx(TableClickableHead, {
      trIsOpen: trIsOpen,
      trIsHover: trIsHover,
      trHadClick: trHadClick,
      clickable: hasAccordionContent,
      noAnimation: noAnimation,
      onClick: toggleOpenTr,
      onMouseEnter: onMouseEnterHandler,
      onMouseLeave: onMouseLeaveHandler,
      onKeyDown: onKeyDownHandler,
      ariaLabel: tableContextAllProps?.accordionToggleButtonSR,
      ...props,
      children: headerContent
    }), accordionContent]
  });
}
const isAccordionElement = element => element.type === TableAccordionContentSingle || element.type === TableAccordionContentRow;
//# sourceMappingURL=TableAccordionHead.js.map