9581640895

Committed 19 Jun 2024 12:04PM CUT coverage: 85.222% (-0.9%) from 86.086%

Build # 9581640895

Build Type

Pull #5939

github

Committed by

web-flow

Commit Message

Merge 1bf0cb863 into 403481f38

Pull Request Pull Request #5939: feat(DynamicPage & ObjectPage): use ui5wc `DynamicPage` & rename `ObjectPage` components

Run Details

2861 of 4280 branches covered (66.85%)

8 of 11 new or added lines in 4 files covered. (72.73%)

9 existing lines in 1 file now uncovered.

5190 of 6090 relevant lines covered (85.22%)

67542.32 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

17.86

/packages/main/src/components/ObjectPageAnchorBar/index.tsx

'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 type { CSSProperties } from 'react';
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 type { CommonProps } from '../../types/index.js';
import { Button, ToggleButton } from '../../webComponents/index.js';
import type { ButtonDomRef } from '../../webComponents/index.js';
import { classNames, styleData } from './ObjectPageAnchorBar.module.css.js';

const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`;
const _buttonBaseHeight = `${cssVarVersionInfoPrefix}button_base_height`;

const anchorButtonVariables = {
  [_buttonBaseMinWidth]: '1.5rem',
  [_buttonBaseHeight]: '1.5rem'
} as CSSProperties;

interface ObjectPageAnchorBarPropTypes extends CommonProps {
  /**
   * Determines if the header content is visible.
   */
  headerContentVisible: boolean;
  /**
   * Determines if the header content is pinnable .
   */
  headerContentPinnable: boolean;
  /**
   * Determines if the hide header button is shown .
   */
  showHideHeaderButton: boolean;
  /**
   * Determines if the header is initially pinned .
   */
  headerPinned?: boolean;
  /**
   * Set the header to the state pinned.
   */
  setHeaderPinned?: (payload: any) => void;
  /**
   * Toggles the header content to be hidden or visible .
   */
  onToggleHeaderContentVisibility: (e: any) => void;
  /**
   * Highlight title when hovered.
   */
  onHoverToggleButton?: (e: any) => void;
  /**
   * Defines internally used a11y properties.
   */
  a11yConfig?: {
    objectPageAnchorBar?: {
      role?: string;
    };
  };
  /**
   * Fired when the `headerContent` changes its pinned state.
   */
  onPinnedStateChange?: (pinned: boolean) => void;
}

/**
 * The `ObjectPageAnchorBar` bar contains the expand/collapse (expands or collapses the header content) and pin button (pins the content header).
 */
const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes>((props, ref) => {
  const {
    showHideHeaderButton,
    headerContentVisible,
    headerContentPinnable,
    headerPinned,
    style,
    a11yConfig,
    setHeaderPinned,
    onPinnedStateChange,
    onToggleHeaderContentVisibility,
    onHoverToggleButton
  } = props;

  useStylesheet(styleData, ObjectPageAnchorBar.displayName);
  const showHideHeaderBtnRef = useRef<ButtonDomRef>(null);
  const shouldRenderHeaderPinnableButton = headerContentPinnable && headerContentVisible;
  const showBothActions = shouldRenderHeaderPinnableButton && showHideHeaderButton;

  const onPinHeader = useCallback(
    (e) => {
      setHeaderPinned(e.target.pressed);
    },
    [setHeaderPinned]
  );

  const isInitial = useRef(true);
  useEffect(() => {
    if (!isInitial.current && typeof onPinnedStateChange === 'function') {
      onPinnedStateChange(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 (
    <section
      data-component-name="ObjectPageAnchorBar"
      style={style}
      role={a11yConfig?.objectPageAnchorBar?.role}
      className={showHideHeaderButton || headerContentPinnable ? classNames.container : null}
      ref={ref}
    >
      {showHideHeaderButton && (
        <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 && (
        <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"
        />
      )}
    </section>
  );
});

ObjectPageAnchorBar.displayName = 'ObjectPageAnchorBar';

export { ObjectPageAnchorBar };

1	'use client';
2
3	import iconPushPinOff from '@ui5/webcomponents-icons/dist/pushpin-off.js';
4	import iconPushPinOn from '@ui5/webcomponents-icons/dist/pushpin-on.js';
5	import iconArrowDown from '@ui5/webcomponents-icons/dist/slim-arrow-down.js';
6	import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js';
7	import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
8	import { clsx } from 'clsx';
9	import type { CSSProperties } from 'react';
10	import { forwardRef, useCallback, useEffect, useRef } from 'react';
11	import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
12	import { cssVarVersionInfoPrefix, getUi5TagWithSuffix } from '../../internal/utils.js';
13	import type { CommonProps } from '../../types/index.js';
14	import { Button, ToggleButton } from '../../webComponents/index.js';
15	import type { ButtonDomRef } from '../../webComponents/index.js';
16	import { classNames, styleData } from './ObjectPageAnchorBar.module.css.js';
17
18	const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`;	49✔
19	const _buttonBaseHeight = `${cssVarVersionInfoPrefix}button_base_height`;	49✔
20
21	const anchorButtonVariables = {	49✔
22	[_buttonBaseMinWidth]: '1.5rem',
23	[_buttonBaseHeight]: '1.5rem'
24	} as CSSProperties;
25
26	interface ObjectPageAnchorBarPropTypes extends CommonProps {
27	/**
28	* Determines if the header content is visible.
29	*/
30	headerContentVisible: boolean;
31	/**
32	* Determines if the header content is pinnable .
33	*/
34	headerContentPinnable: boolean;
35	/**
36	* Determines if the hide header button is shown .
37	*/
38	showHideHeaderButton: boolean;
39	/**
40	* Determines if the header is initially pinned .
41	*/
42	headerPinned?: boolean;
43	/**
44	* Set the header to the state pinned.
45	*/
46	setHeaderPinned?: (payload: any) => void;
47	/**
48	* Toggles the header content to be hidden or visible .
49	*/
50	onToggleHeaderContentVisibility: (e: any) => void;
51	/**
52	* Highlight title when hovered.
53	*/
54	onHoverToggleButton?: (e: any) => void;
55	/**
56	* Defines internally used a11y properties.
57	*/
58	a11yConfig?: {
59	objectPageAnchorBar?: {
60	role?: string;
61	};
62	};
63	/**
64	* Fired when the `headerContent` changes its pinned state.
65	*/
66	onPinnedStateChange?: (pinned: boolean) => void;
67	}
68
69	/**
70	* The `ObjectPageAnchorBar` bar contains the expand/collapse (expands or collapses the header content) and pin button (pins the content header).
71	*/
72	const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes>((props, ref) => {	49✔
73	const {
74	showHideHeaderButton,
75	headerContentVisible,
76	headerContentPinnable,
77	headerPinned,
78	style,
79	a11yConfig,
80	setHeaderPinned,
81	onPinnedStateChange,
82	onToggleHeaderContentVisibility,
83	onHoverToggleButton
84	} = props;	×
85
NEW 86	useStylesheet(styleData, ObjectPageAnchorBar.displayName);	×
87	const showHideHeaderBtnRef = useRef<ButtonDomRef>(null);	×
88	const shouldRenderHeaderPinnableButton = headerContentPinnable && headerContentVisible;	×
89	const showBothActions = shouldRenderHeaderPinnableButton && showHideHeaderButton;	×
90
91	const onPinHeader = useCallback(	×
92	(e) => {
93	setHeaderPinned(e.target.pressed);	×
94	},
95	[setHeaderPinned]
96	);
97
98	const isInitial = useRef(true);	×
99	useEffect(() => {	×
100	if (!isInitial.current && typeof onPinnedStateChange === 'function') {	×
101	onPinnedStateChange(headerPinned);	×
102	}
103	if (isInitial.current) {	×
104	isInitial.current = false;	×
105	}
106	}, [headerPinned]);
107
108	useEffect(() => {	×
109	const tagName = getUi5TagWithSuffix('ui5-button');	×
110	const showHideHeaderBtn = showHideHeaderBtnRef.current;	×
111	customElements.whenDefined(tagName).then(() => {	×
112	if (showHideHeaderBtn) {	×
113	showHideHeaderBtn.accessibilityAttributes = { expanded: !!headerContentVisible };	×
114	}
115	});
116	}, [!!headerContentVisible]);
117
118	const onToggleHeaderButtonClick = (e) => {	×
119	onToggleHeaderContentVisibility(enrichEventWithDetails(e, { visible: !headerContentVisible }));	×
120	};
121	const i18nBundle = useI18nBundle('@ui5/webcomponents-react');	×
122	return (	×
123	<section
124	data-component-name="ObjectPageAnchorBar"
125	style={style}
126	role={a11yConfig?.objectPageAnchorBar?.role}
127	className={showHideHeaderButton \|\| headerContentPinnable ? classNames.container : null}	×
128	ref={ref}
129	>
130	{showHideHeaderButton && (	×
131	<Button
132	ref={showHideHeaderBtnRef}
133	icon={!headerContentVisible ? iconArrowDown : iconArrowUp}	×
134	data-ui5wcr-dynamic-page-header-action=""
135	className={clsx(
136	classNames.anchorBarActionButton,
137	classNames.anchorBarActionButtonExpandable,
138	showBothActions && classNames.anchorBarActionPinnableAndExpandable	×
139	)}
140	style={anchorButtonVariables}
141	onClick={onToggleHeaderButtonClick}
142	onMouseOver={onHoverToggleButton}
143	onMouseLeave={onHoverToggleButton}
144	tooltip={i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER)}	×
145	accessibleName={i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER)}	×
146	data-component-name="ObjectPageAnchorBarExpandBtn"
147	/>
148	)}
149	{shouldRenderHeaderPinnableButton && (	×
150	<ToggleButton
151	icon={headerPinned ? iconPushPinOn : iconPushPinOff}	×
152	data-ui5wcr-dynamic-page-header-action=""
153	className={clsx(classNames.anchorBarActionButton, classNames.anchorBarActionButtonPinnable)}
154	style={anchorButtonVariables}
155	pressed={headerPinned}
156	onClick={onPinHeader}
157	tooltip={i18nBundle.getText(headerPinned ? UNPIN_HEADER : PIN_HEADER)}	×
158	accessibleName={i18nBundle.getText(headerPinned ? UNPIN_HEADER : PIN_HEADER)}	×
159	data-component-name="ObjectPageAnchorBarPinBtn"
160	/>
161	)}
162	</section>
163	);
164	});
165
166	ObjectPageAnchorBar.displayName = 'ObjectPageAnchorBar';	49✔
167
168	export { ObjectPageAnchorBar };

SAP / ui5-webcomponents-react / 9581640895

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous