@fixefy/fixefy-ui-components 0.1.76 → 0.1.78

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 (2) hide show
  1. package/dist/FxAsyncDropdown/FxAsyncDropdown.js +109 -150
  2. package/package.json +1 -1
package/dist/FxAsyncDropdown/FxAsyncDropdown.js CHANGED
@@ -248,6 +248,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
248
248
  }
249
249
  };
250
250
  const handleOptionClick = (option)=>{
251
+ let clicked = getClicked(option);
251
252
  switch(multiple){
252
253
  case true:
253
254
  if (displayed.map((item)=>{
@@ -256,7 +257,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
256
257
  } else {
257
258
  return item[search_path];
258
259
  }
259
- }).includes(option[search_path] || option.title)) {
260
+ }).includes(clicked)) {
260
261
  deleteItem(option);
261
262
  } else {
262
263
  onChange && onChange(option, 'check');
@@ -287,7 +288,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
287
288
  case 'checkbox':
288
289
  {
289
290
  return options.map((option)=>{
290
- const clicked = option[search_path] || option.title;
291
+ const clicked = getClicked(option);
291
292
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
292
293
  onClick: ()=>{
293
294
  handleOptionClick(option);
@@ -319,43 +320,18 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
319
320
  case 'text':
320
321
  {
321
322
  return options.map((option)=>{
322
- const clicked = option[search_path] || option.title;
323
323
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
324
324
  onClick: ()=>{
325
325
  handleOptionClick(option);
326
326
  },
327
- children: modal_type === 'chip' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
328
- status: option.value,
329
- label: (0, _helpers.titleCase)(clicked),
330
- variant: "outlined"
331
- }) : modal_type === 'logo' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
332
- children: [
333
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
334
- icon: `companies/${option.logo}`,
335
- width: 70,
336
- height: 16
337
- }),
338
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
339
- sx: {
340
- marginLeft: '5px'
341
- },
342
- variant: "subtitle2",
343
- color: theme.palette.typography.title,
344
- children: (0, _helpers.titleCase)(clicked)
345
- })
346
- ]
347
- }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
348
- variant: "subtitle2",
349
- color: theme.palette.typography.title,
350
- children: (0, _helpers.titleCase)(clicked)
351
- })
327
+ children: getValueByModalType(option, 'list')
352
328
  }, option._id);
353
329
  });
354
330
  }
355
331
  default:
356
332
  {
357
333
  return options.map((option, i)=>{
358
- const clicked = option[search_path] || option.title;
334
+ const clicked = getClicked(option);
359
335
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
360
336
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
361
337
  variant: "subtitle2",
@@ -378,6 +354,16 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
378
354
  setPage((prevPage)=>prevPage + 1);
379
355
  setPrevPage((prevPage)=>prevPage + 1);
380
356
  };
357
+ const getClicked = (option)=>{
358
+ if (option != '') {
359
+ let clicked = (0, _helpers.getJPart)(option, search_path, 0) || option.title;
360
+ if (typeof clicked === 'object') {
361
+ clicked = clicked[0];
362
+ }
363
+ return clicked;
364
+ }
365
+ return null;
366
+ };
381
367
  const getCurrentValues = ()=>{
382
368
  let rv = null;
383
369
  switch(multiple){
@@ -385,161 +371,134 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
385
371
  rv = getMultipleDisplayedValues();
386
372
  break;
387
373
  default:
388
- rv = getSingleDisplayedValue();
374
+ rv = getValueByModalType(displayed, 'displayed');
389
375
  return rv;
390
376
  }
391
377
  return rv;
392
378
  };
393
- const getMultipleDisplayedValues = ()=>{
394
- let rv = null;
395
- switch(modal_type){
396
- case 'chip':
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
- });
407
- break;
408
- case 'logo':
409
- rv = [];
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
- },
419
- children: [
420
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
421
- icon: `companies/${item.logo}`,
422
- width: 70,
423
- height: 16
424
- }),
425
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
426
- variant: "subtitle2",
427
- color: theme.palette.typography.title,
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"
435
- })
436
- ]
437
- }, item._id));
438
- }
439
- break;
440
- default:
441
- rv = displayed.map((item, i)=>/*#__PURE__*/ {
442
- var _item_search_path;
443
- return (0, _jsxruntime.jsxs)(_material.Typography, {
444
- variant: "subtitle2",
445
- color: theme.palette.typography.title,
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
- });
452
- return rv;
453
- }
454
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
455
- direction: 'row',
456
- sx: {
457
- maxWidth: 270,
458
- minWidth: 270,
459
- overflow: 'hidden',
460
- flexWrap: 'wrap',
461
- gap: 1
462
- },
463
- children: rv
464
- });
465
- };
466
- const getSingleDisplayedValue = ()=>{
379
+ const getValueByModalType = (option, location)=>{
467
380
  let rv = null;
468
- const displayedVal = displayed[search_path];
381
+ const clicked = getClicked(option);
469
382
  switch(modal_type){
470
383
  case 'chip':
471
- rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
472
- status: displayedVal,
473
- label: (0, _helpers.titleCase)(displayedVal),
384
+ rv = location === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
385
+ status: clicked,
386
+ label: (0, _helpers.titleCase)(clicked),
387
+ variant: "outlined",
388
+ onDelete: ()=>{
389
+ deleteItem(option);
390
+ }
391
+ }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
392
+ status: clicked,
393
+ label: (0, _helpers.titleCase)(clicked),
474
394
  variant: "outlined"
475
- });
395
+ }, option._id);
476
396
  break;
477
397
  case 'logo':
478
- var _options_find;
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;
480
- rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
398
+ rv = location === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
399
+ sx: {
400
+ display: 'flex',
401
+ gap: 1,
402
+ color: 'grey',
403
+ cursor: 'pointer'
404
+ },
481
405
  children: [
482
406
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
483
- icon: `companies/${logo}`,
407
+ icon: `companies/${option.logo}`,
484
408
  width: 70,
485
409
  height: 16
486
410
  }),
487
411
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
488
- sx: {
489
- marginLeft: '5px'
490
- },
491
412
  variant: "subtitle2",
492
413
  color: theme.palette.typography.title,
493
- children: (0, _helpers.titleCase)(displayedVal)
414
+ children: (0, _helpers.titleCase)(clicked)
415
+ }),
416
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
417
+ onClick: ()=>{
418
+ deleteItem(option);
419
+ },
420
+ children: "x"
494
421
  })
495
422
  ]
496
- });
497
- break;
498
- default:
499
- rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
423
+ }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
424
+ sx: {
425
+ display: 'flex',
426
+ gap: 1,
427
+ color: 'grey',
428
+ cursor: 'pointer'
429
+ },
500
430
  children: [
431
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
432
+ icon: `companies/${option.logo}`,
433
+ width: 70,
434
+ height: 16
435
+ }),
501
436
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
502
437
  variant: "subtitle2",
503
438
  color: theme.palette.typography.title,
504
- children: (0, _helpers.titleCase)(displayedVal)
505
- }),
506
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
507
- disabled: disabled,
508
- sx: {
509
- width: '100%',
510
- border: 'none !important',
511
- outline: 'none !important'
512
- },
513
- children: [
514
- /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
515
- style: {
516
- border: 'none',
517
- outline: 'none'
518
- },
519
- autoFocus: true,
520
- placeholder: "Select an option...",
521
- onChange: (e)=>{
522
- handleSearch(e);
523
- }
524
- }),
525
- loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
526
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
527
- })
528
- ]
439
+ children: (0, _helpers.titleCase)(clicked)
529
440
  })
530
441
  ]
531
- });
532
- return rv;
442
+ }, option._id);
443
+ break;
444
+ default:
445
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
446
+ variant: "subtitle2",
447
+ color: theme.palette.typography.title,
448
+ children: (0, _helpers.titleCase)(clicked)
449
+ }, option._id);
450
+ break;
533
451
  }
534
452
  return rv;
535
453
  };
454
+ const getMultipleDisplayedValues = ()=>{
455
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
456
+ direction: 'row',
457
+ sx: {
458
+ maxWidth: 270,
459
+ minWidth: 270,
460
+ overflow: 'hidden',
461
+ flexWrap: 'wrap',
462
+ gap: 1
463
+ },
464
+ children: displayed.map((item)=>{
465
+ return getValueByModalType(item, 'displayed');
466
+ })
467
+ });
468
+ };
536
469
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
537
470
  children: [
538
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
471
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
539
472
  sx: {
540
473
  padding: '5px 0 5px 15px'
541
474
  },
542
- children: getCurrentValues()
475
+ children: [
476
+ getCurrentValues(),
477
+ modal_type === 'text' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
478
+ disabled: disabled,
479
+ sx: {
480
+ width: '100%',
481
+ border: 'none !important',
482
+ outline: 'none !important'
483
+ },
484
+ children: [
485
+ /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
486
+ style: {
487
+ border: 'none',
488
+ outline: 'none'
489
+ },
490
+ autoFocus: true,
491
+ placeholder: "Select an option...",
492
+ onChange: (e)=>{
493
+ handleSearch(e);
494
+ }
495
+ }),
496
+ loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
497
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
498
+ })
499
+ ]
500
+ })
501
+ ]
543
502
  }),
544
503
  options.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
545
504
  sx: _object_spread_props(_object_spread({}, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.menuSx), {
package/package.json CHANGED
@@ -70,5 +70,5 @@
70
70
  "require": "./dist/index.js"
71
71
  }
72
72
  },
73
- "version": "0.1.76"
73
+ "version": "0.1.78"
74
74
  }