@fixefy/fixefy-ui-components 0.1.89 → 0.1.91
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.
- package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts +1 -3
- package/dist/FxAsyncDropdown/FxAsyncDropdown.js +52 -105
- package/dist/FxAsyncDropdown/styles/dropdown.styles.js +1 -0
- package/dist/FxModalWithButton/FxModalWithButton.js +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -4
- package/package.json +1 -1
- package/dist/FxFilterSortButton/FxFilterSortButton.d.ts +0 -7
- package/dist/FxFilterSortButton/FxFilterSortButton.js +0 -82
- package/dist/FxFilterSortButton/index.d.ts +0 -1
- package/dist/FxFilterSortButton/index.js +0 -11
|
@@ -17,9 +17,7 @@ export type AsyncDropdownPropsType = {
|
|
|
17
17
|
multiple?: boolean;
|
|
18
18
|
name: any;
|
|
19
19
|
variables: any;
|
|
20
|
-
|
|
21
|
-
onRemoveOne?: (value: any) => void;
|
|
22
|
-
onRemoveAll?: () => void;
|
|
20
|
+
onChange?: (value: any, actionType: 'check' | 'uncheck' | null) => void;
|
|
23
21
|
type?: 'checkbox' | 'text';
|
|
24
22
|
renderOptions?: (option: Option, index: number) => void;
|
|
25
23
|
[x: string]: any;
|
|
@@ -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 {
|
|
124
|
+
const { onChange, 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
|
|
231
|
+
const removeFromStoredDisplayed = (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
|
-
|
|
261
|
+
deleteItem(option);
|
|
262
262
|
} else {
|
|
263
|
-
|
|
263
|
+
onChange && onChange(option, 'check');
|
|
264
264
|
setDisplayed((prev)=>[
|
|
265
265
|
...prev,
|
|
266
266
|
option
|
|
@@ -270,22 +270,18 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
270
270
|
break;
|
|
271
271
|
default:
|
|
272
272
|
setDisplayed(option);
|
|
273
|
-
|
|
273
|
+
onChange && onChange(option, null);
|
|
274
274
|
addToStoredDisplayed(option);
|
|
275
275
|
}
|
|
276
276
|
};
|
|
277
|
-
const
|
|
278
|
-
if (
|
|
279
|
-
|
|
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
|
-
}
|
|
277
|
+
const deleteItem = (item)=>{
|
|
278
|
+
if (search_path.includes('workspace')) {
|
|
279
|
+
setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
|
|
284
280
|
} else {
|
|
285
|
-
setDisplayed(
|
|
281
|
+
setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
|
|
286
282
|
}
|
|
287
|
-
|
|
288
|
-
|
|
283
|
+
onChange && onChange(item, 'uncheck');
|
|
284
|
+
removeFromStoredDisplayed(item);
|
|
289
285
|
};
|
|
290
286
|
const isChecked = (option)=>{
|
|
291
287
|
const clicked = getClicked(option);
|
|
@@ -362,7 +358,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
362
358
|
const getClicked = (option)=>{
|
|
363
359
|
if (option != '') {
|
|
364
360
|
let clicked = (0, _helpers.getJPart)(option, search_path, 0) || option.title;
|
|
365
|
-
if (typeof clicked === 'object') {
|
|
361
|
+
if (clicked !== null && typeof clicked === 'object') {
|
|
366
362
|
clicked = clicked[0];
|
|
367
363
|
}
|
|
368
364
|
return clicked;
|
|
@@ -382,32 +378,27 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
382
378
|
}
|
|
383
379
|
return rv;
|
|
384
380
|
};
|
|
385
|
-
const
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
},
|
|
405
|
-
children: "x"
|
|
406
|
-
});
|
|
407
|
-
}
|
|
408
|
-
break;
|
|
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
|
+
}
|
|
409
400
|
}
|
|
410
|
-
return
|
|
401
|
+
return null;
|
|
411
402
|
};
|
|
412
403
|
const getValueByModalType = (option, location)=>{
|
|
413
404
|
let rv = null;
|
|
@@ -419,7 +410,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
419
410
|
label: (0, _helpers.titleCase)(clicked),
|
|
420
411
|
variant: "outlined",
|
|
421
412
|
onDelete: ()=>{
|
|
422
|
-
|
|
413
|
+
deleteItem(option);
|
|
423
414
|
}
|
|
424
415
|
}, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
425
416
|
status: clicked,
|
|
@@ -447,25 +438,16 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
447
438
|
height: 16
|
|
448
439
|
})
|
|
449
440
|
}),
|
|
450
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
441
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
451
442
|
sx: {
|
|
452
443
|
width: '170px',
|
|
453
|
-
overflow: 'hidden'
|
|
454
|
-
display: 'flex',
|
|
455
|
-
justifyContent: 'flex-start',
|
|
456
|
-
gap: 1
|
|
444
|
+
overflow: 'hidden'
|
|
457
445
|
},
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
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
|
-
]
|
|
446
|
+
variant: "subtitle2",
|
|
447
|
+
color: theme.palette.typography.title,
|
|
448
|
+
children: (0, _helpers.titleCase)(clicked)
|
|
468
449
|
}),
|
|
450
|
+
location === 'displayed' && getDeleteButton(option),
|
|
469
451
|
location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
470
452
|
width: 16,
|
|
471
453
|
height: 16,
|
|
@@ -487,25 +469,16 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
487
469
|
cursor: 'pointer'
|
|
488
470
|
},
|
|
489
471
|
children: [
|
|
490
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
472
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
491
473
|
sx: {
|
|
492
474
|
width: '210px',
|
|
493
|
-
overflow: 'hidden'
|
|
494
|
-
display: 'flex',
|
|
495
|
-
justifyContent: 'flex-start',
|
|
496
|
-
gap: 1
|
|
475
|
+
overflow: 'hidden'
|
|
497
476
|
},
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
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
|
-
]
|
|
477
|
+
variant: "subtitle2",
|
|
478
|
+
color: theme.palette.typography.title,
|
|
479
|
+
children: (0, _helpers.titleCase)(clicked)
|
|
508
480
|
}),
|
|
481
|
+
location === 'displayed' && getDeleteButton(option),
|
|
509
482
|
location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
510
483
|
width: 16,
|
|
511
484
|
height: 16,
|
|
@@ -518,44 +491,18 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
|
|
|
518
491
|
return rv;
|
|
519
492
|
};
|
|
520
493
|
const getMultipleDisplayedValues = ()=>{
|
|
521
|
-
return /*#__PURE__*/ (0, _jsxruntime.
|
|
494
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
522
495
|
direction: 'row',
|
|
523
496
|
sx: {
|
|
524
497
|
maxWidth: 270,
|
|
525
498
|
minWidth: 270,
|
|
526
|
-
|
|
527
|
-
|
|
499
|
+
overflow: 'hidden',
|
|
500
|
+
flexWrap: 'wrap',
|
|
501
|
+
gap: 1
|
|
528
502
|
},
|
|
529
|
-
children:
|
|
530
|
-
|
|
531
|
-
|
|
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
|
-
]
|
|
503
|
+
children: displayed.map((item)=>{
|
|
504
|
+
return getValueByModalType(item, 'displayed');
|
|
505
|
+
})
|
|
559
506
|
});
|
|
560
507
|
};
|
|
561
508
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ export { FxAggregationsBar, AggregationsDataPropsType, AggreationsBarPropsType }
|
|
|
3
3
|
export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from './FxAsyncDropdown';
|
|
4
4
|
export { FxAvatar, AvatarPropsType, BackgroundColorsType } from './FxAvatar';
|
|
5
5
|
export { FxButton, ButtonPropsType } from './FxButton';
|
|
6
|
-
export { FxFilterSortButton } from './FxFilterSortButton';
|
|
7
6
|
export { FxChip, ChipPropsType } from './FxChip';
|
|
8
7
|
export { FxIcon } from './FxIcon';
|
|
9
8
|
export { FxModal, ModalPropsType } from './FxModal';
|
package/dist/index.js
CHANGED
|
@@ -63,9 +63,6 @@ _export(exports, {
|
|
|
63
63
|
FxChip: function() {
|
|
64
64
|
return _FxChip.FxChip;
|
|
65
65
|
},
|
|
66
|
-
FxFilterSortButton: function() {
|
|
67
|
-
return _FxFilterSortButton.FxFilterSortButton;
|
|
68
|
-
},
|
|
69
66
|
FxIcon: function() {
|
|
70
67
|
return _FxIcon.FxIcon;
|
|
71
68
|
},
|
|
@@ -195,7 +192,6 @@ const _FxAggregationsBar = require("./FxAggregationsBar");
|
|
|
195
192
|
const _FxAsyncDropdown = require("./FxAsyncDropdown");
|
|
196
193
|
const _FxAvatar = require("./FxAvatar");
|
|
197
194
|
const _FxButton = require("./FxButton");
|
|
198
|
-
const _FxFilterSortButton = require("./FxFilterSortButton");
|
|
199
195
|
const _FxChip = require("./FxChip");
|
|
200
196
|
const _FxIcon = require("./FxIcon");
|
|
201
197
|
const _FxModal = require("./FxModal");
|
package/package.json
CHANGED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "FxFilterSortButton", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return FxFilterSortButton;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _jsxruntime = require("react/jsx-runtime");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
13
|
-
const _material = require("@mui/material");
|
|
14
|
-
function _define_property(obj, key, value) {
|
|
15
|
-
if (key in obj) {
|
|
16
|
-
Object.defineProperty(obj, key, {
|
|
17
|
-
value: value,
|
|
18
|
-
enumerable: true,
|
|
19
|
-
configurable: true,
|
|
20
|
-
writable: true
|
|
21
|
-
});
|
|
22
|
-
} else {
|
|
23
|
-
obj[key] = value;
|
|
24
|
-
}
|
|
25
|
-
return obj;
|
|
26
|
-
}
|
|
27
|
-
function _interop_require_default(obj) {
|
|
28
|
-
return obj && obj.__esModule ? obj : {
|
|
29
|
-
default: obj
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
function _object_spread(target) {
|
|
33
|
-
for(var i = 1; i < arguments.length; i++){
|
|
34
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
35
|
-
var ownKeys = Object.keys(source);
|
|
36
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
37
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
38
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
39
|
-
}));
|
|
40
|
-
}
|
|
41
|
-
ownKeys.forEach(function(key) {
|
|
42
|
-
_define_property(target, key, source[key]);
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
return target;
|
|
46
|
-
}
|
|
47
|
-
function ownKeys(object, enumerableOnly) {
|
|
48
|
-
var keys = Object.keys(object);
|
|
49
|
-
if (Object.getOwnPropertySymbols) {
|
|
50
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
51
|
-
if (enumerableOnly) {
|
|
52
|
-
symbols = symbols.filter(function(sym) {
|
|
53
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
keys.push.apply(keys, symbols);
|
|
57
|
-
}
|
|
58
|
-
return keys;
|
|
59
|
-
}
|
|
60
|
-
function _object_spread_props(target, source) {
|
|
61
|
-
source = source != null ? source : {};
|
|
62
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
63
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
64
|
-
} else {
|
|
65
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
66
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
return target;
|
|
70
|
-
}
|
|
71
|
-
const FxFilterSortButton = ({ btnValue, onClick, startIcon, sx })=>{
|
|
72
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
|
|
73
|
-
id: "fade-button",
|
|
74
|
-
sx: _object_spread_props(_object_spread({}, sx), {
|
|
75
|
-
fontWeight: 'normal'
|
|
76
|
-
}),
|
|
77
|
-
"aria-haspopup": "true",
|
|
78
|
-
startIcon: startIcon,
|
|
79
|
-
onClick: onClick,
|
|
80
|
-
children: btnValue
|
|
81
|
-
});
|
|
82
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { FxFilterSortButton } from './FxFilterSortButton';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "FxFilterSortButton", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return _FxFilterSortButton.FxFilterSortButton;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _FxFilterSortButton = require("./FxFilterSortButton");
|