@driveflux/ui 2.0.0 → 2.0.2
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/bottom-sheet/BottomSheetProvider.js +29 -157
- package/dist/bottom-sheet/context.js +4 -3
- package/dist/bottom-sheet/index.js +1 -0
- package/dist/bottom-sheet/use-bottom-sheet.js +2 -3
- package/dist/bottom-sheet/utils.js +5 -4
- package/dist/chakra.js +1 -0
- package/dist/modal/ModalProvider.js +55 -192
- package/dist/modal/components/EnhancedModalCustomWrapper.js +6 -118
- package/dist/modal/components/EnhancedModalFooter.js +5 -147
- package/dist/modal/components/MinimalModalContent.js +6 -79
- package/dist/modal/components/StandardModalContent.js +25 -342
- package/dist/modal/context.js +8 -7
- package/dist/modal/index.js +1 -0
- package/dist/modal/use-enhanced-modal.js +2 -1
- package/dist/theme/colors.js +63 -44
- package/dist/theme/index.js +1 -0
- package/dist/toast/index.js +3 -1
- package/dist/toast/use-toast-result.js +55 -155
- package/dist/translations.js +6 -5
- package/dist/types.js +2 -1
- package/dist/utils/accessors.js +11 -23
- package/dist/utils/index.js +1 -0
- package/dist/utils/react.js +12 -17
- package/package.json +7 -7
|
@@ -1,186 +1,86 @@
|
|
|
1
|
-
|
|
2
|
-
if (key in obj) {
|
|
3
|
-
Object.defineProperty(obj, key, {
|
|
4
|
-
value: value,
|
|
5
|
-
enumerable: true,
|
|
6
|
-
configurable: true,
|
|
7
|
-
writable: true
|
|
8
|
-
});
|
|
9
|
-
} else {
|
|
10
|
-
obj[key] = value;
|
|
11
|
-
}
|
|
12
|
-
return obj;
|
|
13
|
-
}
|
|
14
|
-
function _object_spread(target) {
|
|
15
|
-
for(var i = 1; i < arguments.length; i++){
|
|
16
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
17
|
-
var ownKeys = Object.keys(source);
|
|
18
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
19
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
20
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
21
|
-
}));
|
|
22
|
-
}
|
|
23
|
-
ownKeys.forEach(function(key) {
|
|
24
|
-
_define_property(target, key, source[key]);
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
return target;
|
|
28
|
-
}
|
|
29
|
-
function ownKeys(object, enumerableOnly) {
|
|
30
|
-
var keys = Object.keys(object);
|
|
31
|
-
if (Object.getOwnPropertySymbols) {
|
|
32
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
33
|
-
if (enumerableOnly) {
|
|
34
|
-
symbols = symbols.filter(function(sym) {
|
|
35
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
keys.push.apply(keys, symbols);
|
|
39
|
-
}
|
|
40
|
-
return keys;
|
|
41
|
-
}
|
|
42
|
-
function _object_spread_props(target, source) {
|
|
43
|
-
source = source != null ? source : {};
|
|
44
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
45
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
46
|
-
} else {
|
|
47
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
48
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
return target;
|
|
52
|
-
}
|
|
53
|
-
function _object_without_properties(source, excluded) {
|
|
54
|
-
if (source == null) return {};
|
|
55
|
-
var target = _object_without_properties_loose(source, excluded);
|
|
56
|
-
var key, i;
|
|
57
|
-
if (Object.getOwnPropertySymbols) {
|
|
58
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
59
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
60
|
-
key = sourceSymbolKeys[i];
|
|
61
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
62
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
63
|
-
target[key] = source[key];
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
return target;
|
|
67
|
-
}
|
|
68
|
-
function _object_without_properties_loose(source, excluded) {
|
|
69
|
-
if (source == null) return {};
|
|
70
|
-
var target = {};
|
|
71
|
-
var sourceKeys = Object.keys(source);
|
|
72
|
-
var key, i;
|
|
73
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
74
|
-
key = sourceKeys[i];
|
|
75
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
76
|
-
target[key] = source[key];
|
|
77
|
-
}
|
|
78
|
-
return target;
|
|
79
|
-
}
|
|
80
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
81
2
|
import merge from 'lodash/merge.js';
|
|
82
3
|
import { useCallback } from 'react';
|
|
83
|
-
import { Box, ListItem, Text, UnorderedList, useToast } from '../chakra.js';
|
|
4
|
+
import { Box, ListItem, Text, UnorderedList, useToast, } from '../chakra.js';
|
|
84
5
|
import { translations } from '../translations.js';
|
|
85
6
|
import { accessReactNode } from '../utils/accessors.js';
|
|
86
|
-
|
|
7
|
+
const accessStatus = (s, data) => {
|
|
87
8
|
return typeof s === 'function' ? s(data) : s;
|
|
88
9
|
};
|
|
89
|
-
|
|
10
|
+
const defaultUseToastResultOptions = {
|
|
90
11
|
success: {
|
|
91
12
|
status: 'success',
|
|
92
13
|
title: translations.success,
|
|
93
14
|
description: translations.successDescription,
|
|
94
|
-
isClosable: true
|
|
15
|
+
isClosable: true,
|
|
95
16
|
},
|
|
96
17
|
error: {
|
|
97
18
|
status: 'error',
|
|
98
19
|
title: translations.failed,
|
|
99
20
|
defaultDescription: translations.failedDescription,
|
|
100
21
|
showValidationErrors: true,
|
|
101
|
-
isClosable: true
|
|
102
|
-
}
|
|
22
|
+
isClosable: true,
|
|
23
|
+
},
|
|
103
24
|
};
|
|
104
|
-
export
|
|
105
|
-
return Object.values(validation.fieldErrors).flatMap(
|
|
106
|
-
return v.map(function(vd) {
|
|
107
|
-
return vd.message;
|
|
108
|
-
});
|
|
109
|
-
});
|
|
25
|
+
export const getValidationErrorsList = (validation) => {
|
|
26
|
+
return Object.values(validation.fieldErrors).flatMap((v) => v.map((vd) => vd.message));
|
|
110
27
|
};
|
|
111
|
-
|
|
28
|
+
const accessOptions = (options, data) => {
|
|
112
29
|
if (!options) {
|
|
113
30
|
return options;
|
|
114
31
|
}
|
|
115
|
-
return
|
|
32
|
+
return {
|
|
33
|
+
...options,
|
|
116
34
|
status: accessStatus(options.status, data),
|
|
117
35
|
title: accessReactNode(options.title, data),
|
|
118
|
-
description: accessReactNode(options.description, data)
|
|
119
|
-
}
|
|
36
|
+
description: accessReactNode(options.description, data),
|
|
37
|
+
};
|
|
120
38
|
};
|
|
121
|
-
export
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
})
|
|
148
|
-
})
|
|
149
|
-
}));
|
|
150
|
-
}, [
|
|
151
|
-
originalToast
|
|
152
|
-
]);
|
|
153
|
-
var toastError = useCallback(function(providedOptions) {
|
|
154
|
-
var _$options = accessOptions(merge({}, defaultUseToastResultOptions.error, providedOptions));
|
|
155
|
-
return originalToast(_object_spread({}, _$options));
|
|
156
|
-
}, [
|
|
157
|
-
originalToast
|
|
158
|
-
]);
|
|
159
|
-
var toastSuccess = useCallback(function(providedOptions) {
|
|
160
|
-
var _$options = accessOptions(merge({}, defaultUseToastResultOptions.success, providedOptions));
|
|
161
|
-
return originalToast(_object_spread({}, _$options));
|
|
162
|
-
}, [
|
|
163
|
-
originalToast
|
|
164
|
-
]);
|
|
165
|
-
var toastResult = useCallback(function(result, generalToastOptions) {
|
|
166
|
-
var _$options = merge({}, defaultUseToastResultOptions, generalToastOptions);
|
|
167
|
-
var toastType = result.ok ? 'success' : 'error';
|
|
168
|
-
var toastOptions = _$options[toastType];
|
|
39
|
+
export const useToastResult = (options) => {
|
|
40
|
+
const originalToast = useToast(accessOptions(options?.defaultOptions));
|
|
41
|
+
const toastProblem = useCallback((problem, providedOptions) => {
|
|
42
|
+
const { description, defaultDescription, showValidationErrors, ...rest } = merge({}, defaultUseToastResultOptions.error, providedOptions);
|
|
43
|
+
const problemMessage = problem.message || defaultDescription;
|
|
44
|
+
return originalToast({
|
|
45
|
+
...accessOptions(rest, problem),
|
|
46
|
+
description: accessReactNode(description, problem) || (_jsx(Box, { children: _jsxs(_Fragment, { children: [problemMessage && (_jsx(Text, { color: 'inherit', children: problemMessage })), problem.validation && showValidationErrors && (_jsx(UnorderedList, { color: 'inherit', children: getValidationErrorsList(problem.validation).map((message, i) => (_jsx(ListItem, { children: message }, message))) }))] }) })),
|
|
47
|
+
});
|
|
48
|
+
}, [originalToast]);
|
|
49
|
+
const toastError = useCallback((providedOptions) => {
|
|
50
|
+
const options = accessOptions(merge({}, defaultUseToastResultOptions.error, providedOptions));
|
|
51
|
+
return originalToast({
|
|
52
|
+
...options,
|
|
53
|
+
});
|
|
54
|
+
}, [originalToast]);
|
|
55
|
+
const toastSuccess = useCallback((providedOptions) => {
|
|
56
|
+
const options = accessOptions(merge({}, defaultUseToastResultOptions.success, providedOptions));
|
|
57
|
+
return originalToast({
|
|
58
|
+
...options,
|
|
59
|
+
});
|
|
60
|
+
}, [originalToast]);
|
|
61
|
+
const toastResult = useCallback((result, generalToastOptions) => {
|
|
62
|
+
const options = merge({}, defaultUseToastResultOptions, generalToastOptions);
|
|
63
|
+
const toastType = result.ok ? 'success' : 'error';
|
|
64
|
+
const toastOptions = options[toastType];
|
|
169
65
|
if (!toastOptions) {
|
|
170
66
|
return;
|
|
171
67
|
}
|
|
172
|
-
|
|
68
|
+
const finalToastOptions = {
|
|
69
|
+
...accessOptions(typeof toastOptions === 'boolean'
|
|
70
|
+
? defaultUseToastResultOptions[toastType]
|
|
71
|
+
: toastOptions, result.val),
|
|
72
|
+
};
|
|
173
73
|
console.log('finalToastOptions????', finalToastOptions);
|
|
174
|
-
return result.ok
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
]);
|
|
74
|
+
return result.ok
|
|
75
|
+
? toastSuccess(finalToastOptions)
|
|
76
|
+
: toastProblem(result.val, finalToastOptions);
|
|
77
|
+
}, [toastProblem, toastSuccess]);
|
|
179
78
|
return {
|
|
180
|
-
toastProblem
|
|
181
|
-
toastSuccess
|
|
182
|
-
toastResult
|
|
183
|
-
toastError
|
|
184
|
-
toast: originalToast
|
|
79
|
+
toastProblem,
|
|
80
|
+
toastSuccess,
|
|
81
|
+
toastResult,
|
|
82
|
+
toastError,
|
|
83
|
+
toast: originalToast,
|
|
185
84
|
};
|
|
186
85
|
};
|
|
86
|
+
//# sourceMappingURL=use-toast-result.js.map
|
package/dist/translations.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { singleton } from '@driveflux/singleton';
|
|
2
|
-
export
|
|
2
|
+
export const translations = singleton('uiTranslations', {
|
|
3
3
|
success: 'Success',
|
|
4
4
|
successDescription: 'Operation completed successfully.',
|
|
5
5
|
failed: 'Operation Failed',
|
|
@@ -7,15 +7,16 @@ export var translations = singleton('uiTranslations', {
|
|
|
7
7
|
cancel: 'Cancel',
|
|
8
8
|
confirm: 'Confirm',
|
|
9
9
|
close: 'Close',
|
|
10
|
-
ok: 'Ok'
|
|
10
|
+
ok: 'Ok',
|
|
11
11
|
});
|
|
12
|
-
export
|
|
13
|
-
for(
|
|
12
|
+
export const setTranslations = (ts) => {
|
|
13
|
+
for (const key in ts) {
|
|
14
14
|
// TODO
|
|
15
15
|
// @ts-expect-error
|
|
16
16
|
translations[key] = ts[key];
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
export
|
|
19
|
+
export const setTranslation = (key, value) => {
|
|
20
20
|
translations[key] = value;
|
|
21
21
|
};
|
|
22
|
+
//# sourceMappingURL=translations.js.map
|
package/dist/types.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
package/dist/utils/accessors.js
CHANGED
|
@@ -1,32 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
"@swc/helpers - typeof";
|
|
3
|
-
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
4
|
-
}
|
|
5
|
-
export var accessSelf = function(s, data, defaultValue) {
|
|
1
|
+
export const accessSelf = (s, data, defaultValue) => {
|
|
6
2
|
if (!s) {
|
|
7
3
|
return defaultValue;
|
|
8
4
|
}
|
|
9
5
|
return typeof s === 'function' ? s(data) : s;
|
|
10
6
|
};
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export var accessStringOrNull = function(s, data) {
|
|
18
|
-
var defaultText = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null;
|
|
19
|
-
return accessSelf(s, data, defaultText);
|
|
20
|
-
};
|
|
21
|
-
export var accessQuery = function(s, data, defaultQuery) {
|
|
22
|
-
return accessSelf(s, data, defaultQuery);
|
|
23
|
-
};
|
|
24
|
-
export var accessReactNode = function(s, data, defaultNode) {
|
|
25
|
-
return accessSelf(s, data, defaultNode);
|
|
26
|
-
};
|
|
27
|
-
export var accessFunction = function(f, data, defaultFunction) {
|
|
7
|
+
export const accessBoolean = (s, data, defaultBoolean) => accessSelf(s, data, defaultBoolean);
|
|
8
|
+
export const accessString = (s, data, defaultText) => accessSelf(s, data, defaultText);
|
|
9
|
+
export const accessStringOrNull = (s, data, defaultText = null) => accessSelf(s, data, defaultText);
|
|
10
|
+
export const accessQuery = (s, data, defaultQuery) => accessSelf(s, data, defaultQuery);
|
|
11
|
+
export const accessReactNode = (s, data, defaultNode) => accessSelf(s, data, defaultNode);
|
|
12
|
+
export const accessFunction = (f, data, defaultFunction) => {
|
|
28
13
|
if (!f) {
|
|
29
14
|
return defaultFunction;
|
|
30
15
|
}
|
|
31
|
-
return
|
|
16
|
+
return typeof f === 'object' && 'generateFunction' in f
|
|
17
|
+
? f.generateFunction(data)
|
|
18
|
+
: f;
|
|
32
19
|
};
|
|
20
|
+
//# sourceMappingURL=accessors.js.map
|
package/dist/utils/index.js
CHANGED
package/dist/utils/react.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
|
|
3
|
-
return !!right[Symbol.hasInstance](left);
|
|
4
|
-
} else {
|
|
5
|
-
return left instanceof right;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
import { isValidElement } from 'react';
|
|
1
|
+
import { isValidElement, } from 'react';
|
|
9
2
|
export function isReactComponent(Component) {
|
|
10
|
-
return typeof Component === 'function' &&
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
return (typeof Component === 'function' &&
|
|
4
|
+
// TODO
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- React component, it's fine
|
|
6
|
+
(Component.prototype instanceof Component ||
|
|
7
|
+
Component.displayName !== undefined));
|
|
13
8
|
}
|
|
14
9
|
export function isReactElement(element) {
|
|
15
10
|
// TODO
|
|
@@ -17,19 +12,19 @@ export function isReactElement(element) {
|
|
|
17
12
|
return isValidElement(element);
|
|
18
13
|
}
|
|
19
14
|
export function isReactNode(node) {
|
|
20
|
-
if (
|
|
15
|
+
if (
|
|
16
|
+
// TODO
|
|
21
17
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- isValidElement is a validation function
|
|
22
18
|
isValidElement(node) || // Check if it's a React element
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
typeof node === 'string' || // Check if it's a string
|
|
20
|
+
typeof node === 'number' // Check if it's a number
|
|
25
21
|
) {
|
|
26
22
|
return true;
|
|
27
23
|
}
|
|
28
24
|
// Check if it's an array of React nodes
|
|
29
|
-
if (Array.isArray(node) && node.every(
|
|
30
|
-
return isReactNode(element);
|
|
31
|
-
})) {
|
|
25
|
+
if (Array.isArray(node) && node.every((element) => isReactNode(element))) {
|
|
32
26
|
return true;
|
|
33
27
|
}
|
|
34
28
|
return false;
|
|
35
29
|
}
|
|
30
|
+
//# sourceMappingURL=react.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@driveflux/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@chakra-ui/react": "^2.10.7",
|
|
40
|
-
"@driveflux/icons": "2.0.
|
|
41
|
-
"@driveflux/singleton": "2.0.
|
|
40
|
+
"@driveflux/icons": "2.0.2",
|
|
41
|
+
"@driveflux/singleton": "2.0.2",
|
|
42
42
|
"@emotion/react": "^11.14.0",
|
|
43
43
|
"@emotion/styled": "^11.14.0",
|
|
44
44
|
"framer-motion": "^12.10.1",
|
|
45
45
|
"lodash": "^4.17.21"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@driveflux/fab": "3.0.
|
|
49
|
-
"@driveflux/problem": "5.0.
|
|
50
|
-
"@driveflux/result": "5.0.
|
|
51
|
-
"@driveflux/tsconfig": "2.0.
|
|
48
|
+
"@driveflux/fab": "3.0.2",
|
|
49
|
+
"@driveflux/problem": "5.0.2",
|
|
50
|
+
"@driveflux/result": "5.0.2",
|
|
51
|
+
"@driveflux/tsconfig": "2.0.2",
|
|
52
52
|
"@swc/cli": "0.7.5",
|
|
53
53
|
"@swc/core": "1.11.24",
|
|
54
54
|
"@types/lodash": "^4.17.16",
|