@fixefy/fixefy-ui-components 0.1.85 → 0.1.87

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.d.ts +3 -1
  2. package/dist/FxAsyncDropdown/FxAsyncDropdown.js +104 -51
  3. package/dist/FxAsyncDropdown/styles/dropdown.styles.js +0 -1
  4. package/package.json +1 -1
package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts CHANGED
@@ -17,7 +17,9 @@ export type AsyncDropdownPropsType = {
17
17
  multiple?: boolean;
18
18
  name: any;
19
19
  variables: any;
20
- onChange?: (value: any, actionType: 'check' | 'uncheck' | null) => void;
20
+ onAdd?: (value: any) => void;
21
+ onRemoveOne?: (value: any) => void;
22
+ onRemoveAll?: () => void;
21
23
  type?: 'checkbox' | 'text';
22
24
  renderOptions?: (option: Option, index: number) => void;
23
25
  [x: string]: any;
package/dist/FxAsyncDropdown/FxAsyncDropdown.js CHANGED
@@ -121,7 +121,7 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
121
121
  });
122
122
  const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
123
123
  var _props_styles;
124
- const { onChange, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
124
+ const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
125
125
  const ref = (0, _react.useRef)(null);
126
126
  const theme = (0, _material.useTheme)();
127
127
  const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
@@ -228,7 +228,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
228
228
  }
229
229
  sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(data));
230
230
  };
231
- const removeFromStoredDisplayed = (option)=>{
231
+ const removeOneFromStoredDisplayed = (option)=>{
232
232
  let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
233
233
  if (storedDisplayed) {
234
234
  storedDisplayed = JSON.parse(storedDisplayed);
@@ -258,9 +258,9 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
258
258
  return item[search_path];
259
259
  }
260
260
  }).includes(clicked)) {
261
- deleteItem(option);
261
+ deleteOneItem(option);
262
262
  } else {
263
- onChange && onChange(option, 'check');
263
+ onAdd && onAdd(option);
264
264
  setDisplayed((prev)=>[
265
265
  ...prev,
266
266
  option
@@ -270,18 +270,22 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
270
270
  break;
271
271
  default:
272
272
  setDisplayed(option);
273
- onChange && onChange(option, null);
273
+ onAdd && onAdd(option);
274
274
  addToStoredDisplayed(option);
275
275
  }
276
276
  };
277
- const deleteItem = (item)=>{
278
- if (search_path.includes('workspace')) {
279
- setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
277
+ const deleteOneItem = (item)=>{
278
+ if (multiple) {
279
+ if (search_path.includes('workspace')) {
280
+ setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
281
+ } else {
282
+ setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
283
+ }
280
284
  } else {
281
- setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
285
+ setDisplayed('');
282
286
  }
283
- onChange && onChange(item, 'uncheck');
284
- removeFromStoredDisplayed(item);
287
+ onRemoveOne && onRemoveOne(item);
288
+ removeOneFromStoredDisplayed(item);
285
289
  };
286
290
  const isChecked = (option)=>{
287
291
  const clicked = getClicked(option);
@@ -378,27 +382,32 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
378
382
  }
379
383
  return rv;
380
384
  };
381
- const getDeleteButton = (option)=>{
382
- if (multiple) {
383
- if (displayed.length > 0) {
384
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
385
- onClick: ()=>{
386
- deleteItem(option);
387
- },
388
- children: "x"
389
- });
390
- }
391
- } else {
392
- if (displayed[search_path] === getClicked(option)) {
393
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
394
- onClick: ()=>{
395
- deleteItem(option);
396
- },
397
- children: "x"
398
- });
399
- }
385
+ const DeleteButton = ({ option })=>{
386
+ let rv = null;
387
+ switch(multiple){
388
+ case true:
389
+ if ((displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0) {
390
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
391
+ onClick: ()=>{
392
+ deleteOneItem(option);
393
+ },
394
+ children: "x"
395
+ });
396
+ }
397
+ break;
398
+ case false:
399
+ default:
400
+ if (displayed[search_path] === getClicked(option)) {
401
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
402
+ onClick: ()=>{
403
+ deleteOneItem(option);
404
+ },
405
+ children: "x"
406
+ });
407
+ }
408
+ break;
400
409
  }
401
- return null;
410
+ return rv;
402
411
  };
403
412
  const getValueByModalType = (option, location)=>{
404
413
  let rv = null;
@@ -410,7 +419,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
410
419
  label: (0, _helpers.titleCase)(clicked),
411
420
  variant: "outlined",
412
421
  onDelete: ()=>{
413
- deleteItem(option);
422
+ deleteOneItem(option);
414
423
  }
415
424
  }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
416
425
  status: clicked,
@@ -438,16 +447,25 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
438
447
  height: 16
439
448
  })
440
449
  }),
441
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
450
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
442
451
  sx: {
443
452
  width: '170px',
444
- overflow: 'hidden'
453
+ overflow: 'hidden',
454
+ display: 'flex',
455
+ justifyContent: 'flex-start',
456
+ gap: 1
445
457
  },
446
- variant: "subtitle2",
447
- color: theme.palette.typography.title,
448
- children: (0, _helpers.titleCase)(clicked)
458
+ children: [
459
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
460
+ variant: "subtitle2",
461
+ color: theme.palette.typography.title,
462
+ children: (0, _helpers.titleCase)(clicked)
463
+ }),
464
+ location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
465
+ option: option
466
+ })
467
+ ]
449
468
  }),
450
- location === 'displayed' && getDeleteButton(option),
451
469
  location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
452
470
  width: 16,
453
471
  height: 16,
@@ -469,16 +487,25 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
469
487
  cursor: 'pointer'
470
488
  },
471
489
  children: [
472
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
490
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
473
491
  sx: {
474
492
  width: '210px',
475
- overflow: 'hidden'
493
+ overflow: 'hidden',
494
+ display: 'flex',
495
+ justifyContent: 'flex-start',
496
+ gap: 1
476
497
  },
477
- variant: "subtitle2",
478
- color: theme.palette.typography.title,
479
- children: (0, _helpers.titleCase)(clicked)
498
+ children: [
499
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
500
+ variant: "subtitle2",
501
+ color: theme.palette.typography.title,
502
+ children: (0, _helpers.titleCase)(clicked)
503
+ }),
504
+ location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
505
+ option: option
506
+ })
507
+ ]
480
508
  }),
481
- location === 'displayed' && getDeleteButton(option),
482
509
  location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
483
510
  width: 16,
484
511
  height: 16,
@@ -491,18 +518,44 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
491
518
  return rv;
492
519
  };
493
520
  const getMultipleDisplayedValues = ()=>{
494
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
521
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
495
522
  direction: 'row',
496
523
  sx: {
497
524
  maxWidth: 270,
498
525
  minWidth: 270,
499
- overflow: 'hidden',
500
- flexWrap: 'wrap',
501
- gap: 1
526
+ display: 'flex',
527
+ justifyContent: 'space-between'
502
528
  },
503
- children: displayed.map((item)=>{
504
- return getValueByModalType(item, 'displayed');
505
- })
529
+ children: [
530
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
531
+ direction: 'row',
532
+ sx: {
533
+ overflow: 'hidden',
534
+ flexWrap: 'wrap',
535
+ gap: 1
536
+ },
537
+ children: displayed.map((item)=>{
538
+ return getValueByModalType(item, 'displayed');
539
+ })
540
+ }),
541
+ (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
542
+ sx: {
543
+ minWidth: '20px',
544
+ maxWidth: '20px',
545
+ cursor: 'pointer'
546
+ },
547
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
548
+ onClick: ()=>{
549
+ setDisplayed([]);
550
+ onRemoveAll && onRemoveAll();
551
+ sessionStorage.removeItem(`dropdown-${query}`);
552
+ },
553
+ icon: `filters/remove_all_button.svg`,
554
+ width: 16,
555
+ height: 16
556
+ })
557
+ })
558
+ ]
506
559
  });
507
560
  };
508
561
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
package/dist/FxAsyncDropdown/styles/dropdown.styles.js CHANGED
@@ -136,7 +136,6 @@ const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=
136
136
  color: theme.palette.typography.title,
137
137
  height: 36,
138
138
  boxSizing: 'border-box',
139
- padding: '4px 6px 4px 16px',
140
139
  width: 0,
141
140
  minWidth: 30,
142
141
  flexGrow: 1,
package/package.json CHANGED
@@ -70,5 +70,5 @@
70
70
  "require": "./dist/index.js"
71
71
  }
72
72
  },
73
- "version": "0.1.85"
73
+ "version": "0.1.87"
74
74
  }