11702551082

Committed 06 Nov 2024 11:22AM UTC coverage: 89.111% (+0.04%) from 89.07%

Build # 11702551082

Build Type

Pull #1308

github

Committed by

web-flow

Commit Message

Merge 288c55fa5 into d3257342f

Pull Request Pull Request #1308: feat(PrioritySelector): new component

Run Details

1392 of 1777 branches covered (78.33%)

Branch coverage included in aggregate %.

67 of 75 new or added lines in 8 files covered. (89.33%)

2 existing lines in 1 file now uncovered.

3412 of 3614 relevant lines covered (94.41%)

60.63 hits per line

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

69.23

/src/components/Dropdown/Items/MultiSelectItem/MultiSelectItem.tsx

import React from 'react';
import {
    DropdownMenuCheckboxItem,
    DropdownMenuCheckboxItemProps,
} from '@radix-ui/react-dropdown-menu';
import { PrioritySelector, PrioritySelectorProps } from '../../../PrioritySelector';
import { bem } from '../../../../utils';
import { VisualCheckbox } from '../../../Checkbox';
import { Text } from '../../../Text';
import styles from './MultiSelectItem.scss';
import { stopPropagation } from '../../../../utils/misc';

export interface Props<PriorityItemValue> extends DropdownMenuCheckboxItemProps {
    /** Id for the checkbox */
    id?: string;
    /** a variant to determine the look and feel of component */
    variant?: 'option' | 'select-all' | 'group-title';
    /** props for PrioritySelector  */
    priority?: PrioritySelectorProps<PriorityItemValue>;
    /** Checkbox status */
    isSelected?: boolean;
}

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

export const MultiSelectItem = React.forwardRef<HTMLLIElement, Props<string>>(
    (
        {
            children,
            isSelected = false,
            disabled = false,
            variant = 'option',
            onCheckedChange,
            priority,
            ...rest
        },
        ref
    ) => {
        const priorityRef = React.useRef<HTMLDivElement>(null);

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

        const handleKeyDown = (e: React.KeyboardEvent) => {
            if (e.key === 'Tab' && !e.shiftKey) {
                if (priorityRef.current) {
                    priorityRef.current.focus();
                }
            }
        };

        return (
            <DropdownMenuCheckboxItem
                ref={ref}
                role="option"
                aria-selected={isSelected}
                onKeyDown={handleKeyDown}
                checked={isSelected}
                onSelect={(e) => {
                    e.preventDefault();
                }}
                onCheckedChange={onCheckedChange}
                {...rest}
                {...block({
                    isSelected,
                    disabled,
                    variant,
                    ...rest,
                })}
            >
                <VisualCheckbox checked={isSelected} />
                {hasPriorityList && (
                    <div role="none" onClick={stopPropagation} onKeyDown={stopPropagation}>
                        <PrioritySelector {...priority} buttonRef={priorityRef} />
                    </div>
                )}
                <Text inline>{children}</Text>
            </DropdownMenuCheckboxItem>
        );
    }
);

1	import React from 'react';	5✔
2	import {	5✔
3	DropdownMenuCheckboxItem,
4	DropdownMenuCheckboxItemProps,
5	} from '@radix-ui/react-dropdown-menu';
6	import { PrioritySelector, PrioritySelectorProps } from '../../../PrioritySelector';	5✔
7	import { bem } from '../../../../utils';	5✔
8	import { VisualCheckbox } from '../../../Checkbox';	5✔
9	import { Text } from '../../../Text';	5✔
10	import styles from './MultiSelectItem.scss';	5✔
11	import { stopPropagation } from '../../../../utils/misc';	5✔
12
13	export interface Props<PriorityItemValue> extends DropdownMenuCheckboxItemProps {
14	/** Id for the checkbox */
15	id?: string;
16	/** a variant to determine the look and feel of component */
17	variant?: 'option' \| 'select-all' \| 'group-title';
18	/** props for PrioritySelector */
19	priority?: PrioritySelectorProps<PriorityItemValue>;
20	/** Checkbox status */
21	isSelected?: boolean;
22	}
23
24	const { block } = bem('MultiSelectItem', styles);	5✔
25
26	export const MultiSelectItem = React.forwardRef<HTMLLIElement, Props<string>>(	5✔
27	(
28	{
29	children,	1✔
30	isSelected = false,	1!
31	disabled = false,	1!
32	variant = 'option',	1!
33	onCheckedChange,	1✔
34	priority,	1✔
35	...rest	1✔
36	},
37	ref
38	) => {
39	const priorityRef = React.useRef<HTMLDivElement>(null);	1✔
40
41	const hasPriorityList = priority && priority.list.length > 0;	1!
42
43	const handleKeyDown = (e: React.KeyboardEvent) => {	1✔
NEW 44	if (e.key === 'Tab' && !e.shiftKey) {	×
NEW 45	if (priorityRef.current) {	×
NEW 46	priorityRef.current.focus();	×
47	}
48	}
49	};
50
51	return (	1✔
52	<DropdownMenuCheckboxItem
53	ref={ref}
54	role="option"
55	aria-selected={isSelected}
56	onKeyDown={handleKeyDown}
57	checked={isSelected}
58	onSelect={(e) => {
59	e.preventDefault();	1✔
60	}}
61	onCheckedChange={onCheckedChange}
62	{...rest}
63	{...block({
64	isSelected,
65	disabled,
66	variant,
67	...rest,
68	})}
69	>
70	<VisualCheckbox checked={isSelected} />
71	{hasPriorityList && (	1!
72	<div role="none" onClick={stopPropagation} onKeyDown={stopPropagation}>
73	<PrioritySelector {...priority} buttonRef={priorityRef} />
74	</div>
75	)}
76	<Text inline>{children}</Text>
77	</DropdownMenuCheckboxItem>
78	);
79	}
80	);

textkernel / oneui / 11702551082

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