@fixefy/fixefy-ui-components 0.1.72 → 0.1.73
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.
|
@@ -14,11 +14,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
|
14
14
|
const _iconsmaterial = require("@mui/icons-material");
|
|
15
15
|
const _material = require("@mui/material");
|
|
16
16
|
const _FxChip = require("../FxChip");
|
|
17
|
+
const _FxIcon = require("../FxIcon");
|
|
17
18
|
const _graphqltag = require("graphql-tag");
|
|
18
19
|
const _dropdownstyles = require("./styles/dropdown.styles");
|
|
19
20
|
const _helpers = require("./helpers/helpers");
|
|
20
21
|
const _client = require("@apollo/client");
|
|
21
|
-
const _FxIcon = require("../FxIcon");
|
|
22
22
|
const _nookies = require("nookies");
|
|
23
23
|
function _define_property(obj, key, value) {
|
|
24
24
|
if (key in obj) {
|
|
@@ -113,33 +113,6 @@ function _object_spread_props(target, source) {
|
|
|
113
113
|
}
|
|
114
114
|
return target;
|
|
115
115
|
}
|
|
116
|
-
function _object_without_properties(source, excluded) {
|
|
117
|
-
if (source == null) return {};
|
|
118
|
-
var target = _object_without_properties_loose(source, excluded);
|
|
119
|
-
var key, i;
|
|
120
|
-
if (Object.getOwnPropertySymbols) {
|
|
121
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
122
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
123
|
-
key = sourceSymbolKeys[i];
|
|
124
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
125
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
126
|
-
target[key] = source[key];
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
return target;
|
|
130
|
-
}
|
|
131
|
-
function _object_without_properties_loose(source, excluded) {
|
|
132
|
-
if (source == null) return {};
|
|
133
|
-
var target = {};
|
|
134
|
-
var sourceKeys = Object.keys(source);
|
|
135
|
-
var key, i;
|
|
136
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
137
|
-
key = sourceKeys[i];
|
|
138
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
139
|
-
target[key] = source[key];
|
|
140
|
-
}
|
|
141
|
-
return target;
|
|
142
|
-
}
|
|
143
116
|
const icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
|
|
144
117
|
fontSize: "small"
|
|
145
118
|
});
|
|
@@ -148,34 +121,20 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
|
|
|
148
121
|
});
|
|
149
122
|
const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
|
|
150
123
|
var _props_styles;
|
|
151
|
-
const {
|
|
124
|
+
const { onChange, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
|
|
152
125
|
const ref = (0, _react.useRef)(null);
|
|
153
126
|
const theme = (0, _material.useTheme)();
|
|
154
|
-
const [
|
|
127
|
+
const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
|
|
155
128
|
const [options, setOptions] = (0, _react.useState)([]);
|
|
156
|
-
const [loadingData, setLoadingData] = (0, _react.useState)(false);
|
|
157
129
|
const [reason, setReason] = (0, _react.useState)('init');
|
|
158
130
|
const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
|
|
159
131
|
const [searchValue, setSearchValue] = (0, _react.useState)(null);
|
|
160
|
-
const [hasClearBtn, setHasClearBtn] = (0, _react.useState)(false);
|
|
161
132
|
const [page, setPage] = (0, _react.useState)(1);
|
|
162
133
|
const [prevPage, setPrevPage] = (0, _react.useState)(0);
|
|
163
134
|
const pageSize = 20;
|
|
164
135
|
const { method_name } = variables;
|
|
165
136
|
const ws = (0, _nookies.parseCookies)().ws;
|
|
166
|
-
|
|
167
|
-
let storedFilters = sessionStorage.getItem(query) || undefined;
|
|
168
|
-
if (storedFilters) {
|
|
169
|
-
storedFilters = JSON.parse(storedFilters);
|
|
170
|
-
if (storedFilters === null || storedFilters === void 0 ? void 0 : storedFilters[name]) {
|
|
171
|
-
const storedOperator = Object.keys(storedFilters[name])[0];
|
|
172
|
-
setDisplayedValue(storedFilters[name][storedOperator]);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}, [
|
|
176
|
-
name,
|
|
177
|
-
query
|
|
178
|
-
]);
|
|
137
|
+
const isLocal = fetcher.query.loc;
|
|
179
138
|
const getWhere = ()=>{
|
|
180
139
|
if (variables.method_name == 'workspace') {
|
|
181
140
|
return searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
|
|
@@ -194,87 +153,92 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
194
153
|
}) : _object_spread({}, fetcher.queryOptions.variables.where);
|
|
195
154
|
}
|
|
196
155
|
};
|
|
197
|
-
const
|
|
198
|
-
const [fetch, { data }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
|
|
156
|
+
const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
|
|
199
157
|
variables: _object_spread_props(_object_spread({}, fetcher.queryOptions.variables), {
|
|
200
158
|
where: getWhere(),
|
|
201
159
|
skip: page * pageSize - pageSize,
|
|
202
160
|
limit: pageSize
|
|
203
161
|
})
|
|
204
162
|
}));
|
|
163
|
+
(0, _react.useEffect)(()=>{
|
|
164
|
+
let storedFilters = sessionStorage.getItem(query) || undefined;
|
|
165
|
+
if (storedFilters) {
|
|
166
|
+
storedFilters = JSON.parse(storedFilters);
|
|
167
|
+
if (storedFilters === null || storedFilters === void 0 ? void 0 : storedFilters[name]) {
|
|
168
|
+
const storedOperator = Object.keys(storedFilters[name])[0];
|
|
169
|
+
setDisplayed(storedFilters[name][storedOperator]);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}, [
|
|
173
|
+
name,
|
|
174
|
+
query
|
|
175
|
+
]);
|
|
176
|
+
(0, _react.useEffect)(()=>{
|
|
177
|
+
if (!disabled) {
|
|
178
|
+
fetch();
|
|
179
|
+
}
|
|
180
|
+
}, []);
|
|
181
|
+
(0, _react.useEffect)(()=>{
|
|
182
|
+
if (data && !isLastPage && prevPage < page) {
|
|
183
|
+
//raaya todo: this is too messy clean it
|
|
184
|
+
const newOptions = variables.method_name == 'workspace' ? data.workspace[search_path === null || search_path === void 0 ? void 0 : search_path.split('.')[1]] : data[method_name];
|
|
185
|
+
if (newOptions.length === 0 || newOptions.length < pageSize) {
|
|
186
|
+
setIsLastPage(true);
|
|
187
|
+
}
|
|
188
|
+
if (reason === 'searched' || reason === 'init') {
|
|
189
|
+
setOptions(newOptions);
|
|
190
|
+
} else if (reason === 'loaded more') {
|
|
191
|
+
setOptions((prevOptions)=>[
|
|
192
|
+
...prevOptions,
|
|
193
|
+
...newOptions
|
|
194
|
+
]);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}, [
|
|
198
|
+
data,
|
|
199
|
+
reason
|
|
200
|
+
]);
|
|
205
201
|
const handleSearch = (e)=>{
|
|
206
202
|
setSearchValue(e.target.value);
|
|
207
|
-
|
|
203
|
+
setDisplayed(e.target.value);
|
|
208
204
|
setReason('searched');
|
|
209
205
|
setPage(1);
|
|
210
206
|
setPrevPage(0);
|
|
211
207
|
setIsLastPage(false);
|
|
212
208
|
};
|
|
213
|
-
const
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
structure: child
|
|
226
|
-
}, rest)));
|
|
227
|
-
break;
|
|
228
|
-
}
|
|
229
|
-
case 'clear':
|
|
230
|
-
{
|
|
231
|
-
if (!hasClearBtn) {
|
|
232
|
-
setHasClearBtn(true);
|
|
233
|
-
}
|
|
234
|
-
rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, _object_spread_props(_object_spread({}, rest), {
|
|
235
|
-
children: structure.title
|
|
236
|
-
}));
|
|
237
|
-
break;
|
|
209
|
+
const handleOptionClick = (option, extractedVal)=>{
|
|
210
|
+
switch(multiple){
|
|
211
|
+
case true:
|
|
212
|
+
if (displayed.includes(extractedVal)) {
|
|
213
|
+
setDisplayed((prev)=>prev.filter((val)=>val !== extractedVal));
|
|
214
|
+
onChange && onChange(option, 'uncheck');
|
|
215
|
+
} else {
|
|
216
|
+
onChange && onChange(option, 'check');
|
|
217
|
+
setDisplayed((prev)=>[
|
|
218
|
+
...prev,
|
|
219
|
+
extractedVal
|
|
220
|
+
]);
|
|
238
221
|
}
|
|
222
|
+
break;
|
|
239
223
|
default:
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
}
|
|
224
|
+
setDisplayed(extractedVal);
|
|
225
|
+
onChange && onChange(option, null);
|
|
243
226
|
}
|
|
244
|
-
return rv;
|
|
245
227
|
};
|
|
246
|
-
const
|
|
247
|
-
debug === true && console.log('renderOptions: ', renderOptions);
|
|
228
|
+
const handleListOptions = ()=>{
|
|
248
229
|
switch(type){
|
|
249
230
|
case 'checkbox':
|
|
250
231
|
{
|
|
251
232
|
return options.map((option)=>{
|
|
252
|
-
|
|
253
|
-
const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
|
|
254
|
-
let title = (0, _helpers.getJPart)(option, title_path, 0);
|
|
255
|
-
//if title is an array need to extract the first element
|
|
256
|
-
if (typeof title === 'object' && title.length > 0) {
|
|
257
|
-
title = title[0];
|
|
258
|
-
}
|
|
259
|
-
var _option_title;
|
|
233
|
+
const extractedVal = option[search_path] || option.title;
|
|
260
234
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
|
|
261
235
|
onClick: ()=>{
|
|
262
|
-
|
|
263
|
-
setDisplayedValue((prev)=>prev.filter((val)=>val !== displayedVal));
|
|
264
|
-
onChange && onChange(option, 'uncheck');
|
|
265
|
-
} else {
|
|
266
|
-
// debugger
|
|
267
|
-
onChange && onChange(option, 'check');
|
|
268
|
-
setDisplayedValue((prev)=>[
|
|
269
|
-
...prev,
|
|
270
|
-
displayedVal
|
|
271
|
-
]);
|
|
272
|
-
}
|
|
236
|
+
handleOptionClick(option, extractedVal);
|
|
273
237
|
},
|
|
274
238
|
children: [
|
|
275
239
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
|
|
276
240
|
icon: icon,
|
|
277
|
-
checked:
|
|
241
|
+
checked: displayed.includes(extractedVal),
|
|
278
242
|
checkedIcon: checkedIcon,
|
|
279
243
|
sx: {
|
|
280
244
|
mr: 1,
|
|
@@ -289,7 +253,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
289
253
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
290
254
|
variant: "subtitle2",
|
|
291
255
|
color: theme.palette.typography.title,
|
|
292
|
-
children: (0, _helpers.titleCase)(
|
|
256
|
+
children: (0, _helpers.titleCase)(extractedVal)
|
|
293
257
|
})
|
|
294
258
|
]
|
|
295
259
|
}, option._id);
|
|
@@ -298,17 +262,14 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
298
262
|
case 'text':
|
|
299
263
|
{
|
|
300
264
|
return options.map((option)=>{
|
|
301
|
-
|
|
302
|
-
var _option_title_path;
|
|
303
|
-
const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
|
|
265
|
+
const extractedVal = option[search_path] || option.title;
|
|
304
266
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
|
|
305
267
|
onClick: ()=>{
|
|
306
|
-
|
|
307
|
-
onChange && onChange(option, null);
|
|
268
|
+
handleOptionClick(option, extractedVal);
|
|
308
269
|
},
|
|
309
270
|
children: modal_type === 'chip' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
310
271
|
status: option.value,
|
|
311
|
-
label: (0, _helpers.titleCase)(
|
|
272
|
+
label: (0, _helpers.titleCase)(extractedVal),
|
|
312
273
|
variant: "outlined"
|
|
313
274
|
}) : modal_type === 'logo' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
314
275
|
children: [
|
|
@@ -323,29 +284,28 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
323
284
|
},
|
|
324
285
|
variant: "subtitle2",
|
|
325
286
|
color: theme.palette.typography.title,
|
|
326
|
-
children: (0, _helpers.titleCase)(
|
|
287
|
+
children: (0, _helpers.titleCase)(extractedVal)
|
|
327
288
|
})
|
|
328
289
|
]
|
|
329
290
|
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
330
291
|
variant: "subtitle2",
|
|
331
292
|
color: theme.palette.typography.title,
|
|
332
|
-
children: (0, _helpers.titleCase)(
|
|
293
|
+
children: (0, _helpers.titleCase)(extractedVal)
|
|
333
294
|
})
|
|
334
295
|
}, option._id);
|
|
335
296
|
});
|
|
336
297
|
}
|
|
337
298
|
default:
|
|
338
299
|
{
|
|
339
|
-
return options.map((option,
|
|
340
|
-
|
|
341
|
-
var _option_title_path;
|
|
300
|
+
return options.map((option, i)=>{
|
|
301
|
+
const extractedVal = option[search_path] || option.title;
|
|
342
302
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
|
|
343
303
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
344
304
|
variant: "subtitle2",
|
|
345
305
|
color: theme.palette.typography.title,
|
|
346
|
-
children: (0, _helpers.titleCase)(
|
|
306
|
+
children: (0, _helpers.titleCase)(extractedVal || '')
|
|
347
307
|
})
|
|
348
|
-
},
|
|
308
|
+
}, i);
|
|
349
309
|
});
|
|
350
310
|
}
|
|
351
311
|
}
|
|
@@ -358,83 +318,171 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
358
318
|
}
|
|
359
319
|
}));
|
|
360
320
|
const loadMore = ()=>{
|
|
361
|
-
setLoadingData(true);
|
|
362
321
|
setPage((prevPage)=>prevPage + 1);
|
|
363
322
|
setPrevPage((prevPage)=>prevPage + 1);
|
|
364
323
|
};
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
324
|
+
const getCurrentValues = ()=>{
|
|
325
|
+
let rv = null;
|
|
326
|
+
switch(multiple){
|
|
327
|
+
case true:
|
|
328
|
+
rv = getMultipleDisplayedValues();
|
|
329
|
+
break;
|
|
330
|
+
default:
|
|
331
|
+
rv = getSingleDisplayedValue();
|
|
332
|
+
return rv;
|
|
368
333
|
}
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
334
|
+
return rv;
|
|
335
|
+
};
|
|
336
|
+
const getMultipleDisplayedValues = ()=>{
|
|
337
|
+
let rv = null;
|
|
338
|
+
switch(modal_type){
|
|
339
|
+
case 'chip':
|
|
340
|
+
rv = displayed.map((val, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
341
|
+
status: val,
|
|
342
|
+
label: (0, _helpers.titleCase)(val),
|
|
343
|
+
variant: "outlined"
|
|
344
|
+
}, i));
|
|
345
|
+
break;
|
|
346
|
+
case 'logo':
|
|
347
|
+
rv = [];
|
|
348
|
+
for (const opt of displayed){
|
|
349
|
+
var _options_find;
|
|
350
|
+
const logo = (_options_find = options.find((opt)=>opt[search_path] === opt || opt.title === opt)) === null || _options_find === void 0 ? void 0 : _options_find.logo;
|
|
351
|
+
rv.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
352
|
+
children: [
|
|
353
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
354
|
+
icon: `companies/${logo}`,
|
|
355
|
+
width: 70,
|
|
356
|
+
height: 16
|
|
357
|
+
}),
|
|
358
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
359
|
+
sx: {
|
|
360
|
+
marginLeft: '5px'
|
|
361
|
+
},
|
|
362
|
+
variant: "subtitle2",
|
|
363
|
+
color: theme.palette.typography.title,
|
|
364
|
+
children: (0, _helpers.titleCase)(opt)
|
|
365
|
+
})
|
|
366
|
+
]
|
|
367
|
+
}));
|
|
368
|
+
}
|
|
369
|
+
break;
|
|
370
|
+
default:
|
|
371
|
+
rv = displayed.map((val, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
372
|
+
variant: "subtitle2",
|
|
373
|
+
color: theme.palette.typography.title,
|
|
374
|
+
children: (0, _helpers.titleCase)(val)
|
|
375
|
+
}, i));
|
|
376
|
+
return rv;
|
|
386
377
|
}
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
378
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
379
|
+
direction: 'row',
|
|
380
|
+
sx: {
|
|
381
|
+
maxWidth: 270,
|
|
382
|
+
minWidth: 270,
|
|
383
|
+
overflow: 'hidden',
|
|
384
|
+
flexWrap: 'wrap',
|
|
385
|
+
gap: 1
|
|
386
|
+
},
|
|
387
|
+
children: rv
|
|
388
|
+
});
|
|
389
|
+
};
|
|
390
|
+
const getSingleDisplayedValue = ()=>{
|
|
391
|
+
let rv = null;
|
|
392
|
+
switch(modal_type){
|
|
393
|
+
case 'chip':
|
|
394
|
+
rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
395
|
+
status: displayed,
|
|
396
|
+
label: (0, _helpers.titleCase)(displayed),
|
|
397
|
+
variant: "outlined"
|
|
398
|
+
});
|
|
399
|
+
break;
|
|
400
|
+
case 'logo':
|
|
401
|
+
var _options_find;
|
|
402
|
+
const logo = (_options_find = options.find((opt)=>opt[search_path] === displayed || opt.title === displayed)) === null || _options_find === void 0 ? void 0 : _options_find.logo;
|
|
403
|
+
rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
404
|
+
children: [
|
|
405
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
406
|
+
icon: `companies/${logo}`,
|
|
407
|
+
width: 70,
|
|
408
|
+
height: 16
|
|
409
|
+
}),
|
|
410
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
411
|
+
sx: {
|
|
412
|
+
marginLeft: '5px'
|
|
413
|
+
},
|
|
414
|
+
variant: "subtitle2",
|
|
415
|
+
color: theme.palette.typography.title,
|
|
416
|
+
children: (0, _helpers.titleCase)(displayed)
|
|
417
|
+
})
|
|
418
|
+
]
|
|
419
|
+
});
|
|
420
|
+
break;
|
|
421
|
+
default:
|
|
422
|
+
rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
423
|
+
children: [
|
|
424
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
425
|
+
variant: "subtitle2",
|
|
426
|
+
color: theme.palette.typography.title,
|
|
427
|
+
children: (0, _helpers.titleCase)(displayed)
|
|
428
|
+
}),
|
|
429
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
|
|
430
|
+
disabled: disabled,
|
|
431
|
+
sx: {
|
|
432
|
+
width: '100%',
|
|
433
|
+
border: 'none !important',
|
|
434
|
+
outline: 'none !important'
|
|
435
|
+
},
|
|
436
|
+
children: [
|
|
437
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
|
|
438
|
+
style: {
|
|
439
|
+
border: 'none',
|
|
440
|
+
outline: 'none'
|
|
441
|
+
},
|
|
442
|
+
autoFocus: true,
|
|
443
|
+
placeholder: "Select an option...",
|
|
444
|
+
onChange: (e)=>{
|
|
445
|
+
handleSearch(e);
|
|
446
|
+
}
|
|
447
|
+
}),
|
|
448
|
+
loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
|
|
449
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
|
|
450
|
+
})
|
|
451
|
+
]
|
|
452
|
+
})
|
|
453
|
+
]
|
|
454
|
+
});
|
|
455
|
+
return rv;
|
|
456
|
+
}
|
|
457
|
+
return rv;
|
|
458
|
+
};
|
|
391
459
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
|
|
392
460
|
children: [
|
|
393
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
394
|
-
disabled: disabled,
|
|
461
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
|
|
395
462
|
sx: {
|
|
396
|
-
|
|
397
|
-
border: 'none !important',
|
|
398
|
-
outline: 'none !important'
|
|
463
|
+
padding: '5px 0 5px 15px'
|
|
399
464
|
},
|
|
400
|
-
children:
|
|
401
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
|
|
402
|
-
style: {
|
|
403
|
-
border: 'none',
|
|
404
|
-
outline: 'none'
|
|
405
|
-
},
|
|
406
|
-
autoFocus: true,
|
|
407
|
-
defaultValue: displayedValue !== null && displayedValue !== void 0 ? displayedValue : '',
|
|
408
|
-
placeholder: "Select an option...",
|
|
409
|
-
onChange: (e)=>{
|
|
410
|
-
handleSearch(e);
|
|
411
|
-
}
|
|
412
|
-
}),
|
|
413
|
-
loadingData && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
|
|
414
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
|
|
415
|
-
})
|
|
416
|
-
]
|
|
465
|
+
children: getCurrentValues()
|
|
417
466
|
}),
|
|
418
467
|
options.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
|
|
419
468
|
sx: _object_spread_props(_object_spread({}, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.menuSx), {
|
|
420
469
|
'&::-webkit-scrollbar': {
|
|
421
|
-
width: '
|
|
422
|
-
backgroundColor: '
|
|
470
|
+
width: '8px',
|
|
471
|
+
backgroundColor: 'transparent'
|
|
423
472
|
},
|
|
424
473
|
'&::-webkit-scrollbar-thumb': {
|
|
425
|
-
backgroundColor: '#
|
|
426
|
-
borderRadius: '8px'
|
|
427
|
-
border: '4px solid #F5F5F5'
|
|
474
|
+
backgroundColor: '#8B9092',
|
|
475
|
+
borderRadius: '8px'
|
|
428
476
|
},
|
|
429
477
|
// To support Firefox
|
|
430
478
|
scrollbarWidth: 'thin',
|
|
431
|
-
scrollbarColor: '#
|
|
479
|
+
scrollbarColor: '#8B9092 transparent',
|
|
432
480
|
maxHeight: '300px',
|
|
433
481
|
overflowY: 'auto'
|
|
434
482
|
}),
|
|
435
483
|
ref: ref,
|
|
436
484
|
children: [
|
|
437
|
-
|
|
485
|
+
handleListOptions(),
|
|
438
486
|
!isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
|
|
439
487
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
|
|
440
488
|
onClick: ()=>{
|
package/package.json
CHANGED