1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import { getUniqueId, handleArrows } from '../../helpers';
|
6 | import { DualListSelectorList } from './DualListSelectorList';
|
7 | import { DualListSelectorContext, DualListSelectorListContext } from './DualListSelectorContext';
|
8 | export const DualListSelectorListWrapperBase = (_a) => {
|
9 | var { className, children, 'aria-labelledby': ariaLabelledBy, innerRef, options = [], selectedOptions = [], onOptionSelect, displayOption, id = getUniqueId('dual-list-selector-list'), isDisabled = false } = _a, props = __rest(_a, ["className", "children", 'aria-labelledby', "innerRef", "options", "selectedOptions", "onOptionSelect", "displayOption", "id", "isDisabled"]);
|
10 | const [focusedOption, setFocusedOption] = React.useState('');
|
11 | const menuRef = innerRef || React.useRef(null);
|
12 | const { isTree } = React.useContext(DualListSelectorContext);
|
13 |
|
14 |
|
15 | const handleKeys = (event) => {
|
16 | if (!menuRef.current ||
|
17 | (menuRef.current !== event.target.closest('.pf-c-dual-list-selector__menu') &&
|
18 | !Array.from(menuRef.current.getElementsByClassName('pf-c-dual-list-selector__menu')).includes(event.target.closest('.pf-c-dual-list-selector__menu')))) {
|
19 | return;
|
20 | }
|
21 | event.stopImmediatePropagation();
|
22 | const validOptions = isTree
|
23 | ? Array.from(menuRef.current.querySelectorAll('.pf-c-dual-list-selector__item-toggle, .pf-c-dual-list-selector__item-check > input'))
|
24 | : Array.from(menuRef.current.getElementsByTagName('LI')).filter(el => !el.classList.contains('pf-m-disabled'));
|
25 | const activeElement = document.activeElement;
|
26 | handleArrows(event, validOptions, (element) => activeElement.contains(element), (element) => {
|
27 | if (element.classList.contains('.pf-c-dual-list-selector__list-item')) {
|
28 | setFocusedOption(element.id);
|
29 | }
|
30 | else {
|
31 | setFocusedOption(element.closest('.pf-c-dual-list-selector__list-item').id);
|
32 | }
|
33 | return element;
|
34 | }, ['.pf-c-dual-list-selector__item-toggle', '.pf-c-dual-list-selector__item-check > input'], undefined, false, false, false);
|
35 | };
|
36 | React.useEffect(() => {
|
37 | window.addEventListener('keydown', handleKeys);
|
38 | return () => {
|
39 | window.removeEventListener('keydown', handleKeys);
|
40 | };
|
41 | }, [menuRef.current]);
|
42 | return (React.createElement("div", Object.assign({ className: css(styles.dualListSelectorMenu, className), ref: menuRef, tabIndex: 0 }, props),
|
43 | React.createElement(DualListSelectorListContext.Provider, { value: {
|
44 | setFocusedOption,
|
45 | isTree,
|
46 | focusedOption,
|
47 | ariaLabelledBy,
|
48 | displayOption,
|
49 | selectedOptions,
|
50 | id,
|
51 | options,
|
52 | onOptionSelect,
|
53 | isDisabled
|
54 | } }, children ? children : React.createElement(DualListSelectorList, null))));
|
55 | };
|
56 | DualListSelectorListWrapperBase.displayName = 'DualListSelectorListWrapperBase';
|
57 | export const DualListSelectorListWrapper = React.forwardRef((props, ref) => (React.createElement(DualListSelectorListWrapperBase, Object.assign({ innerRef: ref }, props))));
|
58 | DualListSelectorListWrapper.displayName = 'DualListSelectorListWrapper';
|
59 |
|
\ | No newline at end of file |