1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.AdvancedSearchMenu = void 0;
|
4 | const tslib_1 = require("tslib");
|
5 | const React = tslib_1.__importStar(require("react"));
|
6 | const search_input_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/SearchInput/search-input"));
|
7 | const Button_1 = require("../Button");
|
8 | const Form_1 = require("../Form");
|
9 | const TextInput_1 = require("../TextInput");
|
10 | const helpers_1 = require("../../helpers");
|
11 | const AdvancedSearchMenu = ({ parentRef, parentInputRef, value = '', attributes = [], formAdditionalItems, hasWordsAttrLabel = 'Has words', advancedSearchDelimiter, getAttrValueMap, onChange, onSearch, onClear, resetButtonLabel = 'Reset', submitSearchButtonLabel = 'Search', isSearchMenuOpen, onToggleAdvancedMenu }) => {
|
12 | const firstAttrRef = React.useRef(null);
|
13 | const [putFocusBackOnInput, setPutFocusBackOnInput] = React.useState(false);
|
14 | React.useEffect(() => {
|
15 | if (attributes.length > 0 && !advancedSearchDelimiter) {
|
16 |
|
17 | console.error('AdvancedSearchMenu: An advancedSearchDelimiter prop is required when advanced search attributes are provided using the attributes prop');
|
18 | }
|
19 | });
|
20 | React.useEffect(() => {
|
21 | if (isSearchMenuOpen && firstAttrRef && firstAttrRef.current) {
|
22 | firstAttrRef.current.focus();
|
23 | setPutFocusBackOnInput(true);
|
24 | }
|
25 | else if (!isSearchMenuOpen && putFocusBackOnInput && parentInputRef && parentInputRef.current) {
|
26 | parentInputRef.current.focus();
|
27 | }
|
28 | }, [isSearchMenuOpen]);
|
29 | React.useEffect(() => {
|
30 | document.addEventListener('mousedown', onDocClick);
|
31 | document.addEventListener('touchstart', onDocClick);
|
32 | document.addEventListener('keydown', onEscPress);
|
33 | return function cleanup() {
|
34 | document.removeEventListener('mousedown', onDocClick);
|
35 | document.removeEventListener('touchstart', onDocClick);
|
36 | document.removeEventListener('keydown', onEscPress);
|
37 | };
|
38 | });
|
39 | const onDocClick = (event) => {
|
40 | const clickedWithinSearchInput = parentRef && parentRef.current.contains(event.target);
|
41 | if (isSearchMenuOpen && !clickedWithinSearchInput) {
|
42 | onToggleAdvancedMenu(event);
|
43 | }
|
44 | };
|
45 | const onEscPress = (event) => {
|
46 | const keyCode = event.keyCode || event.which;
|
47 | if (isSearchMenuOpen &&
|
48 | keyCode === helpers_1.KEY_CODES.ESCAPE_KEY &&
|
49 | parentRef &&
|
50 | parentRef.current.contains(event.target)) {
|
51 | onToggleAdvancedMenu(event);
|
52 | if (parentInputRef) {
|
53 | parentInputRef.current.focus();
|
54 | }
|
55 | }
|
56 | };
|
57 | const onSearchHandler = (event) => {
|
58 | event.preventDefault();
|
59 | if (onSearch) {
|
60 | onSearch(value, event, getAttrValueMap());
|
61 | }
|
62 | if (isSearchMenuOpen) {
|
63 | onToggleAdvancedMenu(event);
|
64 | }
|
65 | };
|
66 | const handleValueChange = (attribute, newValue, event) => {
|
67 | const newMap = getAttrValueMap();
|
68 | newMap[attribute] = newValue;
|
69 | let updatedValue = '';
|
70 | Object.entries(newMap).forEach(([k, v]) => {
|
71 | if (v.trim() !== '') {
|
72 | if (k !== 'haswords') {
|
73 | updatedValue = `${updatedValue} ${k}${advancedSearchDelimiter}${v}`;
|
74 | }
|
75 | else {
|
76 | updatedValue = `${updatedValue} ${v}`;
|
77 | }
|
78 | }
|
79 | });
|
80 | updatedValue = updatedValue.replace(/^\s+/g, '');
|
81 | if (onChange) {
|
82 | onChange(updatedValue, event);
|
83 | }
|
84 | };
|
85 | const getValue = (attribute) => {
|
86 | const map = getAttrValueMap();
|
87 | return map.hasOwnProperty(attribute) ? map[attribute] : '';
|
88 | };
|
89 | const buildFormGroups = () => {
|
90 | const formGroups = [];
|
91 | attributes.forEach((attribute, index) => {
|
92 | const display = typeof attribute === 'string' ? attribute : attribute.display;
|
93 | const queryAttr = typeof attribute === 'string' ? attribute : attribute.attr;
|
94 | if (index === 0) {
|
95 | formGroups.push(React.createElement(Form_1.FormGroup, { label: display, fieldId: `${queryAttr}_${index}`, key: `${attribute}_${index}` },
|
96 | React.createElement(TextInput_1.TextInput, { ref: firstAttrRef, type: "text", id: `${queryAttr}_${index}`, value: getValue(queryAttr), onChange: (value, evt) => handleValueChange(queryAttr, value, evt) })));
|
97 | }
|
98 | else {
|
99 | formGroups.push(React.createElement(Form_1.FormGroup, { label: display, fieldId: `${queryAttr}_${index}`, key: `${attribute}_${index}` },
|
100 | React.createElement(TextInput_1.TextInput, { type: "text", id: `${queryAttr}_${index}`, value: getValue(queryAttr), onChange: (value, evt) => handleValueChange(queryAttr, value, evt) })));
|
101 | }
|
102 | });
|
103 | formGroups.push(React.createElement(helpers_1.GenerateId, { key: 'hasWords' }, randomId => (React.createElement(Form_1.FormGroup, { label: hasWordsAttrLabel, fieldId: randomId },
|
104 | React.createElement(TextInput_1.TextInput, { type: "text", id: randomId, value: getValue('haswords'), onChange: (value, evt) => handleValueChange('haswords', value, evt) })))));
|
105 | return formGroups;
|
106 | };
|
107 | return isSearchMenuOpen ? (React.createElement("div", { className: search_input_1.default.searchInputMenu },
|
108 | React.createElement("div", { className: search_input_1.default.searchInputMenuBody },
|
109 | React.createElement(Form_1.Form, null,
|
110 | buildFormGroups(),
|
111 | formAdditionalItems ? formAdditionalItems : null,
|
112 | React.createElement(Form_1.ActionGroup, null,
|
113 | React.createElement(Button_1.Button, { variant: "primary", type: "submit", onClick: onSearchHandler }, submitSearchButtonLabel),
|
114 | !!onClear && (React.createElement(Button_1.Button, { variant: "link", type: "reset", onClick: onClear }, resetButtonLabel))))))) : null;
|
115 | };
|
116 | exports.AdvancedSearchMenu = AdvancedSearchMenu;
|
117 | exports.AdvancedSearchMenu.displayName = 'SearchInput';
|
118 |
|
\ | No newline at end of file |