1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
|
6 | import { ContextSelectorToggle } from './ContextSelectorToggle';
|
7 | import { ContextSelectorMenuList } from './ContextSelectorMenuList';
|
8 | import { ContextSelectorContext } from './contextSelectorConstants';
|
9 | import { Button, ButtonVariant } from '../Button';
|
10 | import { TextInput } from '../TextInput';
|
11 | import { InputGroup } from '../InputGroup';
|
12 | import { KEY_CODES } from '../../helpers/constants';
|
13 | import { FocusTrap } from '../../helpers';
|
14 | import { Popper } from '../../helpers/Popper/Popper';
|
15 | import { getOUIAProps, getDefaultOUIAId } from '../../helpers';
|
16 |
|
17 | let currentId = 0;
|
18 | const newId = currentId++;
|
19 | export class ContextSelector extends React.Component {
|
20 | constructor(props) {
|
21 | super(props);
|
22 | this.parentRef = React.createRef();
|
23 | this.popperRef = React.createRef();
|
24 | this.onEnterPressed = (event) => {
|
25 | if (event.charCode === KEY_CODES.ENTER) {
|
26 | this.props.onSearchButtonClick();
|
27 | }
|
28 | };
|
29 | this.state = {
|
30 | ouiaStateId: getDefaultOUIAId(ContextSelector.displayName)
|
31 | };
|
32 | }
|
33 | render() {
|
34 | const toggleId = `pf-context-selector-toggle-id-${newId}`;
|
35 | const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
|
36 | const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
|
37 | const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap } = _a, props = __rest(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap"]);
|
38 | const menuContainer = (React.createElement("div", { className: css(styles.contextSelectorMenu) }, isOpen && (React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true } },
|
39 | React.createElement("div", { className: css(styles.contextSelectorMenuSearch) },
|
40 | React.createElement(InputGroup, null,
|
41 | React.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-labelledby": searchButtonId }),
|
42 | React.createElement(Button, { variant: ButtonVariant.control, "aria-label": searchButtonAriaLabel, id: searchButtonId, onClick: onSearchButtonClick },
|
43 | React.createElement(SearchIcon, { "aria-hidden": "true" })))),
|
44 | React.createElement(ContextSelectorContext.Provider, { value: { onSelect } },
|
45 | React.createElement(ContextSelectorMenuList, { isOpen: isOpen }, children)),
|
46 | footer))));
|
47 | const popperContainer = (React.createElement("div", Object.assign({ className: css(styles.contextSelector, isOpen && styles.modifiers.expanded, className), ref: this.popperRef }, props), isOpen && menuContainer));
|
48 | const mainContainer = (React.createElement("div", Object.assign({ className: css(styles.contextSelector, isOpen && styles.modifiers.expanded, isFullHeight && styles.modifiers.fullHeight, className), ref: this.parentRef }, getOUIAProps(ContextSelector.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props),
|
49 | screenReaderLabel && (React.createElement("span", { id: screenReaderLabelId, hidden: true }, screenReaderLabel)),
|
50 | React.createElement(ContextSelectorToggle, { onToggle: onToggle, isOpen: isOpen, toggleText: toggleText, id: toggleId, parentRef: menuAppendTo === 'inline' ? this.parentRef : this.popperRef, "aria-labelledby": `${screenReaderLabelId} ${toggleId}`, isPlain: isPlain, isText: isText }),
|
51 | isOpen && menuAppendTo === 'inline' && menuContainer));
|
52 | const getParentElement = () => {
|
53 | if (this.parentRef && this.parentRef.current) {
|
54 | return this.parentRef.current.parentElement;
|
55 | }
|
56 | return null;
|
57 | };
|
58 | return menuAppendTo === 'inline' ? (mainContainer) : (React.createElement(Popper, { trigger: mainContainer, popper: popperContainer, appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, isVisible: isOpen }));
|
59 | }
|
60 | }
|
61 | ContextSelector.displayName = 'ContextSelector';
|
62 | ContextSelector.defaultProps = {
|
63 | children: null,
|
64 | className: '',
|
65 | isOpen: false,
|
66 | onToggle: () => undefined,
|
67 | onSelect: () => undefined,
|
68 | screenReaderLabel: '',
|
69 | toggleText: '',
|
70 | searchButtonAriaLabel: 'Search menu items',
|
71 | searchInputValue: '',
|
72 | onSearchInputChange: () => undefined,
|
73 | searchInputPlaceholder: 'Search',
|
74 | onSearchButtonClick: () => undefined,
|
75 | menuAppendTo: 'inline',
|
76 | ouiaSafe: true,
|
77 | disableFocusTrap: false,
|
78 | footer: null,
|
79 | isPlain: false,
|
80 | isText: false
|
81 | };
|
82 |
|
\ | No newline at end of file |