@fixefy/fixefy-ui-components 0.3.54 → 0.3.55
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.js +30 -30
- package/dist/FxAsyncDropdown/components/ChipOption.d.ts +4 -1
- package/dist/FxAsyncDropdown/components/ChipOption.js +1 -3
- package/dist/FxAsyncDropdown/components/ChosenIcon.d.ts +3 -1
- package/dist/FxAsyncDropdown/components/ChosenIcon.js +1 -3
- package/dist/FxAsyncDropdown/components/DeleteButton.d.ts +4 -1
- package/dist/FxAsyncDropdown/components/DeleteButton.js +1 -3
- package/dist/FxAsyncDropdown/components/LogoOption.d.ts +4 -1
- package/dist/FxAsyncDropdown/components/LogoOption.js +11 -7
- package/dist/FxAsyncDropdown/components/TextOption.d.ts +4 -1
- package/dist/FxAsyncDropdown/components/TextOption.js +8 -3
- package/package.json +2 -3
|
@@ -18,7 +18,6 @@ const _helpers = require("./helpers/helpers");
|
|
|
18
18
|
const _client = require("@apollo/client");
|
|
19
19
|
const _nookies = require("nookies");
|
|
20
20
|
const _components = require("./components");
|
|
21
|
-
const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./useDropdownStore"));
|
|
22
21
|
function _define_property(obj, key, value) {
|
|
23
22
|
if (key in obj) {
|
|
24
23
|
Object.defineProperty(obj, key, {
|
|
@@ -32,11 +31,6 @@ function _define_property(obj, key, value) {
|
|
|
32
31
|
}
|
|
33
32
|
return obj;
|
|
34
33
|
}
|
|
35
|
-
function _interop_require_default(obj) {
|
|
36
|
-
return obj && obj.__esModule ? obj : {
|
|
37
|
-
default: obj
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
34
|
function _getRequireWildcardCache(nodeInterop) {
|
|
41
35
|
if (typeof WeakMap !== "function") return null;
|
|
42
36
|
var cacheBabelInterop = new WeakMap();
|
|
@@ -118,7 +112,6 @@ function _object_spread_props(target, source) {
|
|
|
118
112
|
return target;
|
|
119
113
|
}
|
|
120
114
|
const FxAsyncDropdown = (props)=>{
|
|
121
|
-
const { fetchedProps, setFetchedProps, displayed, setDisplayed, options, setOptions, reason, setReason, isLastPage, setIsLastPage, isOpen, setIsOpen, searchValue, setSearchValue, page, setPage, prevPage, setPrevPage, pageSize, loadMore } = (0, _useDropdownStore.default)();
|
|
122
115
|
const { onAdd, onRemoveAll, onUnselectAll, fetcher, disabled, defaultValue, type = 'text', variables, search_path, modal_type, multiple, name, query, isInitialOpen, placeholder, title_path, rootStylesOverride, options_path, _id } = props;
|
|
123
116
|
const ref = (0, _react.useRef)(null);
|
|
124
117
|
const { method_name } = variables !== null && variables !== void 0 ? variables : {};
|
|
@@ -127,6 +120,15 @@ const FxAsyncDropdown = (props)=>{
|
|
|
127
120
|
var _parseCookies;
|
|
128
121
|
const { ws } = (_parseCookies = (0, _nookies.parseCookies)()) !== null && _parseCookies !== void 0 ? _parseCookies : {};
|
|
129
122
|
const [defaultValueWhere, setDefaultValueWhere] = (0, _react.useState)(where);
|
|
123
|
+
const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
|
|
124
|
+
const [options, setOptions] = (0, _react.useState)([]);
|
|
125
|
+
const [reason, setReason] = (0, _react.useState)('init');
|
|
126
|
+
const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
|
|
127
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
|
|
128
|
+
const [searchValue, setSearchValue] = (0, _react.useState)(null);
|
|
129
|
+
const [page, setPage] = (0, _react.useState)(1);
|
|
130
|
+
const [prevPage, setPrevPage] = (0, _react.useState)(0);
|
|
131
|
+
const pageSize = 20;
|
|
130
132
|
const getWhere = ()=>{
|
|
131
133
|
if (method_name == 'workspace') {
|
|
132
134
|
return searchValue ? _object_spread_props(_object_spread({}, where), {
|
|
@@ -147,6 +149,10 @@ const FxAsyncDropdown = (props)=>{
|
|
|
147
149
|
}) : _object_spread({}, where);
|
|
148
150
|
}
|
|
149
151
|
};
|
|
152
|
+
const loadMore = ()=>{
|
|
153
|
+
setPage((prevPage)=>prevPage + 1);
|
|
154
|
+
setPrevPage((prevPage)=>prevPage + 1);
|
|
155
|
+
};
|
|
150
156
|
const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
|
|
151
157
|
variables: {
|
|
152
158
|
where: getWhere(),
|
|
@@ -184,18 +190,6 @@ const FxAsyncDropdown = (props)=>{
|
|
|
184
190
|
} else {
|
|
185
191
|
setDisplayed(items[0]);
|
|
186
192
|
}
|
|
187
|
-
} else {
|
|
188
|
-
if (multiple) {
|
|
189
|
-
setDisplayed([]);
|
|
190
|
-
} else {
|
|
191
|
-
setDisplayed('');
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
} else {
|
|
195
|
-
if (multiple) {
|
|
196
|
-
setDisplayed([]);
|
|
197
|
-
} else {
|
|
198
|
-
setDisplayed('');
|
|
199
193
|
}
|
|
200
194
|
}
|
|
201
195
|
}, [
|
|
@@ -241,9 +235,6 @@ const FxAsyncDropdown = (props)=>{
|
|
|
241
235
|
defaultValue,
|
|
242
236
|
defaultValueData
|
|
243
237
|
]);
|
|
244
|
-
(0, _react.useEffect)(()=>{
|
|
245
|
-
setFetchedProps(props);
|
|
246
|
-
}, []);
|
|
247
238
|
const handleSearch = (e)=>{
|
|
248
239
|
setSearchValue(e.target.value);
|
|
249
240
|
setReason('searched');
|
|
@@ -258,7 +249,7 @@ const FxAsyncDropdown = (props)=>{
|
|
|
258
249
|
if (displayed.map((item)=>{
|
|
259
250
|
return item[title_path];
|
|
260
251
|
}).includes(clicked)) {
|
|
261
|
-
(0, _helpers.deleteOneItem)(option,
|
|
252
|
+
(0, _helpers.deleteOneItem)(option, props, displayed, setDisplayed);
|
|
262
253
|
} else {
|
|
263
254
|
if (onAdd) {
|
|
264
255
|
onAdd(option);
|
|
@@ -271,7 +262,7 @@ const FxAsyncDropdown = (props)=>{
|
|
|
271
262
|
option
|
|
272
263
|
];
|
|
273
264
|
setDisplayed(opts);
|
|
274
|
-
(0, _helpers.addToStoredDisplayed)(option,
|
|
265
|
+
(0, _helpers.addToStoredDisplayed)(option, props);
|
|
275
266
|
}
|
|
276
267
|
break;
|
|
277
268
|
default:
|
|
@@ -279,7 +270,7 @@ const FxAsyncDropdown = (props)=>{
|
|
|
279
270
|
if (onAdd) {
|
|
280
271
|
onAdd(option);
|
|
281
272
|
}
|
|
282
|
-
(0, _helpers.addToStoredDisplayed)(option,
|
|
273
|
+
(0, _helpers.addToStoredDisplayed)(option, props);
|
|
283
274
|
if (!multiple && !defaultValue) {
|
|
284
275
|
setIsOpen(false);
|
|
285
276
|
}
|
|
@@ -336,7 +327,7 @@ const FxAsyncDropdown = (props)=>{
|
|
|
336
327
|
},
|
|
337
328
|
children: [
|
|
338
329
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.CheckboxIcon, {
|
|
339
|
-
checked: (0, _helpers.isChecked)(option, displayed,
|
|
330
|
+
checked: (0, _helpers.isChecked)(option, displayed, props)
|
|
340
331
|
}),
|
|
341
332
|
getSingleOptionFromListOrDisplayed(option, 'list')
|
|
342
333
|
]
|
|
@@ -375,14 +366,20 @@ const FxAsyncDropdown = (props)=>{
|
|
|
375
366
|
rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChipOption, {
|
|
376
367
|
option: option,
|
|
377
368
|
curValue: clicked,
|
|
378
|
-
modal: modal
|
|
369
|
+
modal: modal,
|
|
370
|
+
fetchedProps: props,
|
|
371
|
+
displayed: displayed,
|
|
372
|
+
setDisplayed: setDisplayed
|
|
379
373
|
});
|
|
380
374
|
break;
|
|
381
375
|
case 'logo':
|
|
382
376
|
rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LogoOption, {
|
|
383
377
|
option: option,
|
|
384
378
|
curValue: clicked,
|
|
385
|
-
modal: modal
|
|
379
|
+
modal: modal,
|
|
380
|
+
fetchedProps: props,
|
|
381
|
+
displayed: displayed,
|
|
382
|
+
setDisplayed: setDisplayed
|
|
386
383
|
});
|
|
387
384
|
break;
|
|
388
385
|
case 'text':
|
|
@@ -390,7 +387,10 @@ const FxAsyncDropdown = (props)=>{
|
|
|
390
387
|
rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TextOption, {
|
|
391
388
|
option: option,
|
|
392
389
|
curValue: clicked,
|
|
393
|
-
modal: modal
|
|
390
|
+
modal: modal,
|
|
391
|
+
fetchedProps: props,
|
|
392
|
+
displayed: displayed,
|
|
393
|
+
setDisplayed: setDisplayed
|
|
394
394
|
});
|
|
395
395
|
break;
|
|
396
396
|
}
|
|
@@ -476,7 +476,7 @@ const FxAsyncDropdown = (props)=>{
|
|
|
476
476
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
|
|
477
477
|
onClick: ()=>{
|
|
478
478
|
setReason('loaded more');
|
|
479
|
-
loadMore(
|
|
479
|
+
loadMore();
|
|
480
480
|
},
|
|
481
481
|
children: "load more"
|
|
482
482
|
})
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const ChipOption: ({ option, curValue, modal }: {
|
|
2
|
+
export declare const ChipOption: ({ option, curValue, modal, fetchedProps, displayed, setDisplayed }: {
|
|
3
3
|
option: any;
|
|
4
4
|
curValue: any;
|
|
5
5
|
modal: 'displayed' | 'list';
|
|
6
|
+
fetchedProps: any;
|
|
7
|
+
displayed: any;
|
|
8
|
+
setDisplayed: any;
|
|
6
9
|
}) => React.JSX.Element;
|
|
@@ -12,14 +12,12 @@ const _jsxruntime = require("react/jsx-runtime");
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
13
13
|
const _FxChip = require("../../FxChip");
|
|
14
14
|
const _helpers = require("../helpers/helpers");
|
|
15
|
-
const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
|
|
16
15
|
function _interop_require_default(obj) {
|
|
17
16
|
return obj && obj.__esModule ? obj : {
|
|
18
17
|
default: obj
|
|
19
18
|
};
|
|
20
19
|
}
|
|
21
|
-
const ChipOption = ({ option, curValue, modal })=>{
|
|
22
|
-
const { fetchedProps, displayed, setDisplayed } = (0, _useDropdownStore.default)();
|
|
20
|
+
const ChipOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
|
|
23
21
|
return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
|
|
24
22
|
status: curValue,
|
|
25
23
|
label: (0, _helpers.titleCase)(curValue),
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const ChosenIcon: ({ option, isDisplay }: {
|
|
2
|
+
export declare const ChosenIcon: ({ option, isDisplay, fetchedProps, displayed }: {
|
|
3
3
|
option: any;
|
|
4
4
|
isDisplay: boolean;
|
|
5
|
+
fetchedProps: any;
|
|
6
|
+
displayed: any;
|
|
5
7
|
}) => React.JSX.Element | null;
|
|
@@ -12,14 +12,12 @@ const _jsxruntime = require("react/jsx-runtime");
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
13
13
|
const _FxIcon = require("../../FxIcon");
|
|
14
14
|
const _helpers = require("../helpers/helpers");
|
|
15
|
-
const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
|
|
16
15
|
function _interop_require_default(obj) {
|
|
17
16
|
return obj && obj.__esModule ? obj : {
|
|
18
17
|
default: obj
|
|
19
18
|
};
|
|
20
19
|
}
|
|
21
|
-
const ChosenIcon = ({ option, isDisplay })=>{
|
|
22
|
-
const { fetchedProps, displayed } = (0, _useDropdownStore.default)();
|
|
20
|
+
const ChosenIcon = ({ option, isDisplay, fetchedProps, displayed })=>{
|
|
23
21
|
const { title_path, multiple, search_path } = fetchedProps;
|
|
24
22
|
const isChecked = (option)=>{
|
|
25
23
|
const clicked = (0, _helpers.getOption)(option, title_path);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const DeleteButton: ({ option, isDisplay }: {
|
|
2
|
+
export declare const DeleteButton: ({ option, isDisplay, fetchedProps, displayed, setDisplayed }: {
|
|
3
3
|
option: any;
|
|
4
4
|
isDisplay: boolean;
|
|
5
|
+
fetchedProps: any;
|
|
6
|
+
displayed: any;
|
|
7
|
+
setDisplayed: any;
|
|
5
8
|
}) => React.JSX.Element | null;
|
|
@@ -11,15 +11,13 @@ Object.defineProperty(exports, "DeleteButton", {
|
|
|
11
11
|
const _jsxruntime = require("react/jsx-runtime");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
13
13
|
const _material = require("@mui/material");
|
|
14
|
-
const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
|
|
15
14
|
const _helpers = require("../helpers/helpers");
|
|
16
15
|
function _interop_require_default(obj) {
|
|
17
16
|
return obj && obj.__esModule ? obj : {
|
|
18
17
|
default: obj
|
|
19
18
|
};
|
|
20
19
|
}
|
|
21
|
-
const DeleteButton = ({ option, isDisplay })=>{
|
|
22
|
-
const { fetchedProps, displayed, setDisplayed } = (0, _useDropdownStore.default)();
|
|
20
|
+
const DeleteButton = ({ option, isDisplay, fetchedProps, displayed, setDisplayed })=>{
|
|
23
21
|
const { multiple, search_path, getOption, title_path } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
|
|
24
22
|
const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === getOption(option, title_path));
|
|
25
23
|
switch(isDisplayButton){
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const LogoOption: ({ option, curValue, modal }: {
|
|
2
|
+
export declare const LogoOption: ({ option, curValue, modal, fetchedProps, displayed, setDisplayed }: {
|
|
3
3
|
option: any;
|
|
4
4
|
curValue: any;
|
|
5
5
|
modal: 'displayed' | 'list';
|
|
6
|
+
fetchedProps: any;
|
|
7
|
+
displayed: any;
|
|
8
|
+
setDisplayed: any;
|
|
6
9
|
}) => React.JSX.Element;
|
|
@@ -17,13 +17,12 @@ const _helpers = require("../helpers/helpers");
|
|
|
17
17
|
const _fixefyhooks = require("@fixefy/fixefy-hooks");
|
|
18
18
|
const _DeleteButton = require("./DeleteButton");
|
|
19
19
|
const _ChosenIcon = require("./ChosenIcon");
|
|
20
|
-
const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
|
|
21
20
|
function _interop_require_default(obj) {
|
|
22
21
|
return obj && obj.__esModule ? obj : {
|
|
23
22
|
default: obj
|
|
24
23
|
};
|
|
25
24
|
}
|
|
26
|
-
const LogoOption = ({ option, curValue, modal })=>{
|
|
25
|
+
const LogoOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
|
|
27
26
|
const theme = (0, _styles.useTheme)();
|
|
28
27
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
|
|
29
28
|
sx: {
|
|
@@ -45,7 +44,8 @@ const LogoOption = ({ option, curValue, modal })=>{
|
|
|
45
44
|
},
|
|
46
45
|
children: [
|
|
47
46
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
|
|
48
|
-
option: option
|
|
47
|
+
option: option,
|
|
48
|
+
fetchedProps: fetchedProps
|
|
49
49
|
}),
|
|
50
50
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
|
|
51
51
|
sx: {
|
|
@@ -61,7 +61,10 @@ const LogoOption = ({ option, curValue, modal })=>{
|
|
|
61
61
|
}),
|
|
62
62
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
|
|
63
63
|
option: option,
|
|
64
|
-
isDisplay: modal == 'displayed'
|
|
64
|
+
isDisplay: modal == 'displayed',
|
|
65
|
+
fetchedProps: fetchedProps,
|
|
66
|
+
displayed: displayed,
|
|
67
|
+
setDisplayed: setDisplayed
|
|
65
68
|
})
|
|
66
69
|
]
|
|
67
70
|
})
|
|
@@ -69,14 +72,15 @@ const LogoOption = ({ option, curValue, modal })=>{
|
|
|
69
72
|
}),
|
|
70
73
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
|
|
71
74
|
option: option,
|
|
72
|
-
isDisplay: modal == 'list'
|
|
75
|
+
isDisplay: modal == 'list',
|
|
76
|
+
fetchedProps: fetchedProps,
|
|
77
|
+
displayed: displayed
|
|
73
78
|
})
|
|
74
79
|
]
|
|
75
80
|
}, option._id);
|
|
76
81
|
};
|
|
77
|
-
const Logo = ({ option })=>{
|
|
82
|
+
const Logo = ({ option, fetchedProps })=>{
|
|
78
83
|
const getRandomColor = (0, _fixefyhooks.useRandomColor)();
|
|
79
|
-
const { fetchedProps } = (0, _useDropdownStore.default)();
|
|
80
84
|
const { logo_folder_name, logo_placeholder, name } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
|
|
81
85
|
var _option_name;
|
|
82
86
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const TextOption: ({ option, curValue, modal }: {
|
|
2
|
+
export declare const TextOption: ({ option, curValue, modal, fetchedProps, displayed, setDisplayed }: {
|
|
3
3
|
option: any;
|
|
4
4
|
curValue: any;
|
|
5
5
|
modal: 'displayed' | 'list';
|
|
6
|
+
fetchedProps: any;
|
|
7
|
+
displayed: any;
|
|
8
|
+
setDisplayed: any;
|
|
6
9
|
}) => React.JSX.Element;
|
|
@@ -20,7 +20,7 @@ function _interop_require_default(obj) {
|
|
|
20
20
|
default: obj
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
const TextOption = ({ option, curValue, modal })=>{
|
|
23
|
+
const TextOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
|
|
24
24
|
const theme = (0, _styles.useTheme)();
|
|
25
25
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
|
|
26
26
|
sx: {
|
|
@@ -54,14 +54,19 @@ const TextOption = ({ option, curValue, modal })=>{
|
|
|
54
54
|
}),
|
|
55
55
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
|
|
56
56
|
option: option,
|
|
57
|
-
isDisplay: modal == 'displayed'
|
|
57
|
+
isDisplay: modal == 'displayed',
|
|
58
|
+
fetchedProps: fetchedProps,
|
|
59
|
+
displayed: displayed,
|
|
60
|
+
setDisplayed: setDisplayed
|
|
58
61
|
})
|
|
59
62
|
]
|
|
60
63
|
})
|
|
61
64
|
}),
|
|
62
65
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
|
|
63
66
|
option: option,
|
|
64
|
-
isDisplay: modal == 'list'
|
|
67
|
+
isDisplay: modal == 'list',
|
|
68
|
+
fetchedProps: fetchedProps,
|
|
69
|
+
displayed: displayed
|
|
65
70
|
})
|
|
66
71
|
]
|
|
67
72
|
}, option._id);
|
package/package.json
CHANGED
|
@@ -19,8 +19,7 @@
|
|
|
19
19
|
"react": "18.3.1",
|
|
20
20
|
"react-dom": "18.3.1",
|
|
21
21
|
"react-use-wizard": "2.3.0",
|
|
22
|
-
"tss-react": "^4.9.14"
|
|
23
|
-
"zustand": "^5.0.3"
|
|
22
|
+
"tss-react": "^4.9.14"
|
|
24
23
|
},
|
|
25
24
|
"devDependencies": {
|
|
26
25
|
"@svgr/webpack": "8.1.0",
|
|
@@ -70,5 +69,5 @@
|
|
|
70
69
|
"require": "./dist/index.js"
|
|
71
70
|
}
|
|
72
71
|
},
|
|
73
|
-
"version": "0.3.
|
|
72
|
+
"version": "0.3.55"
|
|
74
73
|
}
|