@rh-support/react-context 2.1.28 → 2.1.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAgBhF,OAAO,EAAE,kBAAkB,EAA8B,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAgBhF,OAAO,EAAE,kBAAkB,EAA8B,MAAM,wBAAwB,CAAC;AAQxF,UAAU,MAAO,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IACjD,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAkCD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAmS7C;kBAnSQ,uBAAuB;;;AAsShC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
|
|
@@ -14,6 +14,7 @@ import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-
|
|
|
14
14
|
import { LoadingIndicator, useFetch } from '@rh-support/components';
|
|
15
15
|
import { isUndefined } from 'lodash';
|
|
16
16
|
import isEmpty from 'lodash/isEmpty';
|
|
17
|
+
import isNull from 'lodash/isNull';
|
|
17
18
|
import uniqBy from 'lodash/uniqBy';
|
|
18
19
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
19
20
|
import { Trans, useTranslation } from 'react-i18next';
|
|
@@ -52,15 +53,19 @@ function AccountSelectorInternal(props) {
|
|
|
52
53
|
const [items, setItems] = useState([]);
|
|
53
54
|
const [selectedItems, setSelectedItems] = useState([]);
|
|
54
55
|
const [isOpen, setIsOpen] = useState(false);
|
|
56
|
+
const [isQueryChanged, setIsQueryChanged] = useState(false);
|
|
55
57
|
const [query, setQuery] = useState('');
|
|
56
58
|
const [focusedItemIndex, setFocusedItemIndex] = useState(null);
|
|
57
|
-
const abortControllerRef = useRef(undefined);
|
|
58
59
|
const textInputRef = useRef();
|
|
59
60
|
const inputGroupRef = useRef();
|
|
60
61
|
const { t } = useTranslation();
|
|
61
62
|
const bookmarkedAccountsDeduped = uniqBy(props.bookmarkedAccounts, (b) => b.accountNumber);
|
|
62
63
|
const pageSize = 20;
|
|
63
64
|
const [resultSize, setResultSize] = useState(pageSize);
|
|
65
|
+
const setQueryLabel = (selectedItems) => {
|
|
66
|
+
const item = !isEmpty(selectedItems) && !props.multiple ? selectedItems[0] : {};
|
|
67
|
+
setQuery(getDisplayName(item));
|
|
68
|
+
};
|
|
64
69
|
const itemsToRender = useMemo(() => (isEmpty(items) ? bookmarkedAccountsDeduped : items.slice(0, props.paginate ? resultSize : items.length)), [items, bookmarkedAccountsDeduped, props.paginate, resultSize]);
|
|
65
70
|
useEffect(() => {
|
|
66
71
|
if (!props.multiple) {
|
|
@@ -72,44 +77,47 @@ function AccountSelectorInternal(props) {
|
|
|
72
77
|
}
|
|
73
78
|
}, [props.selectedAccounts, props.multiple]);
|
|
74
79
|
useEffect(() => {
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
setQueryLabel(selectedItems);
|
|
81
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
82
|
}, [selectedItems, props.multiple]);
|
|
78
83
|
const onDisplayMoreClick = (e) => {
|
|
79
84
|
e.stopPropagation();
|
|
80
85
|
setResultSize((pre) => Math.min(pre + pageSize, items.length));
|
|
81
86
|
setIsOpen(true);
|
|
82
87
|
};
|
|
83
|
-
const dropdownOptions = useMemo(() =>
|
|
84
|
-
|
|
85
|
-
React.createElement(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
88
|
+
const dropdownOptions = useMemo(() => {
|
|
89
|
+
if (isFetching) {
|
|
90
|
+
return (React.createElement("div", { key: "searching", className: "pf-v5-u-px-md pf-v5-u-py-sm" },
|
|
91
|
+
React.createElement(Trans, null, "Searching...")));
|
|
92
|
+
}
|
|
93
|
+
if (isQueryChanged && isEmpty(items)) {
|
|
94
|
+
return (React.createElement("div", { key: "no-results", className: "pf-v5-u-px-md pf-v5-u-py-sm" },
|
|
95
|
+
React.createElement(Trans, null, "No results found")));
|
|
96
|
+
}
|
|
97
|
+
return [
|
|
98
|
+
...itemsToRender.map((item, index) => (React.createElement(SelectOption, { isFocused: focusedItemIndex === index, key: index, value: item, hasCheckbox: props.multiple, isSelected: selectedItems.some((account) => item.accountNumber === account.accountNumber) }, props.restrictedOnSubscriptionAbuse && item.subscriptionAbuse ? (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
|
|
99
|
+
React.createElement(FlexItem, { className: "form-instructions form-invalid" }, getDisplayName(item)),
|
|
100
|
+
React.createElement(FlexItem, { className: "form-instructions form-invalid pf-v5-u-text-nowrap pf-v5-u-pr-sm" },
|
|
101
|
+
React.createElement(InfoCircleIcon, null),
|
|
102
|
+
" ",
|
|
103
|
+
React.createElement(Trans, null, "Subscription abuse")))) : (React.createElement("span", null, getDisplayName(item)))))),
|
|
104
|
+
...(resultSize < items.length
|
|
105
|
+
? [
|
|
106
|
+
React.createElement("div", { className: "pf-v5-c-divider", role: "separator", key: "separator" }),
|
|
107
|
+
React.createElement(SelectOption, { key: 'diplay-more-option', onClick: onDisplayMoreClick, value: 'display-more' },
|
|
108
|
+
React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' } },
|
|
109
|
+
React.createElement(FlexItem, { className: '"pf-v5-c-button pf-m-link pf-m-inline' },
|
|
110
|
+
React.createElement(Trans, null, "Display additional results")))),
|
|
111
|
+
]
|
|
112
|
+
: []),
|
|
113
|
+
];
|
|
114
|
+
},
|
|
100
115
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
101
|
-
[items, bookmarkedAccountsDeduped]);
|
|
116
|
+
[items, bookmarkedAccountsDeduped, isFetching, itemsToRender, isQueryChanged]);
|
|
102
117
|
const fetchAccounts = (query) => __awaiter(this, void 0, void 0, function* () {
|
|
103
118
|
if (isEmpty(query)) {
|
|
104
119
|
return;
|
|
105
120
|
}
|
|
106
|
-
if (abortControllerRef.current !== undefined) {
|
|
107
|
-
// Cancel the previous request
|
|
108
|
-
abortControllerRef.current.abort();
|
|
109
|
-
}
|
|
110
|
-
// recreate a new AbortController for each call
|
|
111
|
-
let controller = new AbortController();
|
|
112
|
-
abortControllerRef.current = controller;
|
|
113
121
|
const fields = ['accountNumber', 'accountId', 'name', 'subscriptionAbuse'].join(',');
|
|
114
122
|
// Initialize Params
|
|
115
123
|
let params = {
|
|
@@ -125,11 +133,12 @@ function AccountSelectorInternal(props) {
|
|
|
125
133
|
params.accountNumberLike = query;
|
|
126
134
|
}
|
|
127
135
|
const queryParams = params;
|
|
128
|
-
const response = request && (yield request(queryParams
|
|
136
|
+
const response = request && (yield request(queryParams));
|
|
129
137
|
const options = response && response.items && response.items.length ? response.items : [];
|
|
130
138
|
setItems(options);
|
|
131
139
|
});
|
|
132
140
|
const onOuterClick = () => {
|
|
141
|
+
setQueryLabel(props.selectedAccounts || []);
|
|
133
142
|
setSelectedItems(props.selectedAccounts || []);
|
|
134
143
|
};
|
|
135
144
|
useEffect(() => {
|
|
@@ -164,6 +173,7 @@ function AccountSelectorInternal(props) {
|
|
|
164
173
|
};
|
|
165
174
|
const onFilter = (_event, value) => {
|
|
166
175
|
setQuery(value);
|
|
176
|
+
setIsQueryChanged(!isEmpty(value));
|
|
167
177
|
fetchAccounts(value);
|
|
168
178
|
setResultSize(pageSize);
|
|
169
179
|
setFocusedItemIndex(null);
|
|
@@ -176,10 +186,12 @@ function AccountSelectorInternal(props) {
|
|
|
176
186
|
e.stopPropagation();
|
|
177
187
|
setIsOpen(true);
|
|
178
188
|
setSelectedItems([]);
|
|
189
|
+
setItems([]);
|
|
190
|
+
setIsQueryChanged(false);
|
|
179
191
|
(_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
180
192
|
};
|
|
181
193
|
const onSelect = (selection) => {
|
|
182
|
-
if (selection === 'display-more' || isUndefined(selection))
|
|
194
|
+
if (selection === 'display-more' || isUndefined(selection) || isNull(selection))
|
|
183
195
|
return;
|
|
184
196
|
props.multiple ? onMultiAccountSelection(selection) : onSingleAccountSelection(selection);
|
|
185
197
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rh-support/react-context",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.30",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"registry": "https://registry.npmjs.org"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@cee-eng/hydrajs": "4.16.33",
|
|
41
41
|
"@patternfly/react-core": "5.1.1",
|
|
42
42
|
"@patternfly/react-icons": "5.1.1",
|
|
43
|
-
"@rh-support/components": "2.1.
|
|
43
|
+
"@rh-support/components": "2.1.27",
|
|
44
44
|
"@rh-support/types": "2.0.2",
|
|
45
45
|
"@rh-support/user-permissions": "2.1.19",
|
|
46
46
|
"@rh-support/utils": "2.1.12",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"defaults and supports es6-module",
|
|
86
86
|
"maintained node versions"
|
|
87
87
|
],
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "c70ed8ffa9b5dbe8abdd50e1549e92b8af2a6f27"
|
|
89
89
|
}
|