1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import { Button, ButtonVariant } from '../Button';
|
6 | import { Badge } from '../Badge';
|
7 | import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
|
8 | import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
|
9 | import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
10 | import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
|
11 | import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
|
12 | import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
|
13 | import { InputGroup } from '../InputGroup';
|
14 | import { AdvancedSearchMenu } from './AdvancedSearchMenu';
|
15 | const SearchInputBase = (_a) => {
|
16 | var { className, value = '', attributes = [], formAdditionalItems, hasWordsAttrLabel = 'Has words', advancedSearchDelimiter, placeholder, hint, onChange, onSearch, onClear, onToggleAdvancedSearch, isAdvancedSearchOpen, resultsCount, onNextClick, onPreviousClick, innerRef, 'aria-label': ariaLabel = 'Search input', resetButtonLabel = 'Reset', openMenuButtonAriaLabel = 'Open advanced search', submitSearchButtonLabel = 'Search', isDisabled = false } = _a, props = __rest(_a, ["className", "value", "attributes", "formAdditionalItems", "hasWordsAttrLabel", "advancedSearchDelimiter", "placeholder", "hint", "onChange", "onSearch", "onClear", "onToggleAdvancedSearch", "isAdvancedSearchOpen", "resultsCount", "onNextClick", "onPreviousClick", "innerRef", 'aria-label', "resetButtonLabel", "openMenuButtonAriaLabel", "submitSearchButtonLabel", "isDisabled"]);
|
17 | const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
|
18 | const [searchValue, setSearchValue] = React.useState(value);
|
19 | const searchInputRef = React.useRef(null);
|
20 | const searchInputInputRef = innerRef || React.useRef(null);
|
21 | React.useEffect(() => {
|
22 | setSearchValue(value);
|
23 | }, [value]);
|
24 | React.useEffect(() => {
|
25 | if (attributes.length > 0 && !advancedSearchDelimiter) {
|
26 |
|
27 | console.error('An advancedSearchDelimiter prop is required when advanced search attributes are provided using the attributes prop');
|
28 | }
|
29 | });
|
30 | React.useEffect(() => {
|
31 | setIsSearchMenuOpen(isAdvancedSearchOpen);
|
32 | }, [isAdvancedSearchOpen]);
|
33 | const onChangeHandler = (event) => {
|
34 | if (onChange) {
|
35 | onChange(event.currentTarget.value, event);
|
36 | }
|
37 | setSearchValue(event.currentTarget.value);
|
38 | };
|
39 | const onToggle = (e) => {
|
40 | const isOpen = !isSearchMenuOpen;
|
41 | setIsSearchMenuOpen(isOpen);
|
42 | if (onToggleAdvancedSearch) {
|
43 | onToggleAdvancedSearch(e, isOpen);
|
44 | }
|
45 | };
|
46 | const onSearchHandler = (event) => {
|
47 | event.preventDefault();
|
48 | if (onSearch) {
|
49 | onSearch(value, event, getAttrValueMap());
|
50 | }
|
51 | setIsSearchMenuOpen(false);
|
52 | };
|
53 | const getAttrValueMap = () => {
|
54 | const attrValue = {};
|
55 | const pairs = searchValue.split(' ');
|
56 | pairs.map(pair => {
|
57 | const splitPair = pair.split(advancedSearchDelimiter);
|
58 | if (splitPair.length === 2) {
|
59 | attrValue[splitPair[0]] = splitPair[1];
|
60 | }
|
61 | else if (splitPair.length === 1) {
|
62 | attrValue.haswords = attrValue.hasOwnProperty('haswords')
|
63 | ? `${attrValue.haswords} ${splitPair[0]}`
|
64 | : splitPair[0];
|
65 | }
|
66 | });
|
67 | return attrValue;
|
68 | };
|
69 | const onEnter = (event) => {
|
70 | if (event.key === 'Enter') {
|
71 | onSearchHandler(event);
|
72 | }
|
73 | };
|
74 | const onClearInput = (e) => {
|
75 | if (onClear) {
|
76 | onClear(e);
|
77 | }
|
78 | if (searchInputInputRef && searchInputInputRef.current) {
|
79 | searchInputInputRef.current.focus();
|
80 | }
|
81 | };
|
82 | return (React.createElement("div", Object.assign({ className: css(className, styles.searchInput), ref: searchInputRef }, props),
|
83 | React.createElement(InputGroup, null,
|
84 | React.createElement("div", { className: css(styles.searchInputBar) },
|
85 | React.createElement("span", { className: css(styles.searchInputText) },
|
86 | React.createElement("span", { className: css(styles.searchInputIcon) },
|
87 | React.createElement(SearchIcon, null)),
|
88 | hint && (React.createElement("input", { className: css(styles.searchInputTextInput, styles.modifiers.hint), type: "text", disabled: true, "aria-hidden": "true", value: hint })),
|
89 | React.createElement("input", { ref: searchInputInputRef, className: css(styles.searchInputTextInput), value: searchValue, placeholder: placeholder, "aria-label": ariaLabel, onKeyDown: onEnter, onChange: onChangeHandler, disabled: isDisabled })),
|
90 | value && (React.createElement("span", { className: css(styles.searchInputUtilities) },
|
91 | resultsCount && (React.createElement("span", { className: css(styles.searchInputCount) },
|
92 | React.createElement(Badge, { isRead: true }, resultsCount))),
|
93 | !!onNextClick && !!onPreviousClick && (React.createElement("span", { className: css(styles.searchInputNav) },
|
94 | React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": "Previous", isDisabled: isDisabled, onClick: onPreviousClick },
|
95 | React.createElement(AngleUpIcon, null)),
|
96 | React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": "Next", isDisabled: isDisabled, onClick: onNextClick },
|
97 | React.createElement(AngleDownIcon, null)))),
|
98 | !!onClear && (React.createElement("span", { className: "pf-c-search-input__clear" },
|
99 | React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled, "aria-label": resetButtonLabel, onClick: onClearInput },
|
100 | React.createElement(TimesIcon, null))))))),
|
101 | (attributes.length > 0 || onToggleAdvancedSearch) && (React.createElement(Button, { className: isSearchMenuOpen && 'pf-m-expanded', variant: ButtonVariant.control, "aria-label": openMenuButtonAriaLabel, onClick: onToggle, isDisabled: isDisabled, "aria-expanded": isSearchMenuOpen },
|
102 | React.createElement(CaretDownIcon, null))),
|
103 | !!onSearch && (React.createElement(Button, { type: "submit", variant: ButtonVariant.control, "aria-label": submitSearchButtonLabel, onClick: onSearchHandler, isDisabled: isDisabled },
|
104 | React.createElement(ArrowRightIcon, null)))),
|
105 | attributes.length > 0 && (React.createElement(AdvancedSearchMenu, { value: value, parentRef: searchInputRef, parentInputRef: searchInputInputRef, onSearch: onSearch, onClear: onClear, onChange: onChange, onToggleAdvancedMenu: onToggle, resetButtonLabel: resetButtonLabel, submitSearchButtonLabel: submitSearchButtonLabel, attributes: attributes, formAdditionalItems: formAdditionalItems, hasWordsAttrLabel: hasWordsAttrLabel, advancedSearchDelimiter: advancedSearchDelimiter, getAttrValueMap: getAttrValueMap, isSearchMenuOpen: isSearchMenuOpen }))));
|
106 | };
|
107 | SearchInputBase.displayName = 'SearchInputBase';
|
108 | export const SearchInput = React.forwardRef((props, ref) => (React.createElement(SearchInputBase, Object.assign({}, props, { innerRef: ref }))));
|
109 | SearchInput.displayName = 'SearchInput';
|
110 |
|
\ | No newline at end of file |