@ui5/webcomponents-react/wrappers/components/ObjectPageAnchorBar/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import iconPushPinOff from '@ui5/webcomponents-icons/dist/pushpin-off.js';
import iconPushPinOn from '@ui5/webcomponents-icons/dist/pushpin-on.js';
import iconArrowDown from '@ui5/webcomponents-icons/dist/slim-arrow-down.js';
import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js';
import { debounce, enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef, useEffect, useRef } from 'react';
import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
import { getUi5TagWithSuffix } from '../../internal/utils.js';
import { Button } from '../../webComponents/Button/index.js';
import { ToggleButton } from '../../webComponents/ToggleButton/index.js';
import { classNames, styleData } from './ObjectPageAnchorBar.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * The `ObjectPageAnchorBar` bar contains the expand/collapse (expands or collapses the header content) and pin button (pins the content header).
 */
const ObjectPageAnchorBar = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    headerContentVisible,
    hidePinButton,
    headerPinned,
    style,
    accessibilityAttributes,
    setHeaderPinned,
    onPinButtonToggle,
    onToggleHeaderContentVisibility,
    onHoverToggleButton
  } = props;
  useStylesheet(styleData, ObjectPageAnchorBar.displayName);
  const showHideHeaderBtnRef = useRef(null);
  const shouldRenderHeaderPinnableButton = !hidePinButton && headerContentVisible;
  const showBothActions = shouldRenderHeaderPinnableButton;
  const onPinHeader = e => {
    const target = e.target;
    setHeaderPinned(target.pressed);
  };

  // debounced because of StrictMode
  const debouncedOnPinButtonToggle = debounce(pinned => {
    onPinButtonToggle(pinned);
  }, 300);
  const isInitial = useRef(true);
  useEffect(() => {
    if (!isInitial.current && typeof onPinButtonToggle === 'function' && headerPinned != null) {
      debouncedOnPinButtonToggle(headerPinned);
    }
    if (isInitial.current) {
      isInitial.current = false;
    }
    return () => {
      debouncedOnPinButtonToggle.cancel();
    };
  }, [headerPinned]);
  useEffect(() => {
    const tagName = getUi5TagWithSuffix('ui5-button');
    const showHideHeaderBtn = showHideHeaderBtnRef.current;
    void customElements.whenDefined(tagName).then(() => {
      if (showHideHeaderBtn) {
        const expanded = accessibilityAttributes?.expandButton && Object.hasOwn(accessibilityAttributes.expandButton, 'expanded') ? accessibilityAttributes.expandButton.expanded : !!headerContentVisible;
        showHideHeaderBtn.accessibilityAttributes = {
          expanded,
          hasPopup: undefined,
          controls: undefined
        };
      }
    });
  }, [accessibilityAttributes?.expandButton?.expanded, !!headerContentVisible]);
  const onToggleHeaderButtonClick = e => {
    onToggleHeaderContentVisibility(enrichEventWithDetails(e, {
      visible: !headerContentVisible
    }));
  };
  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
  return /*#__PURE__*/_jsxs("section", {
    "data-component-name": "ObjectPageAnchorBar",
    style: style,
    role: accessibilityAttributes?.role,
    className: !hidePinButton ? classNames.container : null,
    ref: ref,
    children: [/*#__PURE__*/_jsx(Button, {
      ref: showHideHeaderBtnRef,
      icon: !headerContentVisible ? iconArrowDown : iconArrowUp,
      "data-ui5wcr-dynamic-page-header-action": "",
      className: clsx(classNames.anchorBarActionButton, classNames.anchorBarActionButtonExpandable, showBothActions && classNames.anchorBarActionPinnableAndExpandable),
      onClick: onToggleHeaderButtonClick,
      onMouseOver: onHoverToggleButton,
      onMouseLeave: onHoverToggleButton,
      tooltip: i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER),
      accessibleName: accessibilityAttributes?.expandButton?.accessibleName ?? i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER),
      "data-component-name": "ObjectPageAnchorBarExpandBtn"
    }), shouldRenderHeaderPinnableButton && /*#__PURE__*/_jsx(ToggleButton, {
      icon: headerPinned ? iconPushPinOn : iconPushPinOff,
      "data-ui5wcr-dynamic-page-header-action": "",
      className: clsx(classNames.anchorBarActionButton, classNames.anchorBarActionButtonPinnable),
      pressed: headerPinned,
      onClick: onPinHeader,
      tooltip: i18nBundle.getText(headerPinned ? UNPIN_HEADER : PIN_HEADER),
      accessibleName: i18nBundle.getText(headerPinned ? UNPIN_HEADER : PIN_HEADER),
      "data-component-name": "ObjectPageAnchorBarPinBtn"
    })]
  });
});
ObjectPageAnchorBar.displayName = 'ObjectPageAnchorBar';
export { ObjectPageAnchorBar };