tenjin-ui-kit 0.3.74 → 0.3.76
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.
- package/common/hooks/apiHooks.js +91 -199
- package/common/hooks/newApiHook.js +127 -258
- package/common/utils/security/index.js +2 -2
- package/common/utils/security/securityConfig.js +1 -2
- package/components/Canvas.js +172 -101
- package/components/DragBox/index.js +21 -31
- package/components/InputWithChip/index.js +178 -83
- package/components/RightContext/index.js +17 -41
- package/components/WorkFlow.js +19 -29
- package/components/WorkFlowBuilder.js +32 -56
- package/components/alert/Style.js +11 -14
- package/components/alert/index.js +8 -14
- package/components/attachment/index.js +26 -31
- package/components/authenticationProvider/AuthError.js +3 -4
- package/components/authenticationProvider/AuthLoader.js +3 -4
- package/components/authenticationProvider/index.js +58 -130
- package/components/avatar/index.js +24 -23
- package/components/avatar/styles.js +76 -77
- package/components/breadCrumbs/index.js +64 -89
- package/components/breadCrumbs/style.js +1 -4
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/index.js +7 -6
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/style.js +5 -8
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewHeader/index.js +7 -6
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewContent/Index.js +8 -7
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/Index.js +8 -7
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/style.js +16 -19
- package/components/browsingTestCaseLayout/index.js +30 -46
- package/components/button/index.js +47 -58
- package/components/chatBotModal/index.js +40 -61
- package/components/checkBox/index.js +8 -10
- package/components/combobox/index.js +66 -100
- package/components/divider/index.js +9 -18
- package/components/editableField/index.js +19 -46
- package/components/error/index.js +6 -12
- package/components/errorBoundary/index.js +74 -98
- package/components/fileUploader/index.js +46 -58
- package/components/fileUploader/style.js +46 -49
- package/components/filter/ValueSelector.js +148 -243
- package/components/filter/index.js +43 -66
- package/components/iconButton/index.js +3 -4
- package/components/input/index.js +70 -90
- package/components/layout/index.js +36 -49
- package/components/layout/main/index.js +13 -14
- package/components/layout/main/style.js +11 -14
- package/components/layout/pageContent/index.js +8 -7
- package/components/layout/sidebar/FlatMenu.js +51 -47
- package/components/layout/sidebar/GroupedIconMenu.js +169 -194
- package/components/layout/sidebar/GroupedMenu.js +45 -50
- package/components/layout/sidebar/ProjectMenu.js +165 -185
- package/components/layout/sidebar/index.js +27 -26
- package/components/layout/sidebar/style.js +138 -143
- package/components/layout/topBar/ProjectTopbar.js +86 -119
- package/components/layout/topBar/UserAvatar.js +51 -65
- package/components/layout/topBar/index.js +23 -41
- package/components/loader/index.js +9 -12
- package/components/menu/index.js +23 -42
- package/components/modal/Modal.js +5 -6
- package/components/modal/index.js +16 -20
- package/components/modal/style.js +53 -56
- package/components/optionMenu/index.js +32 -47
- package/components/pagination/index.js +23 -43
- package/components/pagination/style.js +25 -28
- package/components/paginationUpdated/index.js +19 -26
- package/components/paper/index.js +20 -22
- package/components/paper/style.js +24 -27
- package/components/reactSelect/index.js +64 -97
- package/components/reactSelect/style.js +131 -151
- package/components/richTextEditor/index.js +24 -48
- package/components/select/GroupedSelect.js +56 -100
- package/components/select/SimpleSelect.js +59 -99
- package/components/select/index.js +56 -69
- package/components/simpleSelect/index.js +18 -22
- package/components/sort/index.js +23 -36
- package/components/switch/index.js +14 -15
- package/components/switch/style.js +29 -32
- package/components/switch/switch.js +30 -47
- package/components/table/ReactTable.js +59 -83
- package/components/table/SimpleTable.js +67 -91
- package/components/table/index.js +300 -206
- package/components/text/index.js +22 -30
- package/components/timeStamp/index.js +4 -6
- package/components/timeStamp/style.js +12 -15
- package/components/topBar/index.js +86 -102
- package/components/tree/index.js +30 -58
- package/components/tree/style.js +20 -23
- package/components/valuePicker/ValueSelector.js +78 -160
- package/components/valuePicker/index.js +30 -50
- package/components/wrapperLayout/layout/index.js +8 -7
- package/components/wrapperLayout/main/index.js +8 -7
- package/components/wrapperLayout/main/pageContainer/index.js +6 -5
- package/components/wrapperLayout/main/sideBar/index.js +171 -175
- package/components/wrapperLayout/main/sideBar/style.js +177 -183
- package/components/wrapperLayout/topBar/UserAvatar.js +6 -5
- package/components/wrapperLayout/topBar/avatar.js +15 -18
- package/components/wrapperLayout/topBar/index.js +115 -107
- package/components/wrapperLayout/topBar/menuIcon.js +6 -5
- package/components/wrapperLayout/topBar/style.js +63 -64
- package/http/index.js +92 -188
- package/index.js +53 -55
- package/package.json +6 -3
- package/templates/listPage/index.js +168 -196
- package/themes/default.js +5 -7
- package/themes/defaultSmall.js +2 -3
- package/themes/responsiveTheme.js +6 -8
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -10,49 +9,27 @@ var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
|
|
|
10
9
|
var _fa = require("react-icons/fa");
|
|
11
10
|
var _reactDom = require("react-dom");
|
|
12
11
|
var _text = _interopRequireDefault(require("../text"));
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
35
|
-
var triggerRef = React.useRef(null);
|
|
36
|
-
var dropdownRef = React.useRef(null);
|
|
37
|
-
var _React$useState = React.useState(""),
|
|
38
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
39
|
-
searchTerm = _React$useState2[0],
|
|
40
|
-
setSearchTerm = _React$useState2[1];
|
|
41
|
-
var _React$useState3 = React.useState(false),
|
|
42
|
-
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
43
|
-
isDropdownOpen = _React$useState4[0],
|
|
44
|
-
setIsDropdownOpen = _React$useState4[1];
|
|
45
|
-
var _React$useState5 = React.useState(propValue !== null && propValue !== void 0 ? propValue : defaultValue),
|
|
46
|
-
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
47
|
-
value = _React$useState6[0],
|
|
48
|
-
setValue = _React$useState6[1];
|
|
49
|
-
var _React$useState7 = React.useState(null),
|
|
50
|
-
_React$useState8 = _slicedToArray(_React$useState7, 2),
|
|
51
|
-
hoveredOption = _React$useState8[0],
|
|
52
|
-
setHoveredOption = _React$useState8[1];
|
|
53
|
-
var groupOptionsByPageTitle = React.useCallback(function (options) {
|
|
54
|
-
return options.reduce(function (grouped, option) {
|
|
55
|
-
var pageTitle = option === null || option === void 0 ? void 0 : option.pageTitle;
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
15
|
+
const GroupedSelect = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
options = [],
|
|
18
|
+
onChange,
|
|
19
|
+
value: propValue,
|
|
20
|
+
defaultValue,
|
|
21
|
+
fullWidth,
|
|
22
|
+
...rest
|
|
23
|
+
} = _ref;
|
|
24
|
+
const triggerRef = React.useRef(null);
|
|
25
|
+
const dropdownRef = React.useRef(null);
|
|
26
|
+
const [searchTerm, setSearchTerm] = React.useState("");
|
|
27
|
+
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
|
28
|
+
const [value, setValue] = React.useState(propValue ?? defaultValue);
|
|
29
|
+
const [hoveredOption, setHoveredOption] = React.useState(null);
|
|
30
|
+
const groupOptionsByPageTitle = React.useCallback(options => {
|
|
31
|
+
return options.reduce((grouped, option) => {
|
|
32
|
+
const pageTitle = option?.pageTitle;
|
|
56
33
|
if (!grouped[pageTitle]) {
|
|
57
34
|
grouped[pageTitle] = [];
|
|
58
35
|
}
|
|
@@ -60,62 +37,54 @@ var GroupedSelect = function GroupedSelect(_ref) {
|
|
|
60
37
|
return grouped;
|
|
61
38
|
}, {});
|
|
62
39
|
}, []);
|
|
63
|
-
|
|
40
|
+
const handleSearchChange = event => {
|
|
64
41
|
setSearchTerm(event.target.value);
|
|
65
42
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
return options.filter(
|
|
69
|
-
var _option$label, _option$pageTitle;
|
|
70
|
-
return (option === null || option === void 0 ? void 0 : (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase().includes(search)) || (option === null || option === void 0 ? void 0 : (_option$pageTitle = option.pageTitle) === null || _option$pageTitle === void 0 ? void 0 : _option$pageTitle.toLowerCase().includes(search));
|
|
71
|
-
});
|
|
43
|
+
const filteredOptions = React.useMemo(() => {
|
|
44
|
+
const search = searchTerm.toLowerCase();
|
|
45
|
+
return options.filter(option => option?.label?.toLowerCase().includes(search) || option?.pageTitle?.toLowerCase().includes(search));
|
|
72
46
|
}, [options, searchTerm]);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
var toggleDropdown = function toggleDropdown() {
|
|
77
|
-
setIsDropdownOpen(function (prev) {
|
|
78
|
-
return !prev;
|
|
79
|
-
});
|
|
47
|
+
const groupedOptions = React.useMemo(() => groupOptionsByPageTitle(filteredOptions), [filteredOptions, groupOptionsByPageTitle]);
|
|
48
|
+
const toggleDropdown = () => {
|
|
49
|
+
setIsDropdownOpen(prev => !prev);
|
|
80
50
|
};
|
|
81
|
-
|
|
51
|
+
const handleOptionClick = selectedValue => {
|
|
82
52
|
setValue(selectedValue);
|
|
83
53
|
setIsDropdownOpen(false);
|
|
84
54
|
setSearchTerm("");
|
|
85
|
-
onChange
|
|
55
|
+
onChange?.({
|
|
86
56
|
target: {
|
|
87
57
|
value: selectedValue
|
|
88
58
|
}
|
|
89
59
|
});
|
|
90
60
|
};
|
|
91
|
-
|
|
61
|
+
const handleCloseDropdown = () => {
|
|
92
62
|
setIsDropdownOpen(false);
|
|
93
63
|
};
|
|
94
64
|
|
|
95
65
|
// Keep internal value in sync if component is used as a controlled component
|
|
96
|
-
React.useEffect(
|
|
66
|
+
React.useEffect(() => {
|
|
97
67
|
if (propValue !== undefined) {
|
|
98
68
|
setValue(propValue);
|
|
99
69
|
}
|
|
100
70
|
}, [propValue]);
|
|
101
71
|
|
|
102
72
|
// Close dropdown when clicking outside
|
|
103
|
-
React.useEffect(
|
|
73
|
+
React.useEffect(() => {
|
|
104
74
|
if (!isDropdownOpen) {
|
|
105
75
|
return;
|
|
106
76
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
var clickedInsideDropdown = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.contains(target);
|
|
77
|
+
const handleOutsideClick = event => {
|
|
78
|
+
const target = event.target;
|
|
79
|
+
const clickedInsideTrigger = triggerRef.current?.contains(target);
|
|
80
|
+
const clickedInsideDropdown = dropdownRef.current?.contains(target);
|
|
112
81
|
if (clickedInsideTrigger || clickedInsideDropdown) {
|
|
113
82
|
return;
|
|
114
83
|
}
|
|
115
84
|
handleCloseDropdown();
|
|
116
85
|
};
|
|
117
86
|
document.addEventListener("mousedown", handleOutsideClick);
|
|
118
|
-
return
|
|
87
|
+
return () => {
|
|
119
88
|
document.removeEventListener("mousedown", handleOutsideClick);
|
|
120
89
|
};
|
|
121
90
|
}, [isDropdownOpen]);
|
|
@@ -144,15 +113,13 @@ var GroupedSelect = function GroupedSelect(_ref) {
|
|
|
144
113
|
style: {
|
|
145
114
|
flexGrow: 1
|
|
146
115
|
}
|
|
147
|
-
}, value ? options ===
|
|
148
|
-
return (option === null || option === void 0 ? void 0 : option.id) === value;
|
|
149
|
-
})) === null || _options$find === void 0 ? void 0 : _options$find.label : "Select Option"), /*#__PURE__*/React.createElement("div", null, isDropdownOpen ? /*#__PURE__*/React.createElement(_fa.FaCaretUp, null) : /*#__PURE__*/React.createElement(_fa.FaCaretDown, null)))), isDropdownOpen && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", {
|
|
116
|
+
}, value ? options?.find(option => option?.id === value)?.label : "Select Option"), /*#__PURE__*/React.createElement("div", null, isDropdownOpen ? /*#__PURE__*/React.createElement(_fa.FaCaretUp, null) : /*#__PURE__*/React.createElement(_fa.FaCaretDown, null)))), isDropdownOpen && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/React.createElement("div", {
|
|
150
117
|
ref: dropdownRef,
|
|
151
118
|
style: {
|
|
152
119
|
position: "absolute",
|
|
153
|
-
top:
|
|
154
|
-
left:
|
|
155
|
-
width:
|
|
120
|
+
top: `${triggerRef.current?.getBoundingClientRect().bottom + 8}px`,
|
|
121
|
+
left: `${triggerRef.current?.getBoundingClientRect().left}px`,
|
|
122
|
+
width: `${triggerRef.current?.offsetWidth}px`,
|
|
156
123
|
backgroundColor: "#fff",
|
|
157
124
|
border: "1px solid #ccc",
|
|
158
125
|
borderRadius: "4px",
|
|
@@ -182,10 +149,8 @@ var GroupedSelect = function GroupedSelect(_ref) {
|
|
|
182
149
|
borderRadius: "4px",
|
|
183
150
|
boxSizing: "border-box"
|
|
184
151
|
}
|
|
185
|
-
}), Object.entries(groupedOptions).map(
|
|
186
|
-
|
|
187
|
-
pageTitle = _ref3[0],
|
|
188
|
-
groupedPageOptions = _ref3[1];
|
|
152
|
+
}), Object.entries(groupedOptions).map(_ref2 => {
|
|
153
|
+
let [pageTitle, groupedPageOptions] = _ref2;
|
|
189
154
|
return /*#__PURE__*/React.createElement("div", {
|
|
190
155
|
key: pageTitle
|
|
191
156
|
}, /*#__PURE__*/React.createElement(_text.default, {
|
|
@@ -193,25 +158,17 @@ var GroupedSelect = function GroupedSelect(_ref) {
|
|
|
193
158
|
padding: "5px 10px"
|
|
194
159
|
},
|
|
195
160
|
semibold: true
|
|
196
|
-
}, pageTitle || "N/A"), groupedPageOptions.map(
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
},
|
|
208
|
-
style: {
|
|
209
|
-
padding: "8px 24px",
|
|
210
|
-
cursor: "pointer",
|
|
211
|
-
backgroundColor: value === (option === null || option === void 0 ? void 0 : option.id) ? "#f0f0f7" : hoveredOption === (option === null || option === void 0 ? void 0 : option.id) ? "#f5f5f5" : "transparent"
|
|
212
|
-
}
|
|
213
|
-
}, option === null || option === void 0 ? void 0 : option.label);
|
|
214
|
-
}));
|
|
161
|
+
}, pageTitle || "N/A"), groupedPageOptions.map(option => /*#__PURE__*/React.createElement("div", {
|
|
162
|
+
key: option?.id,
|
|
163
|
+
onClick: () => handleOptionClick(option.id),
|
|
164
|
+
onMouseEnter: () => setHoveredOption(option.id),
|
|
165
|
+
onMouseLeave: () => setHoveredOption(null),
|
|
166
|
+
style: {
|
|
167
|
+
padding: "8px 24px",
|
|
168
|
+
cursor: "pointer",
|
|
169
|
+
backgroundColor: value === option?.id ? "#f0f0f7" : hoveredOption === option?.id ? "#f5f5f5" : "transparent"
|
|
170
|
+
}
|
|
171
|
+
}, option?.label)));
|
|
215
172
|
}), Object.keys(groupedOptions).length === 0 && /*#__PURE__*/React.createElement("div", {
|
|
216
173
|
style: {
|
|
217
174
|
padding: "10px",
|
|
@@ -220,5 +177,4 @@ var GroupedSelect = function GroupedSelect(_ref) {
|
|
|
220
177
|
}
|
|
221
178
|
}, "No options found"))), document.body));
|
|
222
179
|
};
|
|
223
|
-
var _default = GroupedSelect;
|
|
224
|
-
exports.default = _default;
|
|
180
|
+
var _default = exports.default = GroupedSelect;
|
|
@@ -7,123 +7,90 @@ exports.default = void 0;
|
|
|
7
7
|
var _material = require("@mui/material");
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _text = _interopRequireDefault(require("../text"));
|
|
10
|
-
|
|
11
|
-
function
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
helperText = _ref.helperText,
|
|
35
|
-
isSearch = _ref.isSearch,
|
|
36
|
-
isClearOption = _ref.isClearOption,
|
|
37
|
-
loading = _ref.loading,
|
|
38
|
-
isSort = _ref.isSort,
|
|
39
|
-
placeholder = _ref.placeholder,
|
|
40
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
|
-
isSort = (_isSort = isSort) !== null && _isSort !== void 0 ? _isSort : true; //by default true
|
|
42
|
-
isSearch = (_isSearch = isSearch) !== null && _isSearch !== void 0 ? _isSearch : true; //by default true
|
|
43
|
-
isClearOption = (_isClearOption = isClearOption) !== null && _isClearOption !== void 0 ? _isClearOption : true; //by default true
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
const SimpleSelect = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
options,
|
|
16
|
+
errorMessage,
|
|
17
|
+
error,
|
|
18
|
+
fullWidth,
|
|
19
|
+
isDisabled,
|
|
20
|
+
label,
|
|
21
|
+
isRequired,
|
|
22
|
+
helperText,
|
|
23
|
+
isSearch,
|
|
24
|
+
isClearOption,
|
|
25
|
+
loading,
|
|
26
|
+
isSort,
|
|
27
|
+
placeholder,
|
|
28
|
+
// Add placeholder prop
|
|
29
|
+
...rest
|
|
30
|
+
} = _ref;
|
|
31
|
+
isSort = isSort ?? true; //by default true
|
|
32
|
+
isSearch = isSearch ?? true; //by default true
|
|
33
|
+
isClearOption = isClearOption ?? true; //by default true
|
|
44
34
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var _useState3 = (0, _react.useState)(false),
|
|
50
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
-
noDataAvailable = _useState4[0],
|
|
52
|
-
setNoDataAvailable = _useState4[1];
|
|
53
|
-
var validateChildren = function validateChildren(type, searchText) {
|
|
54
|
-
if (_typeof(type) !== "object") {
|
|
35
|
+
const [searchText, setSearchText] = (0, _react.useState)("");
|
|
36
|
+
const [noDataAvailable, setNoDataAvailable] = (0, _react.useState)(false);
|
|
37
|
+
const validateChildren = (type, searchText) => {
|
|
38
|
+
if (typeof type !== "object") {
|
|
55
39
|
return typeof type === "string" && type.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
|
|
56
40
|
}
|
|
57
|
-
if (
|
|
58
|
-
return type.props.children.some(
|
|
59
|
-
return validateChildren(data, searchText);
|
|
60
|
-
});
|
|
41
|
+
if (typeof type.props === "object" && Array.isArray(type.props.children)) {
|
|
42
|
+
return type.props.children.some(data => validateChildren(data, searchText));
|
|
61
43
|
}
|
|
62
44
|
return false;
|
|
63
45
|
};
|
|
64
|
-
|
|
46
|
+
const containsText = (text, searchText) => {
|
|
65
47
|
if (typeof text === "string" && typeof searchText === "string") {
|
|
66
48
|
return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
|
|
67
49
|
}
|
|
68
|
-
if (
|
|
69
|
-
return text.props.children.some(
|
|
70
|
-
return validateChildren(data, searchText);
|
|
71
|
-
});
|
|
50
|
+
if (typeof text === "object" && text.props && Array.isArray(text.props.children)) {
|
|
51
|
+
return text.props.children.some(data => validateChildren(data, searchText));
|
|
72
52
|
}
|
|
73
53
|
return false;
|
|
74
54
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
return containsText(option === null || option === void 0 ? void 0 : option.label, searchText);
|
|
78
|
-
});
|
|
55
|
+
const displayedOptions = (0, _react.useMemo)(() => {
|
|
56
|
+
const filteredOptions = options?.filter(option => containsText(option?.label, searchText));
|
|
79
57
|
if (isSearch) {
|
|
80
|
-
setNoDataAvailable(
|
|
58
|
+
setNoDataAvailable(filteredOptions?.length === 0);
|
|
81
59
|
}
|
|
82
60
|
|
|
83
61
|
// const sortedOptions = filteredOptions?.sort((a, b) =>
|
|
84
62
|
// a?.label?.localeCompare(b.label)
|
|
85
63
|
// );
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
64
|
+
const sortedOptions = filteredOptions?.slice().sort((a, b) => {
|
|
65
|
+
const labelA = typeof a.label === "string" ? a.label : findStringInChildren(a.label.props.children);
|
|
66
|
+
const labelB = typeof b.label === "string" ? b.label : findStringInChildren(b.label.props.children);
|
|
89
67
|
return labelA.localeCompare(labelB);
|
|
90
68
|
});
|
|
91
69
|
function findStringInChildren(children) {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
if (typeof child === "string") {
|
|
98
|
-
return child;
|
|
99
|
-
} else if (child.props && typeof child.props.children === "string") {
|
|
100
|
-
return child.props.children;
|
|
101
|
-
}
|
|
70
|
+
for (const child of children) {
|
|
71
|
+
if (typeof child === "string") {
|
|
72
|
+
return child;
|
|
73
|
+
} else if (child.props && typeof child.props.children === "string") {
|
|
74
|
+
return child.props.children;
|
|
102
75
|
}
|
|
103
|
-
} catch (err) {
|
|
104
|
-
_iterator.e(err);
|
|
105
|
-
} finally {
|
|
106
|
-
_iterator.f();
|
|
107
76
|
}
|
|
108
77
|
return "";
|
|
109
78
|
}
|
|
110
|
-
return (isSort ? sortedOptions : filteredOptions).map(
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
};
|
|
115
|
-
});
|
|
79
|
+
return (isSort ? sortedOptions : filteredOptions).map(option => ({
|
|
80
|
+
label: option?.label,
|
|
81
|
+
value: option?.value
|
|
82
|
+
}));
|
|
116
83
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
117
84
|
}, [options, searchText, isSearch]);
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
85
|
+
const recommendedOptions = isSearch ? displayedOptions : options;
|
|
86
|
+
let typingTimer;
|
|
87
|
+
const handleKeyDown = e => {
|
|
121
88
|
clearTimeout(typingTimer);
|
|
122
89
|
if (e.key !== "Escape") {
|
|
123
90
|
if (e.key !== "ArrowDown" && e.key !== "ArrowUp") {
|
|
124
91
|
e.stopPropagation();
|
|
125
92
|
}
|
|
126
|
-
typingTimer = setTimeout(
|
|
93
|
+
typingTimer = setTimeout(() => {
|
|
127
94
|
clearTimeout(typingTimer);
|
|
128
95
|
}, 500);
|
|
129
96
|
}
|
|
@@ -151,9 +118,7 @@ var SimpleSelect = function SimpleSelect(_ref) {
|
|
|
151
118
|
}
|
|
152
119
|
}, " * ") : "")), /*#__PURE__*/_react.default.createElement(_material.Select, _extends({}, rest, {
|
|
153
120
|
fullWidth: true,
|
|
154
|
-
onClose:
|
|
155
|
-
return setSearchText("");
|
|
156
|
-
},
|
|
121
|
+
onClose: () => setSearchText(""),
|
|
157
122
|
MenuProps: {
|
|
158
123
|
PaperProps: {
|
|
159
124
|
style: {
|
|
@@ -181,9 +146,7 @@ var SimpleSelect = function SimpleSelect(_ref) {
|
|
|
181
146
|
borderRadius: "4px"
|
|
182
147
|
},
|
|
183
148
|
placeholder: "Type to search...",
|
|
184
|
-
onChange:
|
|
185
|
-
return setSearchText(e.target.value);
|
|
186
|
-
},
|
|
149
|
+
onChange: e => setSearchText(e.target.value),
|
|
187
150
|
onKeyDown: handleKeyDown
|
|
188
151
|
}), isClearOption && !loading && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
|
|
189
152
|
value: ""
|
|
@@ -201,12 +164,9 @@ var SimpleSelect = function SimpleSelect(_ref) {
|
|
|
201
164
|
}
|
|
202
165
|
}, "Fetching Options...") : noDataAvailable ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
|
|
203
166
|
disabled: true
|
|
204
|
-
}, "No Data Available") : recommendedOptions
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
}, option.label);
|
|
209
|
-
})), error && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, errorMessage), helperText && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, helperText)));
|
|
167
|
+
}, "No Data Available") : recommendedOptions?.map(option => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
|
|
168
|
+
key: option.value,
|
|
169
|
+
value: option.value
|
|
170
|
+
}, option.label))), error && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, errorMessage), helperText && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, helperText)));
|
|
210
171
|
};
|
|
211
|
-
var _default = SimpleSelect;
|
|
212
|
-
exports.default = _default;
|
|
172
|
+
var _default = exports.default = SimpleSelect;
|