@fixefy/fixefy-ui-components 0.1.74 → 0.1.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.
Files changed (4) hide show
  1. package/dist/FxAsyncDropdown/FxAsyncDropdown.js +131 -54
  2. package/dist/FxChip/FxChip.d.ts +1 -0
  3. package/dist/FxChip/FxChip.js +10 -2
  4. package/package.json +1 -1
package/dist/FxAsyncDropdown/FxAsyncDropdown.js CHANGED
@@ -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 handleOptionClick = (option, extractedVal)=>{
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.includes(extractedVal)) {
213
- setDisplayed((prev)=>prev.filter((val)=>val !== extractedVal));
214
- onChange && onChange(option, 'uncheck');
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
- extractedVal
265
+ option
220
266
  ]);
267
+ addToStoredDisplayed(option);
221
268
  }
222
269
  break;
223
270
  default:
224
- setDisplayed(extractedVal);
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 extractedVal = option[search_path] || option.title;
290
+ const clicked = option[search_path] || option.title;
234
291
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
235
292
  onClick: ()=>{
236
- handleOptionClick(option, extractedVal);
293
+ handleOptionClick(option);
237
294
  },
238
295
  children: [
239
296
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
240
297
  icon: icon,
241
- checked: displayed.includes(extractedVal),
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)(extractedVal)
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 extractedVal = option[search_path] || option.title;
322
+ const clicked = option[search_path] || option.title;
266
323
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
267
324
  onClick: ()=>{
268
- handleOptionClick(option, extractedVal);
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)(extractedVal),
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)(extractedVal)
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)(extractedVal)
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 extractedVal = option[search_path] || option.title;
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)(extractedVal || '')
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((val, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
341
- status: val,
342
- label: (0, _helpers.titleCase)(val),
343
- variant: "outlined"
344
- }, i));
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 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, {
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)(opt)
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((val, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
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: (0, _helpers.titleCase)(val)
375
- }, i));
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: displayed,
396
- label: (0, _helpers.titleCase)(displayed),
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] === displayed || opt.title === displayed)) === null || _options_find === void 0 ? void 0 : _options_find.logo;
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)(displayed)
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)(displayed)
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
@@ -13,6 +13,7 @@ export interface ChipPropsType {
13
13
  minimized?: boolean;
14
14
  [x: string]: any;
15
15
  onClick?: (e: any) => void;
16
+ onDelete?: (e: any) => void;
16
17
  }
17
18
  export declare const FxChip: (props: ChipPropsType) => React.JSX.Element;
18
19
  export {};
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
@@ -70,5 +70,5 @@
70
70
  "require": "./dist/index.js"
71
71
  }
72
72
  },
73
- "version": "0.1.74"
73
+ "version": "0.1.76"
74
74
  }