@ui5/webcomponents-react/dist/components/ObjectPage/useHandleTabSelect.js

React Wrapper for UI5 Web Components and additional components

import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
import { isValidElement } from 'react';
import { ObjectPageMode } from '../../enums/ObjectPageMode.js';
export const useHandleTabSelect = ({
  onBeforeNavigate,
  headerPinned,
  mode,
  setHeaderCollapsedInternal,
  setScrolledHeaderExpanded,
  childrenArray,
  handleOnSectionSelected,
  isProgrammaticallyScrolled,
  setInternalSelectedSectionId,
  objectPageRef,
  debouncedOnSectionChange,
  scrollTimeout,
  setSelectedSubSectionId,
  setTabSelectId,
  setWasUserSectionChange
}) => {
  const handleOnSubSectionSelected = e => {
    isProgrammaticallyScrolled.current = true;
    const sectionId = e.detail.sectionId;
    if (mode === ObjectPageMode.IconTabBar) {
      setInternalSelectedSectionId(sectionId);
      const sectionNodes = objectPageRef.current?.querySelectorAll('section[data-component-name="ObjectPageSection"]');
      const currentIndex = childrenArray.findIndex(objectPageSection => {
        return /*#__PURE__*/isValidElement(objectPageSection) && objectPageSection.props?.id === sectionId;
      });
      debouncedOnSectionChange(e, currentIndex, sectionId, sectionNodes[currentIndex]);
    }
    const subSectionId = e.detail.subSectionId;
    scrollTimeout.current = performance.now() + 200;
    setSelectedSubSectionId(subSectionId);
    setTabSelectId(sectionId);
  };
  const handleTabItemSelect = event => {
    if (typeof onBeforeNavigate === 'function') {
      const selectedTabDataset = event.detail.tab.dataset;
      const sectionIndex = parseInt(selectedTabDataset.index, 10);
      const sectionId = selectedTabDataset.parentId ?? selectedTabDataset.sectionId;
      const subSectionId = Object.prototype.hasOwnProperty.call(selectedTabDataset, 'isSubTab') ? selectedTabDataset.sectionId : undefined;
      onBeforeNavigate(enrichEventWithDetails(event, {
        sectionIndex,
        sectionId,
        subSectionId
      }));
      if (event.defaultPrevented) {
        return;
      }
    }
    event.preventDefault();
    const {
      sectionId,
      index,
      isSubTab,
      parentId
    } = event.detail.tab.dataset;
    if (parseInt(index) !== 0 && !headerPinned && mode !== ObjectPageMode.IconTabBar) {
      setHeaderCollapsedInternal(true);
    }
    setScrolledHeaderExpanded(false);
    if (isSubTab !== undefined) {
      handleOnSubSectionSelected(enrichEventWithDetails(event, {
        sectionId: parentId,
        subSectionId: sectionId
      }));
    } else {
      const section = childrenArray.find(el => {
        return el.props.id == sectionId;
      });
      handleOnSectionSelected(event, section?.props?.id, index, section);
    }
    if (mode === ObjectPageMode.IconTabBar) {
      setWasUserSectionChange(true);
    }
  };
  return handleTabItemSelect;
};