@fixefy/fixefy-ui-components 0.2.42 → 0.2.43

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 (6) hide show
  1. package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts +1 -1
  2. package/dist/FxAsyncDropdown/FxAsyncDropdown.js +123 -148
  3. package/dist/FxAsyncDropdown/helpers/helpers.d.ts +1 -0
  4. package/dist/FxAsyncDropdown/helpers/helpers.js +13 -0
  5. package/dist/FxAsyncDropdown/styles/dropdown.styles.js +5 -6
  6. package/package.json +1 -1
package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts CHANGED
@@ -27,7 +27,7 @@ export type AsyncDropdownPropsType = {
27
27
  query: string;
28
28
  isInitialOpen?: boolean;
29
29
  placeholder?: string;
30
- rootStyle?: any;
30
+ rootStylesOverride?: any;
31
31
  options_path?: string;
32
32
  };
33
33
  export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;
package/dist/FxAsyncDropdown/FxAsyncDropdown.js CHANGED
@@ -113,7 +113,7 @@ function _object_spread_props(target, source) {
113
113
  }
114
114
  return target;
115
115
  }
116
- const icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
116
+ const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
117
117
  fontSize: "small"
118
118
  });
119
119
  const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
@@ -127,7 +127,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
127
127
  const [options, setOptions] = (0, _react.useState)([]);
128
128
  const [reason, setReason] = (0, _react.useState)('init');
129
129
  const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
130
- const [isOpen, setIOpen] = (0, _react.useState)(isInitialOpen);
130
+ const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
131
131
  const [searchValue, setSearchValue] = (0, _react.useState)(null);
132
132
  const [page, setPage] = (0, _react.useState)(1);
133
133
  const [prevPage, setPrevPage] = (0, _react.useState)(0);
@@ -238,7 +238,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
238
238
  }
239
239
  };
240
240
  const handleOptionClick = (option)=>{
241
- let clicked = getOption(option);
241
+ let clicked = (0, _helpers.getOption)(option, title_path);
242
242
  switch(multiple){
243
243
  case true:
244
244
  if (displayed.map((item)=>{
@@ -247,20 +247,20 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
247
247
  deleteOneItem(option);
248
248
  } else {
249
249
  onAdd && onAdd(option);
250
- setIOpen(false);
250
+ !multiple && setIsOpen(false);
251
251
  setDisplayed((prev)=>[
252
252
  ...prev,
253
253
  option
254
254
  ]);
255
255
  addToStoredDisplayed(option);
256
- setIOpen(false);
256
+ !multiple && setIsOpen(false);
257
257
  }
258
258
  break;
259
259
  default:
260
260
  setDisplayed(option);
261
261
  onAdd && onAdd(option);
262
262
  addToStoredDisplayed(option);
263
- setIOpen(false);
263
+ !multiple && setIsOpen(false);
264
264
  }
265
265
  };
266
266
  const deleteOneItem = (item)=>{
@@ -273,7 +273,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
273
273
  removeOneFromStoredDisplayed(item);
274
274
  };
275
275
  const isChecked = (option)=>{
276
- const clicked = getOption(option);
276
+ const clicked = (0, _helpers.getOption)(option, title_path);
277
277
  if (typeof displayed === 'string') {
278
278
  return false;
279
279
  } else {
@@ -297,7 +297,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
297
297
  },
298
298
  children: [
299
299
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
300
- icon: icon,
300
+ icon: uncheckedIcon,
301
301
  checked: isChecked(option),
302
302
  checkedIcon: checkedIcon,
303
303
  sx: {
@@ -310,7 +310,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
310
310
  }
311
311
  }
312
312
  }),
313
- getSingleValueByModalType(option, 'list')
313
+ getSingleOptionFromListOrDisplayed(option, 'list')
314
314
  ]
315
315
  }, option._id);
316
316
  });
@@ -323,7 +323,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
323
323
  onClick: ()=>{
324
324
  handleOptionClick(option);
325
325
  },
326
- children: getSingleValueByModalType(option, 'list')
326
+ children: getSingleOptionFromListOrDisplayed(option, 'list')
327
327
  }, option._id);
328
328
  });
329
329
  }
@@ -333,165 +333,140 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
333
333
  setPage((prevPage)=>prevPage + 1);
334
334
  setPrevPage((prevPage)=>prevPage + 1);
335
335
  };
336
- const getOption = (option)=>{
337
- if (option != '') {
338
- let curOption = (0, _helpers.getJPart)(option, title_path, 0);
339
- if (curOption !== null && (0, _helpers.isArrayValid)(curOption)) {
340
- curOption = curOption[0];
341
- }
342
- return curOption;
343
- }
344
- return null;
345
- };
346
336
  const getCurrentValues = ()=>{
347
337
  if (multiple) {
348
- return getMultipleDisplayedValues();
338
+ return getDisplayedValuesMultiple();
349
339
  } else {
350
- return getSingleValueByModalType(displayed, 'displayed');
340
+ return getSingleOptionFromListOrDisplayed(displayed, 'displayed');
351
341
  }
352
342
  };
353
- const DeleteButton = ({ option })=>{
354
- let rv = null;
355
- switch(multiple){
343
+ const OneOption = ({ option, curValue, modal, modal_type })=>{
344
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
345
+ sx: {
346
+ display: 'flex',
347
+ justifyContent: 'space-between',
348
+ width: '100%',
349
+ gap: 1,
350
+ color: 'grey',
351
+ cursor: 'pointer'
352
+ },
353
+ children: [
354
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
355
+ sx: {
356
+ width: '100%',
357
+ display: 'flex',
358
+ justifyContent: 'flex-start',
359
+ gap: 1
360
+ },
361
+ children: [
362
+ modal_type == 'logo' && /*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
363
+ option: option
364
+ }),
365
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
366
+ variant: "subtitle2",
367
+ color: theme.palette.typography.title,
368
+ children: (0, _helpers.titleCase)(curValue)
369
+ }),
370
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
371
+ option: option,
372
+ isDisplay: modal == 'displayed'
373
+ })
374
+ ]
375
+ }),
376
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(ChosenIcon, {
377
+ option: option,
378
+ isDisplay: modal == 'list'
379
+ })
380
+ ]
381
+ }, option._id);
382
+ };
383
+ const DeleteButton = ({ option, isDisplay })=>{
384
+ const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === (0, _helpers.getOption)(option, title_path));
385
+ switch(isDisplayButton){
356
386
  case true:
357
- if ((displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0) {
358
- rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
359
- onClick: ()=>{
360
- deleteOneItem(option);
361
- },
362
- children: "x"
363
- });
364
- }
365
- break;
366
- case false:
387
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
388
+ onClick: ()=>{
389
+ deleteOneItem(option);
390
+ },
391
+ children: "x"
392
+ });
367
393
  default:
368
- if (displayed[search_path] === getOption(option)) {
369
- rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
370
- onClick: ()=>{
371
- deleteOneItem(option);
372
- },
373
- children: "x"
374
- });
375
- }
376
- break;
394
+ return null;
395
+ }
396
+ };
397
+ const ChosenIcon = ({ option, isDisplay })=>{
398
+ if (isDisplay && isChecked(option)) {
399
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
400
+ width: 16,
401
+ height: 16,
402
+ icon: 'filters/chosen_icon.svg'
403
+ });
377
404
  }
378
- return rv;
405
+ return null;
406
+ };
407
+ const Logo = ({ option })=>{
408
+ var _option_name;
409
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
410
+ style: {
411
+ width: '70px'
412
+ },
413
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
414
+ icon: `${option.logo ? `${logo_folder_name}/${option.logo}` : logo_placeholder ? logo_placeholder : (_option_name = option === null || option === void 0 ? void 0 : option[name]) !== null && _option_name !== void 0 ? _option_name : 'x'}`,
415
+ width: 70,
416
+ height: 16,
417
+ variant: "rounded",
418
+ fontSize: 17,
419
+ background: (0, _helpers.useRandomColor)(theme)
420
+ })
421
+ });
422
+ };
423
+ const Chip = ({ option, curValue, modal })=>{
424
+ return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
425
+ status: curValue,
426
+ label: (0, _helpers.titleCase)(curValue),
427
+ variant: "outlined",
428
+ onDelete: ()=>{
429
+ deleteOneItem(option);
430
+ }
431
+ }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
432
+ status: curValue,
433
+ label: (0, _helpers.titleCase)(curValue),
434
+ variant: "outlined"
435
+ }, option._id);
379
436
  };
380
- const getSingleValueByModalType = (option, modal)=>{
437
+ const getSingleOptionFromListOrDisplayed = (option, modal)=>{
381
438
  if (option) {
382
439
  let rv = null;
383
- const clicked = getOption(option);
440
+ const clicked = (0, _helpers.getOption)(option, title_path);
384
441
  switch(modal_type){
385
442
  case 'chip':
386
- rv = modal === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
387
- status: clicked,
388
- label: (0, _helpers.titleCase)(clicked),
389
- variant: "outlined",
390
- onDelete: ()=>{
391
- deleteOneItem(option);
392
- }
393
- }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
394
- status: clicked,
395
- label: (0, _helpers.titleCase)(clicked),
396
- variant: "outlined"
397
- }, option._id);
443
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(Chip, {
444
+ option: option,
445
+ curValue: clicked,
446
+ modal: modal
447
+ });
398
448
  break;
399
449
  case 'logo':
400
- var _option_name;
401
- rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
402
- sx: {
403
- display: 'flex',
404
- gap: 1,
405
- color: 'grey',
406
- cursor: 'pointer',
407
- width: '100%'
408
- },
409
- children: [
410
- /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
411
- style: {
412
- width: '70px'
413
- },
414
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
415
- icon: `${option.logo ? `${logo_folder_name}/${option.logo}` : logo_placeholder ? logo_placeholder : (_option_name = option === null || option === void 0 ? void 0 : option[name]) !== null && _option_name !== void 0 ? _option_name : 'x'}`,
416
- width: 70,
417
- height: 16,
418
- variant: "rounded",
419
- fontSize: 17,
420
- background: (0, _helpers.useRandomColor)(theme)
421
- })
422
- }),
423
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
424
- sx: {
425
- width: '170px',
426
- overflow: 'hidden',
427
- display: 'flex',
428
- justifyContent: 'flex-start',
429
- gap: 1
430
- },
431
- children: [
432
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
433
- variant: "subtitle2",
434
- color: theme.palette.typography.title,
435
- children: (0, _helpers.titleCase)(clicked)
436
- }),
437
- modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
438
- option: option
439
- })
440
- ]
441
- }),
442
- modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
443
- width: 16,
444
- height: 16,
445
- icon: 'filters/chosen_icon.svg'
446
- })
447
- ]
448
- }, option._id);
450
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
451
+ option: option,
452
+ curValue: clicked,
453
+ modal: modal,
454
+ modal_type: modal_type
455
+ });
449
456
  break;
450
457
  case 'text':
451
458
  default:
452
- rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
453
- sx: {
454
- display: 'flex',
455
- justifyContent: 'space-between',
456
- width: '100%',
457
- maxWidth: '250px',
458
- gap: 1,
459
- color: 'grey',
460
- cursor: 'pointer'
461
- },
462
- children: [
463
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
464
- sx: {
465
- width: '210px',
466
- overflow: 'hidden',
467
- display: 'flex',
468
- justifyContent: 'flex-start',
469
- gap: 1
470
- },
471
- children: [
472
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
473
- variant: "subtitle2",
474
- color: theme.palette.typography.title,
475
- children: (0, _helpers.titleCase)(clicked)
476
- }),
477
- modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
478
- option: option
479
- })
480
- ]
481
- }),
482
- modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
483
- width: 16,
484
- height: 16,
485
- icon: 'filters/chosen_icon.svg'
486
- })
487
- ]
488
- }, option._id);
459
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
460
+ option: option,
461
+ curValue: clicked,
462
+ modal: modal
463
+ });
489
464
  break;
490
465
  }
491
466
  return rv;
492
467
  }
493
468
  };
494
- const getMultipleDisplayedValues = ()=>{
469
+ const getDisplayedValuesMultiple = ()=>{
495
470
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
496
471
  direction: 'row',
497
472
  sx: {
@@ -507,7 +482,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
507
482
  gap: 1
508
483
  },
509
484
  children: displayed.map((item)=>{
510
- return getSingleValueByModalType(item, 'displayed');
485
+ return getSingleOptionFromListOrDisplayed(item, 'displayed');
511
486
  })
512
487
  }),
513
488
  (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
@@ -546,7 +521,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
546
521
  handleSearch(e);
547
522
  },
548
523
  onFocus: ()=>{
549
- !isInitialOpen && setIOpen(true);
524
+ !isInitialOpen && setIsOpen(true);
550
525
  }
551
526
  }),
552
527
  loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
package/dist/FxAsyncDropdown/helpers/helpers.d.ts CHANGED
@@ -5,3 +5,4 @@ export declare const isStringValid: (str: string, minLength?: number | null, max
5
5
  export declare const titleCase: (str?: string) => string;
6
6
  export declare const toPascalCase: (string: string, title?: boolean) => string;
7
7
  export declare const useRandomColor: (theme: any) => () => unknown;
8
+ export declare const getOption: (option: any, title_path: string) => any;
package/dist/FxAsyncDropdown/helpers/helpers.js CHANGED
@@ -12,6 +12,9 @@ _export(exports, {
12
12
  getJPart: function() {
13
13
  return getJPart;
14
14
  },
15
+ getOption: function() {
16
+ return getOption;
17
+ },
15
18
  isArrayValid: function() {
16
19
  return isArrayValid;
17
20
  },
@@ -142,3 +145,13 @@ const useRandomColor = (theme)=>{
142
145
  };
143
146
  return getRandomColor;
144
147
  };
148
+ const getOption = (option, title_path)=>{
149
+ if (option != '') {
150
+ let curOption = getJPart(option, title_path, 0);
151
+ if (curOption !== null && isArrayValid(curOption)) {
152
+ curOption = curOption[0];
153
+ }
154
+ return curOption;
155
+ }
156
+ return null;
157
+ };
package/dist/FxAsyncDropdown/styles/dropdown.styles.js CHANGED
@@ -76,7 +76,7 @@ function _object_spread_props(target, source) {
76
76
  return target;
77
77
  }
78
78
  const Root = (0, _styles.styled)('div')(({ props })=>{
79
- return _object_spread({
79
+ return _object_spread_props(_object_spread({
80
80
  color: 'rgba(0,0,0,.85)',
81
81
  fontSize: 14,
82
82
  background: '#FFFFFF',
@@ -87,9 +87,10 @@ const Root = (0, _styles.styled)('div')(({ props })=>{
87
87
  padding: 0
88
88
  }
89
89
  },
90
- maxWidth: 270,
91
90
  minWidth: 270
92
- }, props);
91
+ }, props), {
92
+ width: 'min-content'
93
+ });
93
94
  });
94
95
  const Loading = (0, _styles.styled)('div')(()=>({
95
96
  width: 30,
@@ -151,7 +152,7 @@ const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=
151
152
  const StyledListBox = (0, _styles.styled)('ul')(({ theme })=>{
152
153
  return {
153
154
  margin: 0,
154
- padding: 0,
155
+ padding: '8px 0px',
155
156
  listStyle: 'none',
156
157
  backgroundColor: theme.palette.common.white,
157
158
  overflow: 'auto',
@@ -159,8 +160,6 @@ const StyledListBox = (0, _styles.styled)('ul')(({ theme })=>{
159
160
  textOverflow: 'ellipsis',
160
161
  whiteSpace: 'nowrap',
161
162
  overflowX: 'hidden',
162
- paddingTop: 8,
163
- paddingBottom: 8,
164
163
  minWidth: 270,
165
164
  '&::-webkit-scrollbar': {
166
165
  width: '8px',
package/package.json CHANGED
@@ -65,5 +65,5 @@
65
65
  "require": "./dist/index.js"
66
66
  }
67
67
  },
68
- "version": "0.2.42"
68
+ "version": "0.2.43"
69
69
  }