@fixefy/fixefy-ui-components 0.1.73 → 0.1.75
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.
|
@@ -160,24 +160,26 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
160
160
|
limit: pageSize
|
|
161
161
|
})
|
|
162
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
163
|
(0, _react.useEffect)(()=>{
|
|
177
164
|
if (!disabled) {
|
|
178
165
|
fetch();
|
|
179
166
|
}
|
|
180
167
|
}, []);
|
|
168
|
+
(0, _react.useEffect)(()=>{
|
|
169
|
+
const storedData = sessionStorage.getItem(`dropdown-${query}`);
|
|
170
|
+
if (storedData) {
|
|
171
|
+
const parsedData = JSON.parse(storedData);
|
|
172
|
+
const items = parsedData[name];
|
|
173
|
+
if (items) {
|
|
174
|
+
multiple ? setDisplayed([
|
|
175
|
+
...items
|
|
176
|
+
]) : setDisplayed(items[0]);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}, [
|
|
180
|
+
query,
|
|
181
|
+
name
|
|
182
|
+
]);
|
|
181
183
|
(0, _react.useEffect)(()=>{
|
|
182
184
|
if (data && !isLastPage && prevPage < page) {
|
|
183
185
|
//raaya todo: this is too messy clean it
|
|
@@ -200,45 +202,100 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
200
202
|
]);
|
|
201
203
|
const handleSearch = (e)=>{
|
|
202
204
|
setSearchValue(e.target.value);
|
|
203
|
-
setDisplayed(e.target.value);
|
|
204
205
|
setReason('searched');
|
|
205
206
|
setPage(1);
|
|
206
207
|
setPrevPage(0);
|
|
207
208
|
setIsLastPage(false);
|
|
208
209
|
};
|
|
209
|
-
const
|
|
210
|
+
const addToStoredDisplayed = (option)=>{
|
|
211
|
+
const prevStored = sessionStorage.getItem(`dropdown-${query}`);
|
|
212
|
+
let data = prevStored ? JSON.parse(prevStored) : {};
|
|
213
|
+
if (data[name]) {
|
|
214
|
+
if (multiple) {
|
|
215
|
+
data[name] = [
|
|
216
|
+
...data[name],
|
|
217
|
+
option
|
|
218
|
+
];
|
|
219
|
+
} else {
|
|
220
|
+
data[name] = [
|
|
221
|
+
option
|
|
222
|
+
];
|
|
223
|
+
}
|
|
224
|
+
} else {
|
|
225
|
+
data[name] = [
|
|
226
|
+
option
|
|
227
|
+
];
|
|
228
|
+
}
|
|
229
|
+
sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(data));
|
|
230
|
+
};
|
|
231
|
+
const removeFromStoredDisplayed = (option)=>{
|
|
232
|
+
let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
|
|
233
|
+
if (storedDisplayed) {
|
|
234
|
+
storedDisplayed = JSON.parse(storedDisplayed);
|
|
235
|
+
if (multiple) {
|
|
236
|
+
const newDisplayed = storedDisplayed[name].filter((opt)=>{
|
|
237
|
+
if (search_path.includes('workspace')) {
|
|
238
|
+
return opt['title'] !== option['title'];
|
|
239
|
+
} else {
|
|
240
|
+
return opt[search_path] !== option[search_path];
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
storedDisplayed[name] = newDisplayed;
|
|
244
|
+
} else {
|
|
245
|
+
delete storedDisplayed[name];
|
|
246
|
+
}
|
|
247
|
+
sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(storedDisplayed));
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
const handleOptionClick = (option)=>{
|
|
210
251
|
switch(multiple){
|
|
211
252
|
case true:
|
|
212
|
-
if (displayed.
|
|
213
|
-
|
|
214
|
-
|
|
253
|
+
if (displayed.map((item)=>{
|
|
254
|
+
if (search_path.includes('workspace')) {
|
|
255
|
+
return item['title'];
|
|
256
|
+
} else {
|
|
257
|
+
return item[search_path];
|
|
258
|
+
}
|
|
259
|
+
}).includes(option[search_path] || option.title)) {
|
|
260
|
+
deleteItem(option);
|
|
215
261
|
} else {
|
|
216
262
|
onChange && onChange(option, 'check');
|
|
217
263
|
setDisplayed((prev)=>[
|
|
218
264
|
...prev,
|
|
219
|
-
|
|
265
|
+
option
|
|
220
266
|
]);
|
|
267
|
+
addToStoredDisplayed(option);
|
|
221
268
|
}
|
|
222
269
|
break;
|
|
223
270
|
default:
|
|
224
|
-
setDisplayed(
|
|
271
|
+
setDisplayed(option);
|
|
225
272
|
onChange && onChange(option, null);
|
|
273
|
+
addToStoredDisplayed(option);
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
const deleteItem = (item)=>{
|
|
277
|
+
if (search_path.includes('workspace')) {
|
|
278
|
+
setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
|
|
279
|
+
} else {
|
|
280
|
+
setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
|
|
226
281
|
}
|
|
282
|
+
onChange && onChange(item, 'uncheck');
|
|
283
|
+
removeFromStoredDisplayed(item);
|
|
227
284
|
};
|
|
228
285
|
const handleListOptions = ()=>{
|
|
229
286
|
switch(type){
|
|
230
287
|
case 'checkbox':
|
|
231
288
|
{
|
|
232
289
|
return options.map((option)=>{
|
|
233
|
-
const
|
|
290
|
+
const clicked = option[search_path] || option.title;
|
|
234
291
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
|
|
235
292
|
onClick: ()=>{
|
|
236
|
-
handleOptionClick(option
|
|
293
|
+
handleOptionClick(option);
|
|
237
294
|
},
|
|
238
295
|
children: [
|
|
239
296
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
|
|
240
297
|
icon: icon,
|
|
241
|
-
checked: displayed.includes(
|
|
298
|
+
checked: displayed.map((item)=>item[search_path]).includes(clicked),
|
|
242
299
|
checkedIcon: checkedIcon,
|
|
243
300
|
sx: {
|
|
244
301
|
mr: 1,
|
|
@@ -253,7 +310,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
253
310
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
254
311
|
variant: "subtitle2",
|
|
255
312
|
color: theme.palette.typography.title,
|
|
256
|
-
children: (0, _helpers.titleCase)(
|
|
313
|
+
children: (0, _helpers.titleCase)(clicked)
|
|
257
314
|
})
|
|
258
315
|
]
|
|
259
316
|
}, option._id);
|
|
@@ -262,14 +319,14 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
262
319
|
case 'text':
|
|
263
320
|
{
|
|
264
321
|
return options.map((option)=>{
|
|
265
|
-
const
|
|
322
|
+
const clicked = option[search_path] || option.title;
|
|
266
323
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
|
|
267
324
|
onClick: ()=>{
|
|
268
|
-
handleOptionClick(option
|
|
325
|
+
handleOptionClick(option);
|
|
269
326
|
},
|
|
270
327
|
children: modal_type === 'chip' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
271
328
|
status: option.value,
|
|
272
|
-
label: (0, _helpers.titleCase)(
|
|
329
|
+
label: (0, _helpers.titleCase)(clicked),
|
|
273
330
|
variant: "outlined"
|
|
274
331
|
}) : modal_type === 'logo' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
275
332
|
children: [
|
|
@@ -284,13 +341,13 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
284
341
|
},
|
|
285
342
|
variant: "subtitle2",
|
|
286
343
|
color: theme.palette.typography.title,
|
|
287
|
-
children: (0, _helpers.titleCase)(
|
|
344
|
+
children: (0, _helpers.titleCase)(clicked)
|
|
288
345
|
})
|
|
289
346
|
]
|
|
290
347
|
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
291
348
|
variant: "subtitle2",
|
|
292
349
|
color: theme.palette.typography.title,
|
|
293
|
-
children: (0, _helpers.titleCase)(
|
|
350
|
+
children: (0, _helpers.titleCase)(clicked)
|
|
294
351
|
})
|
|
295
352
|
}, option._id);
|
|
296
353
|
});
|
|
@@ -298,12 +355,12 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
298
355
|
default:
|
|
299
356
|
{
|
|
300
357
|
return options.map((option, i)=>{
|
|
301
|
-
const
|
|
358
|
+
const clicked = option[search_path] || option.title;
|
|
302
359
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
|
|
303
360
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
304
361
|
variant: "subtitle2",
|
|
305
362
|
color: theme.palette.typography.title,
|
|
306
|
-
children: (0, _helpers.titleCase)(
|
|
363
|
+
children: (0, _helpers.titleCase)(clicked || '')
|
|
307
364
|
})
|
|
308
365
|
}, i);
|
|
309
366
|
});
|
|
@@ -337,42 +394,61 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
337
394
|
let rv = null;
|
|
338
395
|
switch(modal_type){
|
|
339
396
|
case 'chip':
|
|
340
|
-
rv = displayed.map((
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
397
|
+
rv = displayed.map((item, i)=>{
|
|
398
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
399
|
+
status: item[search_path],
|
|
400
|
+
label: (0, _helpers.titleCase)(item[search_path]),
|
|
401
|
+
variant: "outlined",
|
|
402
|
+
onDelete: ()=>{
|
|
403
|
+
deleteItem(item);
|
|
404
|
+
}
|
|
405
|
+
}, i);
|
|
406
|
+
});
|
|
345
407
|
break;
|
|
346
408
|
case 'logo':
|
|
347
409
|
rv = [];
|
|
348
|
-
for (const
|
|
349
|
-
var
|
|
350
|
-
|
|
351
|
-
|
|
410
|
+
for (const item of displayed){
|
|
411
|
+
var _item_search_path;
|
|
412
|
+
rv.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
|
|
413
|
+
sx: {
|
|
414
|
+
display: 'flex',
|
|
415
|
+
gap: 1,
|
|
416
|
+
color: 'grey',
|
|
417
|
+
cursor: 'pointer'
|
|
418
|
+
},
|
|
352
419
|
children: [
|
|
353
420
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
354
|
-
icon: `companies/${logo}`,
|
|
421
|
+
icon: `companies/${item.logo}`,
|
|
355
422
|
width: 70,
|
|
356
423
|
height: 16
|
|
357
424
|
}),
|
|
358
425
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
359
|
-
sx: {
|
|
360
|
-
marginLeft: '5px'
|
|
361
|
-
},
|
|
362
426
|
variant: "subtitle2",
|
|
363
427
|
color: theme.palette.typography.title,
|
|
364
|
-
children: (0, _helpers.titleCase)(
|
|
428
|
+
children: (0, _helpers.titleCase)((_item_search_path = item[search_path]) !== null && _item_search_path !== void 0 ? _item_search_path : item['title'])
|
|
429
|
+
}),
|
|
430
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
|
|
431
|
+
onClick: ()=>{
|
|
432
|
+
deleteItem(item);
|
|
433
|
+
},
|
|
434
|
+
children: "x"
|
|
365
435
|
})
|
|
366
436
|
]
|
|
367
|
-
}));
|
|
437
|
+
}, item._id));
|
|
368
438
|
}
|
|
369
439
|
break;
|
|
370
440
|
default:
|
|
371
|
-
rv = displayed.map((
|
|
441
|
+
rv = displayed.map((item, i)=>/*#__PURE__*/ {
|
|
442
|
+
var _item_search_path;
|
|
443
|
+
return (0, _jsxruntime.jsxs)(_material.Typography, {
|
|
372
444
|
variant: "subtitle2",
|
|
373
445
|
color: theme.palette.typography.title,
|
|
374
|
-
children:
|
|
375
|
-
|
|
446
|
+
children: [
|
|
447
|
+
(0, _helpers.titleCase)((_item_search_path = item[search_path]) !== null && _item_search_path !== void 0 ? _item_search_path : item['title']),
|
|
448
|
+
' '
|
|
449
|
+
]
|
|
450
|
+
}, i);
|
|
451
|
+
});
|
|
376
452
|
return rv;
|
|
377
453
|
}
|
|
378
454
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
@@ -389,17 +465,18 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
389
465
|
};
|
|
390
466
|
const getSingleDisplayedValue = ()=>{
|
|
391
467
|
let rv = null;
|
|
468
|
+
const displayedVal = displayed[search_path];
|
|
392
469
|
switch(modal_type){
|
|
393
470
|
case 'chip':
|
|
394
471
|
rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
395
|
-
status:
|
|
396
|
-
label: (0, _helpers.titleCase)(
|
|
472
|
+
status: displayedVal,
|
|
473
|
+
label: (0, _helpers.titleCase)(displayedVal),
|
|
397
474
|
variant: "outlined"
|
|
398
475
|
});
|
|
399
476
|
break;
|
|
400
477
|
case 'logo':
|
|
401
478
|
var _options_find;
|
|
402
|
-
const logo = (_options_find = options.find((opt)=>opt[search_path] ===
|
|
479
|
+
const logo = (_options_find = options.find((opt)=>opt[search_path] === displayedVal || opt.title === displayedVal)) === null || _options_find === void 0 ? void 0 : _options_find.logo;
|
|
403
480
|
rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
404
481
|
children: [
|
|
405
482
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
@@ -413,7 +490,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
413
490
|
},
|
|
414
491
|
variant: "subtitle2",
|
|
415
492
|
color: theme.palette.typography.title,
|
|
416
|
-
children: (0, _helpers.titleCase)(
|
|
493
|
+
children: (0, _helpers.titleCase)(displayedVal)
|
|
417
494
|
})
|
|
418
495
|
]
|
|
419
496
|
});
|
|
@@ -424,7 +501,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
424
501
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
425
502
|
variant: "subtitle2",
|
|
426
503
|
color: theme.palette.typography.title,
|
|
427
|
-
children: (0, _helpers.titleCase)(
|
|
504
|
+
children: (0, _helpers.titleCase)(displayedVal)
|
|
428
505
|
}),
|
|
429
506
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
|
|
430
507
|
disabled: disabled,
|
package/dist/FxChip/FxChip.d.ts
CHANGED
package/dist/FxChip/FxChip.js
CHANGED
|
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "FxChip", {
|
|
|
11
11
|
const _jsxruntime = require("react/jsx-runtime");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
13
13
|
const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
|
|
14
|
+
const _iconsmaterial = require("@mui/icons-material");
|
|
14
15
|
const _chipstyles = require("./styles/chip.styles");
|
|
15
16
|
function _interop_require_default(obj) {
|
|
16
17
|
return obj && obj.__esModule ? obj : {
|
|
@@ -18,14 +19,21 @@ function _interop_require_default(obj) {
|
|
|
18
19
|
};
|
|
19
20
|
}
|
|
20
21
|
const FxChip = (props)=>{
|
|
21
|
-
const { status, label, type = 'status', scoreValue = 0, minimized = false, variant = 'outlined', onClick } = props;
|
|
22
|
+
const { status, label, type = 'status', scoreValue = 0, minimized = false, variant = 'outlined', onClick, onDelete } = props;
|
|
22
23
|
const newStatus = status ? status.split(' ').join('_') : status;
|
|
23
24
|
const value = typeof label === 'number' ? label.toFixed(2) : label;
|
|
24
25
|
return type === 'status' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.StatusChipStyled, {
|
|
25
26
|
status: newStatus,
|
|
26
27
|
label: (0, _fixefyuiutils.titleCase)(value),
|
|
27
28
|
variant: variant,
|
|
28
|
-
onClick: onClick
|
|
29
|
+
onClick: onClick,
|
|
30
|
+
onDelete: onDelete,
|
|
31
|
+
deleteIcon: onDelete ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CloseRounded, {
|
|
32
|
+
sx: {
|
|
33
|
+
width: 11,
|
|
34
|
+
height: 11
|
|
35
|
+
}
|
|
36
|
+
}) : null
|
|
29
37
|
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.ScoreChipStyled, {
|
|
30
38
|
score: scoreValue,
|
|
31
39
|
scoreLabel: (0, _fixefyuiutils.getScoreColor)(scoreValue),
|
package/package.json
CHANGED