@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
101 lines (100 loc) • 4.56 kB
JavaScript
'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 { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef, useCallback, useEffect, useRef } from 'react';
import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
import { cssVarVersionInfoPrefix, getUi5TagWithSuffix } from '../../internal/utils.js';
import { Button, ToggleButton } from '../../webComponents/index.js';
import { classNames, styleData } from './ObjectPageAnchorBar.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`;
const _buttonBaseHeight = `${cssVarVersionInfoPrefix}button_base_height`;
const anchorButtonVariables = {
[_buttonBaseMinWidth]: '1.5rem',
[_buttonBaseHeight]: '1.5rem'
};
/**
* 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 = useCallback(e => {
setHeaderPinned(e.target.pressed);
}, [setHeaderPinned]);
const isInitial = useRef(true);
useEffect(() => {
if (!isInitial.current && typeof onPinButtonToggle === 'function') {
onPinButtonToggle(headerPinned);
}
if (isInitial.current) {
isInitial.current = false;
}
}, [headerPinned]);
useEffect(() => {
const tagName = getUi5TagWithSuffix('ui5-button');
const showHideHeaderBtn = showHideHeaderBtnRef.current;
customElements.whenDefined(tagName).then(() => {
if (showHideHeaderBtn) {
showHideHeaderBtn.accessibilityAttributes = {
expanded: !!headerContentVisible
};
}
});
}, [!!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?.objectPageAnchorBar?.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),
style: anchorButtonVariables,
onClick: onToggleHeaderButtonClick,
onMouseOver: onHoverToggleButton,
onMouseLeave: onHoverToggleButton,
tooltip: i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER),
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),
style: anchorButtonVariables,
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 };