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