9890609870

Committed 11 Jul 2024 11:30AM CUT coverage: 79.701% (-0.9%) from 80.604%

Build # 9890609870

Build Type

Pull #6061

github

Committed by

web-flow

Commit Message

Merge 357334feb into 3822beed4

Pull Request Pull Request #6061: refactor: replace `Toolbar` with UI5 Web Component

Run Details

2532 of 3761 branches covered (67.32%)

4586 of 5754 relevant lines covered (79.7%)

72781.43 hits per line

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

61.54

/packages/main/src/components/Toolbar/OverflowPopover.tsx

import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
import iconOverflow from '@ui5/webcomponents-icons/dist/overflow.js';
import { Device, useSyncRef } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import type { Dispatch, FC, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
import { cloneElement, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { getOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
import { useCanRenderPortal } from '../../internal/ssr.js';
import { stopPropagation } from '../../internal/stopPropagation.js';
import { getUi5TagWithSuffix } from '../../internal/utils.js';
import type {
  ButtonPropTypes,
  PopoverDomRef,
  ToggleButtonDomRef,
  ToggleButtonPropTypes
} from '../../webComponents/index.js';
import { Popover, ToggleButton } from '../../webComponents/index.js';
import type { ToolbarSeparatorPropTypes } from '../ToolbarSeparator/index.js';
import type { ToolbarPropTypes } from './index.js';

interface OverflowPopoverProps {
  lastVisibleIndex: number;
  classes: Record<string, string>;
  children: ReactNode[];
  portalContainer: Element;
  overflowContentRef: Ref<HTMLDivElement>;
  numberOfAlwaysVisibleItems?: number;
  showMoreText: string;
  overflowPopoverRef?: Ref<PopoverDomRef>;
  overflowButton?: ReactElement<ToggleButtonPropTypes> | ReactElement<ButtonPropTypes>;
  setIsMounted: Dispatch<SetStateAction<boolean>>;
  a11yConfig?: ToolbarPropTypes['a11yConfig'];
}

const isPhone = Device.isPhone();

export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopoverProps) => {
  const {
    lastVisibleIndex,
    classes,
    children,
    portalContainer,
    overflowContentRef,
    numberOfAlwaysVisibleItems,
    showMoreText,
    overflowButton,
    overflowPopoverRef,
    setIsMounted,
    a11yConfig
  } = props;
  const [pressed, setPressed] = useState(false);
  const toggleBtnRef = useRef<ToggleButtonDomRef>(null);
  const [componentRef, popoverRef] = useSyncRef(overflowPopoverRef);

  useEffect(() => {
    setIsMounted(true);
    return () => {
      setIsMounted(false);
    };
  }, []);

  const handleToggleButtonClick = (e) => {
    e.stopPropagation();
    setPressed((prev) => {
      if (!prev) {
        if (popoverRef.current) {
          popoverRef.current.opener = e.target;
        }
        return true;
      }
      return false;
    });
  };

  const handleBeforeOpen = () => {
    if (toggleBtnRef.current) {
      toggleBtnRef.current.accessibilityAttributes = { expanded: true, hasPopup: 'menu' };
    }
  };
  const handleAfterOpen = () => {
    setPressed(true);
  };

  const handleClose = (e) => {
    if (toggleBtnRef.current) {
      toggleBtnRef.current.accessibilityAttributes = { expanded: false, hasPopup: 'menu' };
    }
    stopPropagation(e);
    setPressed(false);
  };

  useEffect(() => {
    const tagName = getUi5TagWithSuffix('ui5-toggle-button');
    void customElements.whenDefined(tagName).then(() => {
      if (toggleBtnRef.current) {
        toggleBtnRef.current.accessibilityAttributes = { expanded: pressed, hasPopup: 'menu' };
      }
    });
  }, []);

  const clonedOverflowButtonClick = (e) => {
    if (typeof overflowButton?.props?.onClick === 'function') {
      overflowButton.props.onClick(e);
    }
    if (!e.defaultPrevented) {
      handleToggleButtonClick(e);
    }
  };

  const canRenderPortal = useCanRenderPortal();

  const accessibleRole = (() => {
    if (a11yConfig?.overflowPopover?.contentRole) {
      return PopupAccessibleRole.None;
    }
    return a11yConfig?.overflowPopover?.role;
  })();

  const OverflowPopoverContextProvider = getOverflowPopoverContext().Provider;

  return (
    <OverflowPopoverContextProvider value={{ inPopover: true }}>
      {overflowButton ? (
        cloneElement(overflowButton, { onClick: clonedOverflowButtonClick })
      ) : (
        <ToggleButton
          ref={toggleBtnRef}
          design={ButtonDesign.Transparent}
          icon={iconOverflow}
          onClick={handleToggleButtonClick}
          pressed={pressed}
          accessibleName={showMoreText}
          tooltip={showMoreText}
          data-component-name="ToolbarOverflowButton"
        />
      )}
      {canRenderPortal &&
        createPortal(
          <Popover
            data-component-name="ToolbarOverflowPopover"
            className={clsx(classes.popover, isPhone && classes.popoverPhone)}
            placement={PopoverPlacement.Bottom}
            ref={componentRef}
            open={pressed}
            onClose={handleClose}
            onBeforeOpen={handleBeforeOpen}
            onOpen={handleAfterOpen}
            hideArrow
            accessibleRole={accessibleRole}
          >
            <div
              className={classes.popoverContent}
              ref={overflowContentRef}
              role={a11yConfig?.overflowPopover?.contentRole}
              data-component-name="ToolbarOverflowPopoverContent"
            >
              {children.map((item, index) => {
                if (index > lastVisibleIndex && index > numberOfAlwaysVisibleItems - 1) {
                  // @ts-expect-error: if props is not defined, it doesn't have an id (is not a ReactElement)
                  if (item?.props?.id) {
                    // @ts-expect-error: item is ReactElement
                    return cloneElement(item, { id: `${item.props.id}-overflow` });
                  }
                  // @ts-expect-error: if type is not defined, it's not a spacer
                  if (item.type?.displayName === 'ToolbarSeparator') {
                    return cloneElement(item as ReactElement<ToolbarSeparatorPropTypes>, {
                      style: {
                        height: '0.0625rem',
                        margin: '0.375rem 0.1875rem',
                        width: '100%'
                      }
                    });
                  }
                  return item;
                }
                return null;
              })}
            </div>
          </Popover>,
          portalContainer ?? document.body
        )}
    </OverflowPopoverContextProvider>
  );
};

1	import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
2	import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
3	import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
4	import iconOverflow from '@ui5/webcomponents-icons/dist/overflow.js';
5	import { Device, useSyncRef } from '@ui5/webcomponents-react-base';
6	import { clsx } from 'clsx';
7	import type { Dispatch, FC, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
8	import { cloneElement, useEffect, useRef, useState } from 'react';
9	import { createPortal } from 'react-dom';
10	import { getOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
11	import { useCanRenderPortal } from '../../internal/ssr.js';
12	import { stopPropagation } from '../../internal/stopPropagation.js';
13	import { getUi5TagWithSuffix } from '../../internal/utils.js';
14	import type {
15	ButtonPropTypes,
16	PopoverDomRef,
17	ToggleButtonDomRef,
18	ToggleButtonPropTypes
19	} from '../../webComponents/index.js';
20	import { Popover, ToggleButton } from '../../webComponents/index.js';
21	import type { ToolbarSeparatorPropTypes } from '../ToolbarSeparator/index.js';
22	import type { ToolbarPropTypes } from './index.js';
23
24	interface OverflowPopoverProps {
25	lastVisibleIndex: number;
26	classes: Record<string, string>;
27	children: ReactNode[];
28	portalContainer: Element;
29	overflowContentRef: Ref<HTMLDivElement>;
30	numberOfAlwaysVisibleItems?: number;
31	showMoreText: string;
32	overflowPopoverRef?: Ref<PopoverDomRef>;
33	overflowButton?: ReactElement<ToggleButtonPropTypes> \| ReactElement<ButtonPropTypes>;
34	setIsMounted: Dispatch<SetStateAction<boolean>>;
35	a11yConfig?: ToolbarPropTypes['a11yConfig'];
36	}
37
38	const isPhone = Device.isPhone();	362✔
39
40	export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopoverProps) => {	362✔
41	const {
42	lastVisibleIndex,
43	classes,
44	children,
45	portalContainer,
46	overflowContentRef,
47	numberOfAlwaysVisibleItems,
48	showMoreText,
49	overflowButton,
50	overflowPopoverRef,
51	setIsMounted,
52	a11yConfig
53	} = props;	177✔
54	const [pressed, setPressed] = useState(false);	177✔
55	const toggleBtnRef = useRef<ToggleButtonDomRef>(null);	177✔
56	const [componentRef, popoverRef] = useSyncRef(overflowPopoverRef);	177✔
57
58	useEffect(() => {	177✔
59	setIsMounted(true);	43✔
60	return () => {	43✔
61	setIsMounted(false);	37✔
62	};
63	}, []);
64
65	const handleToggleButtonClick = (e) => {	177✔
66	e.stopPropagation();	×
67	setPressed((prev) => {	×
68	if (!prev) {	×
69	if (popoverRef.current) {	×
70	popoverRef.current.opener = e.target;	×
71	}
72	return true;	×
73	}
74	return false;	×
75	});
76	};
77
78	const handleBeforeOpen = () => {	177✔
79	if (toggleBtnRef.current) {	×
80	toggleBtnRef.current.accessibilityAttributes = { expanded: true, hasPopup: 'menu' };	×
81	}
82	};
83	const handleAfterOpen = () => {	177✔
84	setPressed(true);	×
85	};
86
87	const handleClose = (e) => {	177✔
88	if (toggleBtnRef.current) {	×
89	toggleBtnRef.current.accessibilityAttributes = { expanded: false, hasPopup: 'menu' };	×
90	}
91	stopPropagation(e);	×
92	setPressed(false);	×
93	};
94
95	useEffect(() => {	177✔
96	const tagName = getUi5TagWithSuffix('ui5-toggle-button');	43✔
97	void customElements.whenDefined(tagName).then(() => {	43✔
98	if (toggleBtnRef.current) {	43✔
99	toggleBtnRef.current.accessibilityAttributes = { expanded: pressed, hasPopup: 'menu' };	43✔
100	}
101	});
102	}, []);
103
104	const clonedOverflowButtonClick = (e) => {	177✔
105	if (typeof overflowButton?.props?.onClick === 'function') {	×
106	overflowButton.props.onClick(e);	×
107	}
108	if (!e.defaultPrevented) {	×
109	handleToggleButtonClick(e);	×
110	}
111	};
112
113	const canRenderPortal = useCanRenderPortal();	177✔
114
115	const accessibleRole = (() => {	177✔
116	if (a11yConfig?.overflowPopover?.contentRole) {	177!
117	return PopupAccessibleRole.None;	×
118	}
119	return a11yConfig?.overflowPopover?.role;	177✔
120	})();
121
122	const OverflowPopoverContextProvider = getOverflowPopoverContext().Provider;	177✔
123
124	return (	177✔
125	<OverflowPopoverContextProvider value={{ inPopover: true }}>
126	{overflowButton ? (	177!
127	cloneElement(overflowButton, { onClick: clonedOverflowButtonClick })
128	) : (
129	<ToggleButton
130	ref={toggleBtnRef}
131	design={ButtonDesign.Transparent}
132	icon={iconOverflow}
133	onClick={handleToggleButtonClick}
134	pressed={pressed}
135	accessibleName={showMoreText}
136	tooltip={showMoreText}
137	data-component-name="ToolbarOverflowButton"
138	/>
139	)}
140	{canRenderPortal &&	311✔
141	createPortal(
142	<Popover
143	data-component-name="ToolbarOverflowPopover"
144	className={clsx(classes.popover, isPhone && classes.popoverPhone)}	134!
145	placement={PopoverPlacement.Bottom}
146	ref={componentRef}
147	open={pressed}
148	onClose={handleClose}
149	onBeforeOpen={handleBeforeOpen}
150	onOpen={handleAfterOpen}
151	hideArrow
152	accessibleRole={accessibleRole}
153	>
154	<div
155	className={classes.popoverContent}
156	ref={overflowContentRef}
157	role={a11yConfig?.overflowPopover?.contentRole}
158	data-component-name="ToolbarOverflowPopoverContent"
159	>
160	{children.map((item, index) => {
161	if (index > lastVisibleIndex && index > numberOfAlwaysVisibleItems - 1) {	2,496✔
162	// @ts-expect-error: if props is not defined, it doesn't have an id (is not a ReactElement)
163	if (item?.props?.id) {	1,433!
164	// @ts-expect-error: item is ReactElement
165	return cloneElement(item, { id: `${item.props.id}-overflow` });	×
166	}
167	// @ts-expect-error: if type is not defined, it's not a spacer
168	if (item.type?.displayName === 'ToolbarSeparator') {	1,433✔
169	return cloneElement(item as ReactElement<ToolbarSeparatorPropTypes>, {	13✔
170	style: {
171	height: '0.0625rem',
172	margin: '0.375rem 0.1875rem',
173	width: '100%'
174	}
175	});
176	}
177	return item;	1,420✔
178	}
179	return null;	1,063✔
180	})}
181	</div>
182	</Popover>,
183	portalContainer ?? document.body	268✔
184	)}
185	</OverflowPopoverContextProvider>
186	);
187	};

SAP / ui5-webcomponents-react / 9890609870

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