11402427396

Committed 18 Oct 2024 10:57AM UTC coverage: 88.955% (-1.0%) from 89.961%

Build # 11402427396

Build Type

Pull #1281

github

Committed by

web-flow

Commit Message

Merge d890db0d7 into 963ea61db

Pull Request Pull Request #1281: feat(Dropdown): refactor component based on Radix primitives

Run Details

1362 of 1740 branches covered (78.28%)

Branch coverage included in aggregate %.

95 of 125 new or added lines in 19 files covered. (76.0%)

1 existing line in 1 file now uncovered.

3293 of 3493 relevant lines covered (94.27%)

61.91 hits per line

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

19.05

/src/components/SelectedItemBadge/SelectedItemBadge.tsx

import * as React from 'react';
import Close from '@material-design-icons/svg/round/close.svg';
import KeyboardDoubleArrowUp from '@material-design-icons/svg/round/keyboard_double_arrow_up.svg';
import KeyboardArrowUp from '@material-design-icons/svg/round/keyboard_arrow_up.svg';
import KeyboardArrowDown from '@material-design-icons/svg/round/keyboard_arrow_down.svg';

import { bem } from '../../utils';
import { Text } from '../Text';
import styles from './SelectedItemBadge.scss';
import {
    DropdownContent,
    DropdownRoot,
    DropdownTrigger,
    SingleSelectItem,
    SingleSelectItemProps,
} from '../Dropdown';

const iconMap = {
    mandatory: KeyboardDoubleArrowUp,
    important: KeyboardArrowUp,
    optional: KeyboardArrowDown,
    exclude: Close,
};

export type Priority = 'mandatory' | 'important' | 'optional' | 'exclude';

export type PriorityItem<PriorityItemValue> = {
    priority: Priority;
    label: string;
    value?: PriorityItemValue;
};

// Priority related props
type PriorityProps<PriorityItemValue> = {
    /** Currently selected priority item that indicates the importance of the component. */
    selectedItem: PriorityItem<PriorityItemValue>;
    /** Array of availible priority items. */
    list: Array<PriorityItem<PriorityItemValue>>;
    /** Callback function triggered when a new priority is selected. */
    onChange: (newPriorityItem: PriorityItem<PriorityItemValue>) => void;
    /** Priority button label name for ARIA labelling */
    buttonLabel: string;
};

export interface Props<PriorityItemValue>
    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /** Children nodes to be rendered within the Dropdown,
     *  which is triggered by the main button
     * */
    children?: (
        | React.ReactElement<SingleSelectItemProps>
        | React.ReactElement<SingleSelectItemProps>[]
    )[];
    /** Label of the currently selected option item from filter */
    label: React.ReactNode;
    /** An additional label displayed next to the main label (e.g., the number of synonyms) */
    additionalLabel?: React.ReactNode;
    /** Function to be called when the delete button is clicked. */
    onDelete?: (e: React.KeyboardEvent | React.MouseEvent) => void;
    /** Boolean indicating whether the whole badge should be disabled. */
    isDisabled?: boolean;
    /** Main button label name for ARIA labelling */
    buttonLabel?: string;
    /** Delete button label name for ARIA labelling */
    deleteButtonLabel?: string;
    /** Priority details */
    priority?: PriorityProps<PriorityItemValue>;
    /** Ref element used to make the width of the Content equal to the parent width */
    refElement?: React.RefObject<HTMLElement | null>;
}

const { block, elem } = bem('SelectedItemBadge', styles);

export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(
    (
        {
            children,
            label,
            additionalLabel,
            isDisabled = false,
            onDelete,
            buttonLabel,
            deleteButtonLabel,
            priority,
            refElement,
            ...rest
        },
        ref
    ) => {
        const badgeRef = React.useRef<HTMLElement>(null);

        const hasPriorityList = priority && priority.list.length > 0;

        const renderPriorityIcon = (priorityType?: Priority, disabled: boolean = false) => {
            if (!priorityType) {
                return null;
            }

            const IconComponent = iconMap[priorityType];
            return IconComponent ? (
                <IconComponent
                    disabled={disabled}
                    viewBox="0 0 24 24"
                    {...elem('icon', { [priorityType]: true })}
                />
            ) : null;
        };

        const handleOnDelete = (e: React.KeyboardEvent | React.MouseEvent) => {
            e.stopPropagation();
            onDelete?.(e);
        };

        return (
            <div {...rest} {...block()} ref={badgeRef || ref}>
                {hasPriorityList && (
                    <DropdownRoot>
                        <DropdownTrigger asChild>
                            <button
                                aria-label={priority.buttonLabel}
                                disabled={isDisabled}
                                type="button"
                                {...elem('priorityButton')}
                            >
                                {renderPriorityIcon(priority.selectedItem?.priority, isDisabled)}
                            </button>
                        </DropdownTrigger>
                        <DropdownContent sideOffset={6} refElement={badgeRef}>
                            {priority.list.map((item) => (
                                <SingleSelectItem
                                    key={item.priority}
                                    onSelect={() => {
                                        priority.onChange(item);
                                    }}
                                    isSelected={priority.selectedItem.value === item.value}
                                    {...elem('badgeListItem')}
                                >
                                    {renderPriorityIcon(item.priority)}
                                    <Text inline>{item.label}</Text>
                                </SingleSelectItem>
                            ))}
                        </DropdownContent>
                    </DropdownRoot>
                )}
                {children ? (
                    <DropdownRoot>
                        <DropdownTrigger asChild>
                            <button
                                aria-label={buttonLabel}
                                disabled={isDisabled}
                                type="button"
                                {...elem('optionButton')}
                            >
                                <Text inline size="small" {...elem('valueText')}>
                                    {label}
                                </Text>
                                {additionalLabel && (
                                    <Text inline size="small" {...elem('optionText')}>
                                        {additionalLabel}
                                    </Text>
                                )}
                            </button>
                        </DropdownTrigger>
                        <DropdownContent
                            {...elem('badgeDropdownList')}
                            sideOffset={6}
                            alignOffset={-32}
                            refElement={badgeRef}
                        >
                            {children}
                        </DropdownContent>
                    </DropdownRoot>
                ) : (
                    <div {...elem('valueContainer')}>
                        <Text inline size="small" {...elem('valueText')}>
                            {label}
                        </Text>
                        {additionalLabel && (
                            <Text inline size="small" {...elem('optionText')}>
                                {additionalLabel}
                            </Text>
                        )}
                    </div>
                )}
                {onDelete && (
                    <button
                        aria-label={deleteButtonLabel}
                        disabled={isDisabled}
                        onClick={handleOnDelete}
                        type="button"
                        {...elem('deleteButton')}
                    >
                        <Close viewBox="0 0 24 24" style={{ width: '20px', height: '20px' }} />
                    </button>
                )}
            </div>
        );
    }
);

1	import * as React from 'react';	1✔
2	import Close from '@material-design-icons/svg/round/close.svg';	1✔
3	import KeyboardDoubleArrowUp from '@material-design-icons/svg/round/keyboard_double_arrow_up.svg';	1✔
4	import KeyboardArrowUp from '@material-design-icons/svg/round/keyboard_arrow_up.svg';	1✔
5	import KeyboardArrowDown from '@material-design-icons/svg/round/keyboard_arrow_down.svg';	1✔
6
7	import { bem } from '../../utils';	1✔
8	import { Text } from '../Text';	1✔
9	import styles from './SelectedItemBadge.scss';	1✔
10	import {	1✔
11	DropdownContent,
12	DropdownRoot,
13	DropdownTrigger,
14	SingleSelectItem,
15	SingleSelectItemProps,
16	} from '../Dropdown';
17
18	const iconMap = {	1✔
19	mandatory: KeyboardDoubleArrowUp,
20	important: KeyboardArrowUp,
21	optional: KeyboardArrowDown,
22	exclude: Close,
23	};
24
25	export type Priority = 'mandatory' \| 'important' \| 'optional' \| 'exclude';
26
27	export type PriorityItem<PriorityItemValue> = {
28	priority: Priority;
29	label: string;
30	value?: PriorityItemValue;
31	};
32
33	// Priority related props
34	type PriorityProps<PriorityItemValue> = {
35	/** Currently selected priority item that indicates the importance of the component. */
36	selectedItem: PriorityItem<PriorityItemValue>;
37	/** Array of availible priority items. */
38	list: Array<PriorityItem<PriorityItemValue>>;
39	/** Callback function triggered when a new priority is selected. */
40	onChange: (newPriorityItem: PriorityItem<PriorityItemValue>) => void;
41	/** Priority button label name for ARIA labelling */
42	buttonLabel: string;
43	};
44
45	export interface Props<PriorityItemValue>
46	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
47	/** Children nodes to be rendered within the Dropdown,
48	* which is triggered by the main button
49	* */
50	children?: (
51	\| React.ReactElement<SingleSelectItemProps>
52	\| React.ReactElement<SingleSelectItemProps>[]
53	)[];
54	/** Label of the currently selected option item from filter */
55	label: React.ReactNode;
56	/** An additional label displayed next to the main label (e.g., the number of synonyms) */
57	additionalLabel?: React.ReactNode;
58	/** Function to be called when the delete button is clicked. */
59	onDelete?: (e: React.KeyboardEvent \| React.MouseEvent) => void;
60	/** Boolean indicating whether the whole badge should be disabled. */
61	isDisabled?: boolean;
62	/** Main button label name for ARIA labelling */
63	buttonLabel?: string;
64	/** Delete button label name for ARIA labelling */
65	deleteButtonLabel?: string;
66	/** Priority details */
67	priority?: PriorityProps<PriorityItemValue>;
68	/** Ref element used to make the width of the Content equal to the parent width */
69	refElement?: React.RefObject<HTMLElement \| null>;
70	}
71
72	const { block, elem } = bem('SelectedItemBadge', styles);	1✔
73
74	export const SelectedItemBadge = React.forwardRef<HTMLElement, Props<string>>(	1✔
75	(
76	{
NEW 77	children,	×
NEW 78	label,	×
NEW 79	additionalLabel,	×
NEW 80	isDisabled = false,	×
NEW 81	onDelete,	×
NEW 82	buttonLabel,	×
NEW 83	deleteButtonLabel,	×
NEW 84	priority,	×
NEW 85	refElement,	×
NEW 86	...rest	×
87	},
88	ref
89	) => {
NEW 90	const badgeRef = React.useRef<HTMLElement>(null);	×
91
NEW 92	const hasPriorityList = priority && priority.list.length > 0;	×
93
NEW 94	const renderPriorityIcon = (priorityType?: Priority, disabled: boolean = false) => {	×
NEW 95	if (!priorityType) {	×
NEW 96	return null;	×
97	}
98
NEW 99	const IconComponent = iconMap[priorityType];	×
NEW 100	return IconComponent ? (	×
101	<IconComponent
102	disabled={disabled}
103	viewBox="0 0 24 24"
104	{...elem('icon', { [priorityType]: true })}
105	/>
106	) : null;
107	};
108
NEW 109	const handleOnDelete = (e: React.KeyboardEvent \| React.MouseEvent) => {	×
NEW 110	e.stopPropagation();	×
NEW 111	onDelete?.(e);	×
112	};
113
NEW 114	return (	×
115	<div {...rest} {...block()} ref={badgeRef \|\| ref}>	×
116	{hasPriorityList && (	×
117	<DropdownRoot>
118	<DropdownTrigger asChild>
119	<button
120	aria-label={priority.buttonLabel}
121	disabled={isDisabled}
122	type="button"
123	{...elem('priorityButton')}
124	>
125	{renderPriorityIcon(priority.selectedItem?.priority, isDisabled)}	×
126	</button>
127	</DropdownTrigger>
128	<DropdownContent sideOffset={6} refElement={badgeRef}>
NEW 129	{priority.list.map((item) => (	×
130	<SingleSelectItem
131	key={item.priority}
132	onSelect={() => {
NEW 133	priority.onChange(item);	×
134	}}
135	isSelected={priority.selectedItem.value === item.value}
136	{...elem('badgeListItem')}
137	>
138	{renderPriorityIcon(item.priority)}
139	<Text inline>{item.label}</Text>
140	</SingleSelectItem>
141	))}
142	</DropdownContent>
143	</DropdownRoot>
144	)}
145	{children ? (	×
146	<DropdownRoot>
147	<DropdownTrigger asChild>
148	<button
149	aria-label={buttonLabel}
150	disabled={isDisabled}
151	type="button"
152	{...elem('optionButton')}
153	>
154	<Text inline size="small" {...elem('valueText')}>
155	{label}
156	</Text>
157	{additionalLabel && (	×
158	<Text inline size="small" {...elem('optionText')}>
159	{additionalLabel}
160	</Text>
161	)}
162	</button>
163	</DropdownTrigger>
164	<DropdownContent
165	{...elem('badgeDropdownList')}
166	sideOffset={6}
167	alignOffset={-32}
168	refElement={badgeRef}
169	>
170	{children}
171	</DropdownContent>
172	</DropdownRoot>
173	) : (
174	<div {...elem('valueContainer')}>
175	<Text inline size="small" {...elem('valueText')}>
176	{label}
177	</Text>
178	{additionalLabel && (	×
179	<Text inline size="small" {...elem('optionText')}>
180	{additionalLabel}
181	</Text>
182	)}
183	</div>
184	)}
185	{onDelete && (	×
186	<button
187	aria-label={deleteButtonLabel}
188	disabled={isDisabled}
189	onClick={handleOnDelete}
190	type="button"
191	{...elem('deleteButton')}
192	>
193	<Close viewBox="0 0 24 24" style={{ width: '20px', height: '20px' }} />
194	</button>
195	)}
196	</div>
197	);
198	}
199	);

textkernel / oneui / 11402427396

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