11799108098

Committed 12 Nov 2024 02:16PM UTC coverage: 89.146% (-0.1%) from 89.269%

Build # 11799108098

Build Type

Pull #1300

github

Committed by

web-flow

Commit Message

Merge 566b6a05a into 146eaf904

Pull Request Pull Request #1300: feat(pillDropdown): updated pill dropdown

Run Details

1403 of 1790 branches covered (78.38%)

Branch coverage included in aggregate %.

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

3 existing lines in 1 file now uncovered.

3459 of 3664 relevant lines covered (94.41%)

60.11 hits per line

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

81.48

/src/components/Pill/Pill.tsx

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

export interface ClassicButtonProps extends Omit<PillButtonProps, 'toggleDropdown' | 'children'> {
    /** Trigger button variant */
    variant?: 'classic';
}

export interface EnhancedButtonProps<PriorityItemValue>
    extends Omit<PillButtonEnhancedProps<PriorityItemValue>, 'toggleDropdown' | 'children'> {
    /** Trigger button variant */
    variant: 'enhanced';
}

export type Props<PriorityItemValue> = (
    | ClassicButtonProps
    | EnhancedButtonProps<PriorityItemValue>
) & {
    /** 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 that is called when the dropdown closes via done-button-click, window-click or ESC */
    onClose?: () => void;
    /** 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.
 */
/* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint */
export const Pill = <PriorityItemValue extends unknown>({
    variant = 'classic',
    onClear,
    name,
    ref,
    content = null,
    children,
    dropdownRef: dropdownRefFromProps,
    noPaddingInDropdown = false,
    additionalDropdownProps = {},
    onClose,
    ...rest
}: Props<PriorityItemValue>) => {
    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 variant === 'classic' ? (
            <PillButton
                name={name}
                content={content}
                isOpen={isOpen}
                toggleDropdown={toggleDropdown}
                onClear={onClear}
                {...rest}
            />
        ) : (
            <PillButtonEnhanced
                name={name}
                content={content}
                isOpen={isOpen}
                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 { PillButtonEnhanced, PillButtonEnhancedProps } from './PillButtonEnhanced';	2✔
5	import { PillDropdown, PillDropdownChildrenParams } from './PillDropdown';	2✔
6
7	export interface ClassicButtonProps extends Omit<PillButtonProps, 'toggleDropdown' \| 'children'> {
8	/** Trigger button variant */
9	variant?: 'classic';
10	}
11
12	export interface EnhancedButtonProps<PriorityItemValue>
13	extends Omit<PillButtonEnhancedProps<PriorityItemValue>, 'toggleDropdown' \| 'children'> {
14	/** Trigger button variant */
15	variant: 'enhanced';
16	}
17
18	export type Props<PriorityItemValue> = (
19	\| ClassicButtonProps
20	\| EnhancedButtonProps<PriorityItemValue>
21	) & {
22	/** The dropdown content renderer function. It is called with:
23	* * close {function} that closes the dropdown
24	* * innerPadding {string} that can be applied inside the component to set consistent padding
25	*/
26	children: (params: PillDropdownChildrenParams) => React.ReactNode;
27	/** a function that is called when the dropdown closes via done-button-click, window-click or ESC */
28	onClose?: () => void;
29	/** ref for pill button */
30	ref?: React.RefObject<HTMLElement>;
31	/** ref for pill dropdown */
32	dropdownRef?: React.RefObject<HTMLElement>;
33	/** whether or not to add a padding to the dropdown container.
34	* It is useful if you need to add elements that stretch to the edge of the container.
35	* You can use the CSS variable --pill-dropdown-padding to add padding as required.
36	* */
37	noPaddingInDropdown?: boolean;
38	/** other props that need to be applied to the dropdown container */
39	additionalDropdownProps?: object;
40	};
41
42	/**
43	* This component renders a PillButton and a PillDropdown, under the hood. These in turn are linked via PopupBase.
44	*
45	* * Most props, including 'rest' are applied to PillButton.
46	* * 'children', 'noPaddingInDropdown' and 'additionalDropdownProps' are used in PillDropdown.
47	* * 'ref' and 'dropdownRef' for used in PopupBase.
48	*/
49	/* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint */
50	export const Pill = <PriorityItemValue extends unknown>({	2✔
51	variant = 'classic',	12✔
52	onClear,	12✔
53	name,	12✔
54	ref,	12✔
55	content = null,	12!
56	children,	12✔
57	dropdownRef: dropdownRefFromProps,	12✔
58	noPaddingInDropdown = false,	12!
59	additionalDropdownProps = {},	12!
60	onClose,	12✔
61	...rest	12✔
62	}: Props<PriorityItemValue>) => {
63	const buttonRef = React.useMemo(() => ref \|\| React.createRef<HTMLElement>(), [ref]);	12✔
64	const dropdownRef = React.useMemo(	12✔
65	() => dropdownRefFromProps \|\| React.createRef<HTMLElement>(),	12✔
66	[dropdownRefFromProps]
67	);
68
69	const buttonRenderer = ({ setPopupVisibility, isOpen }) => {	24✔
70	const toggleDropdown = () => {	24✔
71	if (isOpen && onClose) {	12✔
72	onClose();	4✔
73	}
74	setPopupVisibility(!isOpen);	12✔
75	};
76
77	return variant === 'classic' ? (	24✔
78	<PillButton
79	name={name}
80	content={content}
81	isOpen={isOpen}
82	toggleDropdown={toggleDropdown}
83	onClear={onClear}
84	{...rest}
85	/>
86	) : (
87	<PillButtonEnhanced
88	name={name}
89	content={content}
90	isOpen={isOpen}
91	toggleDropdown={toggleDropdown}
92	onClear={onClear}
93	{...rest}
94	/>
95	);
96	};
97
98	const closeDropdown = (setPopupVisibility) => {	12✔
UNCOV 99	onClose?.();	×
UNCOV 100	setPopupVisibility(false);	×
101	};
102
103	const dropdownRenderer = ({ setPopupVisibility }) => (	12✔
104	<PillDropdown
UNCOV 105	close={() => closeDropdown(setPopupVisibility)}	×
106	noPadding={noPaddingInDropdown}
107	{...additionalDropdownProps}
108	>
109	{children}
110	</PillDropdown>
111	);
112
113	return (	12✔
114	<PopupBase
115	anchorRenderer={buttonRenderer}
116	popupRenderer={dropdownRenderer}
117	anchorRef={buttonRef}
118	popupRef={dropdownRef}
119	onClose={onClose}
120	/>
121	);
122	};
123
124	Pill.displayName = 'Pill';	2✔

textkernel / oneui / 11799108098

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