Build has been canceled!

11386254679

Committed 17 Oct 2024 01:44PM UTC coverage: 88.332% (-1.6%) from 89.961%

Build # 11386254679

Build Type

Pull #1281

github

Committed by

web-flow

Commit Message

Merge d2f703197 into 963ea61db

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

Run Details

1345 of 1738 branches covered (77.39%)

Branch coverage included in aggregate %.

75 of 122 new or added lines in 19 files covered. (61.48%)

1 existing line in 1 file now uncovered.

3273 of 3490 relevant lines covered (93.78%)

61.86 hits per line

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

91.45

/src/components/List/List.tsx

import * as React from 'react';
import { EmptyElement } from '@textkernel/oneui/customTypes/types';
import { bem, scrollIntoViewIfNeeded } from '../../utils';
import { LIST_NAVIGATION_DIRECTIONS, ENTER_KEY } from '../../constants';
import styles from './List.scss';

export interface Props extends React.HTMLAttributes<HTMLUListElement> {
    /** List items. They should be ListItem or li.
     * If you want to add an element that is not part of the list, but should be rendered within it
     * (e.g. an image to decorate the list) use `data-list-exception` as a prop to that child
     */
    children: (React.ReactElement | EmptyElement)[] | null;
    /** Adds dividing lines between the list items */
    isDivided?: boolean;
    /** Defines if selection should be made on navigate */
    doSelectOnNavigate?: boolean;
    /** manage keyboard navigation externally. This prop is practically same as isStaticList, just named differently */
    isControlledNavigation?: boolean;
    /** When lists are statics and users cannot interact with them. When setting this to true:
     * no keyboard navigation will be handled, and `ul` role stay be implicit.
     * This prop is practically same as isControlledNavigation, just named differently */
    isStaticList?: boolean;
}

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

export const NOT_LIST_CHILD = 'data-list-exception';
const NAVIGATION_STEP_VALUES = {
    [LIST_NAVIGATION_DIRECTIONS.UP]: -1,
    [LIST_NAVIGATION_DIRECTIONS.DOWN]: 1,
};

export const List = React.forwardRef<HTMLUListElement, Props>(
    (
        {
            children,
            isDivided = false,
            doSelectOnNavigate = false,
            isControlledNavigation = false,
            isStaticList = false,
            ...rest
        },
        ref
    ) => {
        const [selectedIndex, setSelectedIndex] = React.useState<number>(-1);
        const [lastNavDirection, setLastNavDirection] = React.useState<'top' | 'bottom' | null>(
            null
        );
        const navigationElementRef = React.createRef();

        // set selectedIndex to first selectedItem that we can find
        React.useEffect(() => {
            if (!children) {
                return;
            }

            for (let i = 0; i < children.length; i += 1) {
                const child = children[i];
                if (!!child && !child.props[NOT_LIST_CHILD] && child.props.isSelected) {
                    setSelectedIndex(i);
                    break;
                }
            }
        }, [children]);

        // Scroll list if it's necessary to make the current item visible after keyboard navigation
        React.useLayoutEffect(() => {
            if (lastNavDirection) {
                scrollIntoViewIfNeeded(navigationElementRef.current, lastNavDirection);
            }
            setLastNavDirection(null);
        }, [navigationElementRef, lastNavDirection]);

        const getNextSelectedIndex = (keyCode) => {
            if (!children) {
                return -1;
            }

            const stepValue = NAVIGATION_STEP_VALUES[keyCode];
            const nextSelectedIndex = selectedIndex + stepValue;

            // Return 0 index if nextSelectedIndex has negative value or selectedIndex hasn't been updated before
            if (nextSelectedIndex < 0 || selectedIndex === -1) {
                return 0;
            }

            // Return last React.Children index if nextSelectedIndex is out of the right bound
            if (nextSelectedIndex >= children.length) {
                return children.length - 1;
            }

            // Return nextSelectedIndex without any changes for others cases
            return nextSelectedIndex;
        };

        const callOnClick = (index, e) => {
            if (!children) {
                return;
            }

            const child = children[index];
            if (child && child.props && child.props.onClick) {
                child.props.onClick(e);
            }
        };

        const handleKeyDown = (e) => {
            // Update selectedIndex with arrow navigation and make onNavigate function callback
            if (
                e.key === LIST_NAVIGATION_DIRECTIONS.UP ||
                e.key === LIST_NAVIGATION_DIRECTIONS.DOWN
            ) {
                const nextSelectedIndex = getNextSelectedIndex(e.key);

                if (selectedIndex !== nextSelectedIndex) {
                    e.preventDefault();
                    setSelectedIndex(nextSelectedIndex);

                    const direction = e.key === LIST_NAVIGATION_DIRECTIONS.UP ? 'top' : 'bottom';
                    setLastNavDirection(direction);

                    if (doSelectOnNavigate) {
                        callOnClick(nextSelectedIndex, e);
                    }
                }
            }

            if (e.key === ENTER_KEY) {
                callOnClick(selectedIndex, e);
            }
        };

        return isControlledNavigation || isStaticList ? (
            <ul {...rest} ref={ref} {...block({ isDivided, ...rest })}>
                {React.Children.map(children, (child) => {
                    if (child) {
                        return child.props[NOT_LIST_CHILD]
                            ? child
                            : React.cloneElement(
                                  child,
                                  elem('item', {
                                      children,
                                      elemClassName: child.props.className,
                                  })
                              );
                    }
                    return null;
                })}
            </ul>
        ) : (
            <ul
                {...rest}
                ref={ref}
                role="listbox"
                tabIndex="0"
                onKeyDown={handleKeyDown}
                {...block({ isDivided, ...rest })}
            >
                {React.Children.map(children, (child, index) => {
                    if (child) {
                        return child.props[NOT_LIST_CHILD]
                            ? child
                            : React.cloneElement(child, {
                                  ...elem('item', {
                                      children,
                                      elemClassName: child.props.className,
                                  }),
                                  ref: index === selectedIndex ? navigationElementRef : null,
                                  isHighlighted: index === selectedIndex,
                                  onClick: child.props.onClick
                                      ? (e) => {
                                            setSelectedIndex(index);
                                            child.props.onClick?.(e);
                                        }
                                      : undefined,
                              });
                    }
                    return null;
                })}
            </ul>
        );
    }
);

List.displayName = 'List';

1	import * as React from 'react';	15✔
2	import { EmptyElement } from '@textkernel/oneui/customTypes/types';
3	import { bem, scrollIntoViewIfNeeded } from '../../utils';	15✔
4	import { LIST_NAVIGATION_DIRECTIONS, ENTER_KEY } from '../../constants';	15✔
5	import styles from './List.scss';	15✔
6
7	export interface Props extends React.HTMLAttributes<HTMLUListElement> {
8	/** List items. They should be ListItem or li.
9	* If you want to add an element that is not part of the list, but should be rendered within it
10	* (e.g. an image to decorate the list) use `data-list-exception` as a prop to that child
11	*/
12	children: (React.ReactElement \| EmptyElement)[] \| null;
13	/** Adds dividing lines between the list items */
14	isDivided?: boolean;
15	/** Defines if selection should be made on navigate */
16	doSelectOnNavigate?: boolean;
17	/** manage keyboard navigation externally. This prop is practically same as isStaticList, just named differently */
18	isControlledNavigation?: boolean;
19	/** When lists are statics and users cannot interact with them. When setting this to true:
20	* no keyboard navigation will be handled, and `ul` role stay be implicit.
21	* This prop is practically same as isControlledNavigation, just named differently */
22	isStaticList?: boolean;
23	}
24
25	const { block, elem } = bem('List', styles);	15✔
26
27	export const NOT_LIST_CHILD = 'data-list-exception';	15✔
28	const NAVIGATION_STEP_VALUES = {	15✔
29	[LIST_NAVIGATION_DIRECTIONS.UP]: -1,
30	[LIST_NAVIGATION_DIRECTIONS.DOWN]: 1,
31	};
32
33	export const List = React.forwardRef<HTMLUListElement, Props>(	15✔
34	(
35	{
36	children,	597✔
37	isDivided = false,	597!
38	doSelectOnNavigate = false,	597✔
39	isControlledNavigation = false,	597✔
40	isStaticList = false,	597✔
41	...rest	597✔
42	},
43	ref
44	) => {
45	const [selectedIndex, setSelectedIndex] = React.useState<number>(-1);	597✔
46	const [lastNavDirection, setLastNavDirection] = React.useState<'top' \| 'bottom' \| null>(	597✔
47	null
48	);
49	const navigationElementRef = React.createRef();	597✔
50
51	// set selectedIndex to first selectedItem that we can find
52	React.useEffect(() => {	597✔
53	if (!children) {	309✔
54	return;	105✔
55	}
56
57	for (let i = 0; i < children.length; i += 1) {	204✔
58	const child = children[i];	169✔
59	if (!!child && !child.props[NOT_LIST_CHILD] && child.props.isSelected) {	169!
60	setSelectedIndex(i);	×
61	break;	×
62	}
63	}
64	}, [children]);
65
66	// Scroll list if it's necessary to make the current item visible after keyboard navigation
67	React.useLayoutEffect(() => {	597✔
68	if (lastNavDirection) {	469✔
69	scrollIntoViewIfNeeded(navigationElementRef.current, lastNavDirection);	14✔
70	}
71	setLastNavDirection(null);	469✔
72	}, [navigationElementRef, lastNavDirection]);
73
74	const getNextSelectedIndex = (keyCode) => {	597✔
75	if (!children) {	16!
76	return -1;	×
77	}
78
79	const stepValue = NAVIGATION_STEP_VALUES[keyCode];	16✔
80	const nextSelectedIndex = selectedIndex + stepValue;	16✔
81
82	// Return 0 index if nextSelectedIndex has negative value or selectedIndex hasn't been updated before
83	if (nextSelectedIndex < 0 \|\| selectedIndex === -1) {	16✔
84	return 0;	5✔
85	}
86
87	// Return last React.Children index if nextSelectedIndex is out of the right bound
88	if (nextSelectedIndex >= children.length) {	11✔
89	return children.length - 1;	1✔
90	}
91
92	// Return nextSelectedIndex without any changes for others cases
93	return nextSelectedIndex;	10✔
94	};
95
96	const callOnClick = (index, e) => {	597✔
97	if (!children) {	4!
98	return;	×
99	}
100
101	const child = children[index];	4✔
102	if (child && child.props && child.props.onClick) {	4✔
103	child.props.onClick(e);	4✔
104	}
105	};
106
107	const handleKeyDown = (e) => {	597✔
108	// Update selectedIndex with arrow navigation and make onNavigate function callback
109	if (	17✔
110	e.key === LIST_NAVIGATION_DIRECTIONS.UP \|\|	31✔
111	e.key === LIST_NAVIGATION_DIRECTIONS.DOWN
112	) {
113	const nextSelectedIndex = getNextSelectedIndex(e.key);	16✔
114
115	if (selectedIndex !== nextSelectedIndex) {	16✔
116	e.preventDefault();	14✔
117	setSelectedIndex(nextSelectedIndex);	14✔
118
119	const direction = e.key === LIST_NAVIGATION_DIRECTIONS.UP ? 'top' : 'bottom';	14✔
120	setLastNavDirection(direction);	14✔
121
122	if (doSelectOnNavigate) {	14✔
123	callOnClick(nextSelectedIndex, e);	3✔
124	}
125	}
126	}
127
128	if (e.key === ENTER_KEY) {	17✔
129	callOnClick(selectedIndex, e);	1✔
130	}
131	};
132
133	return isControlledNavigation \|\| isStaticList ? (	597✔
134	<ul {...rest} ref={ref} {...block({ isDivided, ...rest })}>
135	{React.Children.map(children, (child) => {
136	if (child) {	358✔
137	return child.props[NOT_LIST_CHILD]	358✔
138	? child
139	: React.cloneElement(
140	child,
141	elem('item', {
142	children,
143	elemClassName: child.props.className,
144	})
145	);
146	}
UNCOV 147	return null;	×
148	})}
149	</ul>
150	) : (
151	<ul
152	{...rest}
153	ref={ref}
154	role="listbox"
155	tabIndex="0"
156	onKeyDown={handleKeyDown}
157	{...block({ isDivided, ...rest })}
158	>
159	{React.Children.map(children, (child, index) => {
160	if (child) {	275✔
161	return child.props[NOT_LIST_CHILD]	274✔
162	? child
163	: React.cloneElement(child, {
164	...elem('item', {
165	children,
166	elemClassName: child.props.className,
167	}),
168	ref: index === selectedIndex ? navigationElementRef : null,	273✔
169	isHighlighted: index === selectedIndex,
170	onClick: child.props.onClick	273✔
171	? (e) => {
172	setSelectedIndex(index);	1✔
173	child.props.onClick?.(e);	1!
174	}
175	: undefined,
176	});
177	}
178	return null;	1✔
179	})}
180	</ul>
181	);
182	}
183	);
184
185	List.displayName = 'List';	15✔

textkernel / oneui / 11386254679

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