11551155569

Committed 28 Oct 2024 09:34AM UTC coverage: 88.859% (-0.1%) from 88.988%

Build # 11551155569

Build Type

Pull #1300

github

Committed by

web-flow

Commit Message

Merge 7eb8c79b2 into 2cf28469c

Pull Request Pull Request #1300: updated pill dropdown component

Run Details

1361 of 1744 branches covered (78.04%)

Branch coverage included in aggregate %.

4 of 5 new or added lines in 3 files covered. (80.0%)

3 existing lines in 1 file now uncovered.

3321 of 3525 relevant lines covered (94.21%)

61.17 hits per line

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

77.36

/src/components/Pill/Pill.tsx

import * as React from 'react';
import { PopupBase } from '../PopupBase';
import { PillButton, PillButtonProps } from './PillButton';
import { PillDropdown, PillDropdownChildrenParams } from './PillDropdown';

export interface Props extends Omit<PillButtonProps, 'toggleDropdown' | 'children'> {
    /** The dropdown content renderer function. It is called with:
     *   * close {function} that closes the dropdown
     *   * innerPadding {string} that can be applied inside the component to set consistent padding
     */
    children: (params: PillDropdownChildrenParams) => React.ReactNode;
    /** a function to be called to clear the pill/filter content */
    onClear: () => void;
    /** a function that is called when the dropdown closes via done-button-click, window-click or ESC */
    onClose?: () => void;
    /** name describing the pill/filter */
    name: string;
    /** label describing the content of an active filter/pill. Note: it is rendered within a <span> */
    content?: React.ReactNode;
    /** If pill is in default state, meaning it has content but cannot be reset. */
    isContentDefault?: boolean;
    /** label for the Done button */
    doneLabel: string;
    /** ref for pill button */
    ref?: React.RefObject<HTMLElement>;
    /** ref for pill dropdown */
    dropdownRef?: React.RefObject<HTMLElement>;
    /** whether or not to add a padding to the dropdown container.
     * It is useful if you need to add elements that stretch to the edge of the container.
     * You can use the CSS variable --pill-dropdown-padding to add padding as required.
     * */
    noPaddingInDropdown?: boolean;
    /** other props that need to be applied to the dropdown container */
    additionalDropdownProps?: object;
}

/**
 * This component renders a PillButton and a PillDropdown, under the hood. These in turn are linked via PopupBase.
 *
 * * Most props, including 'rest' are applied to PillButton.
 * * 'children', 'noPaddingInDropdown' and 'additionalDropdownProps' are used in PillDropdown.
 * * 'ref' and 'dropdownRef' for used in PopupBase.
 */
export const Pill: React.FC<Props> = ({
    onClear,
    isContentDefault = false,
    name,
    ref = null,
    content = null,
    children,
    dropdownRef: dropdownRefFromProps,
    noPaddingInDropdown = false,
    additionalDropdownProps = {},
    onClose,
    ...rest
}) => {
    const buttonRef = React.useMemo(() => ref || React.createRef<HTMLElement>(), [ref]);
    const dropdownRef = React.useMemo(
        () => dropdownRefFromProps || React.createRef<HTMLElement>(),
        [dropdownRefFromProps]
    );

    const buttonRenderer = ({ setPopupVisibility, isOpen }) => {
        const toggleDropdown = () => {
            if (isOpen && onClose) {
                onClose();
            }
            setPopupVisibility(!isOpen);
        };

        return (
            <PillButton
                name={name}
                content={content}
                isOpen={isOpen}
                isContentDefault={isContentDefault}
                toggleDropdown={toggleDropdown}
                onClear={onClear}
                {...rest}
            />
        );
    };

    const closeDropdown = (setPopupVisibility) => {
        onClose?.();
        setPopupVisibility(false);
    };

    const dropdownRenderer = ({ setPopupVisibility }) => (
        <PillDropdown
            close={() => closeDropdown(setPopupVisibility)}
            noPadding={noPaddingInDropdown}
            {...additionalDropdownProps}
        >
            {children}
        </PillDropdown>
    );

    return (
        <PopupBase
            anchorRenderer={buttonRenderer}
            popupRenderer={dropdownRenderer}
            anchorRef={buttonRef}
            popupRef={dropdownRef}
            onClose={onClose}
        />
    );
};

Pill.displayName = 'Pill';

1	import * as React from 'react';	2✔
2	import { PopupBase } from '../PopupBase';	2✔
3	import { PillButton, PillButtonProps } from './PillButton';	2✔
4	import { PillDropdown, PillDropdownChildrenParams } from './PillDropdown';	2✔
5
6	export interface Props extends Omit<PillButtonProps, 'toggleDropdown' \| 'children'> {
7	/** The dropdown content renderer function. It is called with:
8	* * close {function} that closes the dropdown
9	* * innerPadding {string} that can be applied inside the component to set consistent padding
10	*/
11	children: (params: PillDropdownChildrenParams) => React.ReactNode;
12	/** a function to be called to clear the pill/filter content */
13	onClear: () => void;
14	/** a function that is called when the dropdown closes via done-button-click, window-click or ESC */
15	onClose?: () => void;
16	/** name describing the pill/filter */
17	name: string;
18	/** label describing the content of an active filter/pill. Note: it is rendered within a <span> */
19	content?: React.ReactNode;
20	/** If pill is in default state, meaning it has content but cannot be reset. */
21	isContentDefault?: boolean;
22	/** label for the Done button */
23	doneLabel: string;
24	/** ref for pill button */
25	ref?: React.RefObject<HTMLElement>;
26	/** ref for pill dropdown */
27	dropdownRef?: React.RefObject<HTMLElement>;
28	/** whether or not to add a padding to the dropdown container.
29	* It is useful if you need to add elements that stretch to the edge of the container.
30	* You can use the CSS variable --pill-dropdown-padding to add padding as required.
31	* */
32	noPaddingInDropdown?: boolean;
33	/** other props that need to be applied to the dropdown container */
34	additionalDropdownProps?: object;
35	}
36
37	/**
38	* This component renders a PillButton and a PillDropdown, under the hood. These in turn are linked via PopupBase.
39	*
40	* * Most props, including 'rest' are applied to PillButton.
41	* * 'children', 'noPaddingInDropdown' and 'additionalDropdownProps' are used in PillDropdown.
42	* * 'ref' and 'dropdownRef' for used in PopupBase.
43	*/
44	export const Pill: React.FC<Props> = ({	2✔
45	onClear,	7✔
46	isContentDefault = false,	6!
47	name,	6✔
48	ref = null,	6!
49	content = null,	6!
50	children,	6✔
51	dropdownRef: dropdownRefFromProps,	6✔
52	noPaddingInDropdown = false,	6!
53	additionalDropdownProps = {},	6!
54	onClose,	6✔
55	...rest	6✔
56	}) => {
57	const buttonRef = React.useMemo(() => ref \|\| React.createRef<HTMLElement>(), [ref]);	6✔
58	const dropdownRef = React.useMemo(	6✔
59	() => dropdownRefFromProps \|\| React.createRef<HTMLElement>(),	6✔
60	[dropdownRefFromProps]
61	);
62
63	const buttonRenderer = ({ setPopupVisibility, isOpen }) => {	12✔
64	const toggleDropdown = () => {	12✔
65	if (isOpen && onClose) {	6✔
66	onClose();	2✔
67	}
68	setPopupVisibility(!isOpen);	6✔
69	};
70
71	return (	12✔
72	<PillButton
73	name={name}
74	content={content}
75	isOpen={isOpen}
76	isContentDefault={isContentDefault}
77	toggleDropdown={toggleDropdown}
78	onClear={onClear}
79	{...rest}
80	/>
81	);
82	};
83
84	const closeDropdown = (setPopupVisibility) => {	6✔
UNCOV 85	onClose?.();	×
UNCOV 86	setPopupVisibility(false);	×
87	};
88
89	const dropdownRenderer = ({ setPopupVisibility }) => (	6✔
90	<PillDropdown
NEW UNCOV 91	close={() => closeDropdown(setPopupVisibility)}	×
92	noPadding={noPaddingInDropdown}
93	{...additionalDropdownProps}
94	>
95	{children}
96	</PillDropdown>
97	);
98
99	return (	6✔
100	<PopupBase
101	anchorRenderer={buttonRenderer}
102	popupRenderer={dropdownRenderer}
103	anchorRef={buttonRef}
104	popupRef={dropdownRef}
105	onClose={onClose}
106	/>
107	);
108	};
109
110	Pill.displayName = 'Pill';	2✔

textkernel / oneui / 11551155569

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