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 formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
|
6 | import { DualListSelectorTree } from './DualListSelectorTree';
|
7 | import { getUniqueId } from '../../helpers';
|
8 | import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
|
9 | import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
|
10 | import { DualListSelectorList } from './DualListSelectorList';
|
11 | export const DualListSelectorPane = (_a) => {
|
12 | var { isChosen = false, className = '', status = '', actions, searchInput, children, onOptionSelect, onOptionCheck, title = '', options = [], selectedOptions = [], isSearchable = false, searchInputAriaLabel = '', onFilterUpdate, onSearchInputChanged, filterOption, id = getUniqueId('dual-list-selector-pane'), isDisabled = false } = _a, props = __rest(_a, ["isChosen", "className", "status", "actions", "searchInput", "children", "onOptionSelect", "onOptionCheck", "title", "options", "selectedOptions", "isSearchable", "searchInputAriaLabel", "onFilterUpdate", "onSearchInputChanged", "filterOption", "id", "isDisabled"]);
|
13 | const [input, setInput] = React.useState('');
|
14 | const { isTree } = React.useContext(DualListSelectorContext);
|
15 |
|
16 | const onChange = (e) => {
|
17 | const newValue = e.target.value;
|
18 | let filtered;
|
19 | if (isTree) {
|
20 | filtered = options
|
21 | .map(opt => Object.assign({}, opt))
|
22 | .filter(item => filterInput(item, newValue));
|
23 | }
|
24 | else {
|
25 | filtered = options.filter(option => {
|
26 | if (displayOption(option)) {
|
27 | return option;
|
28 | }
|
29 | });
|
30 | }
|
31 | onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');
|
32 | if (onSearchInputChanged) {
|
33 | onSearchInputChanged(newValue, e);
|
34 | }
|
35 | setInput(newValue);
|
36 | };
|
37 |
|
38 | const filterInput = (item, input) => {
|
39 | if (filterOption) {
|
40 | return filterOption(item, input);
|
41 | }
|
42 | else {
|
43 | if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
|
44 | return true;
|
45 | }
|
46 | }
|
47 | if (item.children) {
|
48 | return ((item.children = item.children.map(opt => Object.assign({}, opt)).filter(child => filterInput(child, input)))
|
49 | .length > 0);
|
50 | }
|
51 | };
|
52 |
|
53 | const displayOption = (option) => {
|
54 | if (filterOption) {
|
55 | return filterOption(option, input);
|
56 | }
|
57 | else {
|
58 | return option
|
59 | .toString()
|
60 | .toLowerCase()
|
61 | .includes(input.toLowerCase());
|
62 | }
|
63 | };
|
64 | return (React.createElement("div", Object.assign({ className: css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className) }, props),
|
65 | title && (React.createElement("div", { className: css(styles.dualListSelectorHeader) },
|
66 | React.createElement("div", { className: "pf-c-dual-list-selector__title" },
|
67 | React.createElement("div", { className: css(styles.dualListSelectorTitleText) }, title)))),
|
68 | (actions || searchInput || isSearchable) && (React.createElement("div", { className: css(styles.dualListSelectorTools) },
|
69 | (isSearchable || searchInput) && (React.createElement("div", { className: css(styles.dualListSelectorToolsFilter) }, searchInput ? (searchInput) : (React.createElement("input", { className: css(formStyles.formControl, formStyles.modifiers.search), type: "search", onChange: isDisabled ? undefined : onChange, "aria-label": searchInputAriaLabel, disabled: isDisabled })))),
|
70 | actions && React.createElement("div", { className: css(styles.dualListSelectorToolsActions) }, actions))),
|
71 | status && (React.createElement("div", { className: css(styles.dualListSelectorStatus) },
|
72 | React.createElement("div", { className: css(styles.dualListSelectorStatusText), id: `${id}-status` }, status))),
|
73 | React.createElement(DualListSelectorPaneContext.Provider, { value: { isChosen } },
|
74 | !isTree && (React.createElement(DualListSelectorListWrapper, { "aria-labelledby": `${id}-status`, options: options, selectedOptions: selectedOptions, onOptionSelect: (e, index, id) => onOptionSelect(e, index, isChosen, id), displayOption: displayOption, id: `${id}-list`, isDisabled: isDisabled }, children)),
|
75 | isTree && (React.createElement(DualListSelectorListWrapper, { "aria-labelledby": `${id}-status`, id: `${id}-list` }, options.length > 0 ? (React.createElement(DualListSelectorList, null,
|
76 | React.createElement(DualListSelectorTree, { data: isSearchable
|
77 | ? options
|
78 | .map(opt => Object.assign({}, opt))
|
79 | .filter(item => filterInput(item, input))
|
80 | : options, onOptionCheck: onOptionCheck, id: `${id}-tree`, isDisabled: isDisabled }))) : (children))))));
|
81 | };
|
82 | DualListSelectorPane.displayName = 'DualListSelectorPane';
|
83 |
|
\ | No newline at end of file |