@driveflux/ui 3.0.3 → 3.0.5
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 +59 -197
- 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 +54 -152
- 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 +20 -20
|
@@ -1,63 +1,16 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _iterable_to_array_limit(arr, i) {
|
|
10
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
11
|
-
if (_i == null) return;
|
|
12
|
-
var _arr = [];
|
|
13
|
-
var _n = true;
|
|
14
|
-
var _d = false;
|
|
15
|
-
var _s, _e;
|
|
16
|
-
try {
|
|
17
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
18
|
-
_arr.push(_s.value);
|
|
19
|
-
if (i && _arr.length === i) break;
|
|
20
|
-
}
|
|
21
|
-
} catch (err) {
|
|
22
|
-
_d = true;
|
|
23
|
-
_e = err;
|
|
24
|
-
} finally{
|
|
25
|
-
try {
|
|
26
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
27
|
-
} finally{
|
|
28
|
-
if (_d) throw _e;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return _arr;
|
|
32
|
-
}
|
|
33
|
-
function _non_iterable_rest() {
|
|
34
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
35
|
-
}
|
|
36
|
-
function _sliced_to_array(arr, i) {
|
|
37
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
38
|
-
}
|
|
39
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
40
|
-
if (!o) return;
|
|
41
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
42
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
43
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
44
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
45
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
46
|
-
}
|
|
47
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
48
2
|
import { IconClose } from '@driveflux/icons';
|
|
49
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
50
|
-
import { Box, Button, Divider, HStack, Slide, Text, useDisclosure, VStack } from '../chakra.js';
|
|
3
|
+
import { useCallback, useEffect, useRef, useState, } from 'react';
|
|
4
|
+
import { Box, Button, Divider, HStack, Slide, Text, useDisclosure, VStack, } from '../chakra.js';
|
|
51
5
|
import { colors } from '../theme/index.js';
|
|
52
6
|
import { BottomSheetContext } from './context.js';
|
|
53
7
|
import { isMobile } from './utils.js';
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
var anchorY = useRef(0);
|
|
8
|
+
const BottomSheetProvider = ({ children }) => {
|
|
9
|
+
const { isOpen, onClose, onOpen } = useDisclosure();
|
|
10
|
+
const [options, setOptions] = useState(null);
|
|
11
|
+
const anchorY = useRef(0);
|
|
59
12
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
60
|
-
|
|
13
|
+
const open = useCallback((options) => {
|
|
61
14
|
if (!isMobile(navigator) && !options.showOnDesktop) {
|
|
62
15
|
console.log('isMobile(navigator)', isMobile(navigator));
|
|
63
16
|
return;
|
|
@@ -66,137 +19,56 @@ var BottomSheetProvider = function(param) {
|
|
|
66
19
|
onOpen();
|
|
67
20
|
document.body.style.overflow = 'hidden';
|
|
68
21
|
}, []);
|
|
69
|
-
|
|
22
|
+
const close = () => {
|
|
70
23
|
onClose();
|
|
71
24
|
setOptions(null);
|
|
72
25
|
document.body.style.overflow = 'auto';
|
|
73
26
|
};
|
|
74
|
-
|
|
27
|
+
const dismissWithAnimation = (element) => {
|
|
75
28
|
element.style.transition = 'transform 200ms ease-in';
|
|
76
29
|
element.style.transform = 'translateY(100%)';
|
|
77
|
-
setTimeout(
|
|
78
|
-
|
|
79
|
-
options === null || options === void 0 ? void 0 : (_options_onClose = options.onClose) === null || _options_onClose === void 0 ? void 0 : _options_onClose.call(options, 'handle');
|
|
30
|
+
setTimeout(() => {
|
|
31
|
+
options?.onClose?.('handle');
|
|
80
32
|
close();
|
|
81
33
|
element.style.transition = '';
|
|
82
34
|
}, 200);
|
|
83
35
|
};
|
|
84
|
-
useEffect(
|
|
36
|
+
useEffect(() => {
|
|
85
37
|
if (!options) {
|
|
86
38
|
return;
|
|
87
39
|
}
|
|
88
|
-
}, [
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
return /*#__PURE__*/ _jsxs(BottomSheetContext.Provider, {
|
|
92
|
-
value: {
|
|
93
|
-
isOpen: isOpen,
|
|
94
|
-
open: open,
|
|
95
|
-
close: close
|
|
96
|
-
},
|
|
97
|
-
children: [
|
|
98
|
-
children,
|
|
99
|
-
/*#__PURE__*/ _jsx(Box, {
|
|
100
|
-
display: isOpen ? 'block' : 'none',
|
|
101
|
-
position: 'fixed',
|
|
102
|
-
top: 0,
|
|
103
|
-
left: 0,
|
|
104
|
-
right: 0,
|
|
105
|
-
bottom: 0,
|
|
106
|
-
background: 'blackAlpha.600',
|
|
107
|
-
zIndex: 'modal',
|
|
108
|
-
onClick: function() {
|
|
109
|
-
var _options_onClose;
|
|
110
|
-
options === null || options === void 0 ? void 0 : (_options_onClose = options.onClose) === null || _options_onClose === void 0 ? void 0 : _options_onClose.call(options, 'overlay');
|
|
40
|
+
}, [options]);
|
|
41
|
+
return (_jsxs(BottomSheetContext.Provider, { value: { isOpen, open, close }, children: [children, _jsx(Box, { display: isOpen ? 'block' : 'none', position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'blackAlpha.600', zIndex: 'modal', onClick: () => {
|
|
42
|
+
options?.onClose?.('overlay');
|
|
111
43
|
close();
|
|
112
|
-
}
|
|
113
|
-
}),
|
|
114
|
-
/*#__PURE__*/ _jsx(Slide, {
|
|
115
|
-
direction: 'bottom',
|
|
116
|
-
in: isOpen,
|
|
117
|
-
style: {
|
|
118
|
-
zIndex: 1500,
|
|
119
|
-
position: 'fixed'
|
|
120
|
-
},
|
|
121
|
-
children: /*#__PURE__*/ _jsxs(Box, {
|
|
122
|
-
background: colors.white,
|
|
123
|
-
borderTopLeftRadius: '24px',
|
|
124
|
-
borderTopRightRadius: '24px',
|
|
125
|
-
children: [
|
|
126
|
-
/*#__PURE__*/ _jsxs(VStack, {
|
|
127
|
-
padding: '8px 24px 16px',
|
|
128
|
-
cursor: 'pointer',
|
|
44
|
+
} }), _jsx(Slide, { direction: 'bottom', in: isOpen, style: { zIndex: 1500, position: 'fixed' }, children: _jsxs(Box, { background: colors.white, borderTopLeftRadius: '24px', borderTopRightRadius: '24px', children: [_jsxs(VStack, { padding: '8px 24px 16px', cursor: 'pointer',
|
|
129
45
|
// mobile touch
|
|
130
|
-
onTouchStart:
|
|
131
|
-
|
|
46
|
+
onTouchStart: (e) => {
|
|
47
|
+
const touch = e.touches[0];
|
|
132
48
|
anchorY.current = touch.clientY;
|
|
133
|
-
},
|
|
134
|
-
|
|
135
|
-
var _e_currentTarget_parentElement;
|
|
136
|
-
var parent = (_e_currentTarget_parentElement = e.currentTarget.parentElement) === null || _e_currentTarget_parentElement === void 0 ? void 0 : _e_currentTarget_parentElement.parentElement;
|
|
49
|
+
}, onTouchMove: (e) => {
|
|
50
|
+
const parent = e.currentTarget.parentElement?.parentElement;
|
|
137
51
|
if (!parent) {
|
|
138
52
|
return;
|
|
139
53
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
parent.style.bottom =
|
|
54
|
+
const touch = e.touches[0];
|
|
55
|
+
const distance = touch.clientY - anchorY.current;
|
|
56
|
+
parent.style.bottom = `-${distance}px`;
|
|
143
57
|
if (distance > 80 && touch.clientY > window.innerHeight / 2) {
|
|
144
58
|
anchorY.current = 0;
|
|
145
59
|
dismissWithAnimation(parent);
|
|
146
60
|
}
|
|
147
|
-
},
|
|
148
|
-
onTouchEnd: function(e) {
|
|
149
|
-
var _e_currentTarget_parentElement;
|
|
61
|
+
}, onTouchEnd: (e) => {
|
|
150
62
|
anchorY.current = 0;
|
|
151
|
-
|
|
63
|
+
const parent = e.currentTarget.parentElement?.parentElement;
|
|
152
64
|
if (!parent) {
|
|
153
65
|
return;
|
|
154
66
|
}
|
|
155
67
|
parent.style.bottom = '0px';
|
|
156
|
-
},
|
|
157
|
-
|
|
158
|
-
/*#__PURE__*/ _jsx(Box, {
|
|
159
|
-
backgroundColor: colors.primary2,
|
|
160
|
-
borderRadius: '4px',
|
|
161
|
-
w: '44px',
|
|
162
|
-
height: '4px'
|
|
163
|
-
}),
|
|
164
|
-
/*#__PURE__*/ _jsxs(HStack, {
|
|
165
|
-
w: 'full',
|
|
166
|
-
justifyContent: 'space-between',
|
|
167
|
-
children: [
|
|
168
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
169
|
-
fontSize: '12px',
|
|
170
|
-
letterSpacing: '1px',
|
|
171
|
-
textStyle: 'bold',
|
|
172
|
-
textTransform: 'uppercase',
|
|
173
|
-
children: options === null || options === void 0 ? void 0 : options.title
|
|
174
|
-
}),
|
|
175
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
176
|
-
variant: 'invisible',
|
|
177
|
-
onClick: function() {
|
|
178
|
-
var _options_onClose;
|
|
179
|
-
options === null || options === void 0 ? void 0 : (_options_onClose = options.onClose) === null || _options_onClose === void 0 ? void 0 : _options_onClose.call(options, 'close_button');
|
|
68
|
+
}, children: [_jsx(Box, { backgroundColor: colors.primary2, borderRadius: '4px', w: '44px', height: '4px' }), _jsxs(HStack, { w: 'full', justifyContent: 'space-between', children: [_jsx(Text, { fontSize: '12px', letterSpacing: '1px', textStyle: 'bold', textTransform: 'uppercase', children: options?.title }), _jsx(Button, { variant: 'invisible', onClick: () => {
|
|
69
|
+
options?.onClose?.('close_button');
|
|
180
70
|
close();
|
|
181
|
-
},
|
|
182
|
-
children: /*#__PURE__*/ _jsx(IconClose, {
|
|
183
|
-
size: '16px'
|
|
184
|
-
})
|
|
185
|
-
})
|
|
186
|
-
]
|
|
187
|
-
})
|
|
188
|
-
]
|
|
189
|
-
}),
|
|
190
|
-
/*#__PURE__*/ _jsx(Divider, {}),
|
|
191
|
-
/*#__PURE__*/ _jsx(Box, {
|
|
192
|
-
overflowY: 'scroll',
|
|
193
|
-
maxH: '80vh',
|
|
194
|
-
children: options === null || options === void 0 ? void 0 : options.content
|
|
195
|
-
})
|
|
196
|
-
]
|
|
197
|
-
})
|
|
198
|
-
})
|
|
199
|
-
]
|
|
200
|
-
});
|
|
71
|
+
}, children: _jsx(IconClose, { size: '16px' }) })] })] }), _jsx(Divider, {}), _jsx(Box, { overflowY: 'scroll', maxH: '80vh', children: options?.content })] }) })] }));
|
|
201
72
|
};
|
|
202
73
|
export default BottomSheetProvider;
|
|
74
|
+
//# sourceMappingURL=BottomSheetProvider.js.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export const BottomSheetContext = createContext({
|
|
3
3
|
isOpen: false,
|
|
4
|
-
open:
|
|
5
|
-
close:
|
|
4
|
+
open: () => { },
|
|
5
|
+
close: () => { },
|
|
6
6
|
});
|
|
7
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import { BottomSheetContext } from './context.js';
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
};
|
|
3
|
+
export const useBottomSheet = () => useContext(BottomSheetContext);
|
|
4
|
+
//# sourceMappingURL=use-bottom-sheet.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
1
|
+
export const isMobile = (navigator) => {
|
|
2
|
+
const toMatch = [
|
|
3
3
|
/Android/i,
|
|
4
4
|
/webOS/i,
|
|
5
5
|
/iPhone/i,
|
|
@@ -7,9 +7,10 @@ export var isMobile = function(navigator) {
|
|
|
7
7
|
/Tablet/i,
|
|
8
8
|
/iPod/i,
|
|
9
9
|
/BlackBerry/i,
|
|
10
|
-
/Windows Phone/i
|
|
10
|
+
/Windows Phone/i,
|
|
11
11
|
];
|
|
12
|
-
return toMatch.some(
|
|
12
|
+
return toMatch.some((toMatchItem) => {
|
|
13
13
|
return navigator.userAgent.match(toMatchItem);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
|
+
//# sourceMappingURL=utils.js.map
|
package/dist/chakra.js
CHANGED
|
@@ -1,177 +1,67 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _define_property(obj, key, value) {
|
|
10
|
-
if (key in obj) {
|
|
11
|
-
Object.defineProperty(obj, key, {
|
|
12
|
-
value: value,
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true
|
|
16
|
-
});
|
|
17
|
-
} else {
|
|
18
|
-
obj[key] = value;
|
|
19
|
-
}
|
|
20
|
-
return obj;
|
|
21
|
-
}
|
|
22
|
-
function _iterable_to_array_limit(arr, i) {
|
|
23
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
24
|
-
if (_i == null) return;
|
|
25
|
-
var _arr = [];
|
|
26
|
-
var _n = true;
|
|
27
|
-
var _d = false;
|
|
28
|
-
var _s, _e;
|
|
29
|
-
try {
|
|
30
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
31
|
-
_arr.push(_s.value);
|
|
32
|
-
if (i && _arr.length === i) break;
|
|
33
|
-
}
|
|
34
|
-
} catch (err) {
|
|
35
|
-
_d = true;
|
|
36
|
-
_e = err;
|
|
37
|
-
} finally{
|
|
38
|
-
try {
|
|
39
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
40
|
-
} finally{
|
|
41
|
-
if (_d) throw _e;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
return _arr;
|
|
45
|
-
}
|
|
46
|
-
function _non_iterable_rest() {
|
|
47
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
48
|
-
}
|
|
49
|
-
function _object_spread(target) {
|
|
50
|
-
for(var i = 1; i < arguments.length; i++){
|
|
51
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
52
|
-
var ownKeys = Object.keys(source);
|
|
53
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
54
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
55
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
56
|
-
}));
|
|
57
|
-
}
|
|
58
|
-
ownKeys.forEach(function(key) {
|
|
59
|
-
_define_property(target, key, source[key]);
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
return target;
|
|
63
|
-
}
|
|
64
|
-
function ownKeys(object, enumerableOnly) {
|
|
65
|
-
var keys = Object.keys(object);
|
|
66
|
-
if (Object.getOwnPropertySymbols) {
|
|
67
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
68
|
-
if (enumerableOnly) {
|
|
69
|
-
symbols = symbols.filter(function(sym) {
|
|
70
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
keys.push.apply(keys, symbols);
|
|
74
|
-
}
|
|
75
|
-
return keys;
|
|
76
|
-
}
|
|
77
|
-
function _object_spread_props(target, source) {
|
|
78
|
-
source = source != null ? source : {};
|
|
79
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
80
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
81
|
-
} else {
|
|
82
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
83
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
return target;
|
|
87
|
-
}
|
|
88
|
-
function _sliced_to_array(arr, i) {
|
|
89
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
90
|
-
}
|
|
91
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
92
|
-
if (!o) return;
|
|
93
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
94
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
95
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
96
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
97
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
98
|
-
}
|
|
99
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
100
2
|
import isEmpty from 'lodash/isEmpty.js';
|
|
101
|
-
import { useCallback, useMemo, useState } from 'react';
|
|
3
|
+
import { useCallback, useMemo, useState, } from 'react';
|
|
102
4
|
import { Modal, ModalContent, ModalOverlay, useDisclosure } from '../chakra.js';
|
|
103
5
|
import { isReactNode } from '../utils/react.js';
|
|
104
6
|
import MinimalModalContent from './components/MinimalModalContent.js';
|
|
105
7
|
import StandardModalContent from './components/StandardModalContent.js';
|
|
106
|
-
import { ModalContext } from './context.js';
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
switch(modalContentConfig.type){
|
|
110
|
-
case 'standard':
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
case 'minimal':
|
|
118
|
-
{
|
|
119
|
-
return /*#__PURE__*/ _jsx(MinimalModalContent, _object_spread({
|
|
120
|
-
controls: controls,
|
|
121
|
-
modalContentConfig: modalContentConfig
|
|
122
|
-
}, otherProps));
|
|
123
|
-
}
|
|
8
|
+
import { ModalContext, } from './context.js';
|
|
9
|
+
const getModalComponent = (modalContentConfig, controls) => {
|
|
10
|
+
const otherProps = modalContentConfig.contentProps || {};
|
|
11
|
+
switch (modalContentConfig.type) {
|
|
12
|
+
case 'standard': {
|
|
13
|
+
return (_jsx(StandardModalContent, { controls: controls, modalContentConfig: modalContentConfig, ...otherProps }));
|
|
14
|
+
}
|
|
15
|
+
case 'minimal': {
|
|
16
|
+
return (_jsx(MinimalModalContent, { controls: controls, modalContentConfig: modalContentConfig, ...otherProps }));
|
|
17
|
+
}
|
|
124
18
|
case 'custom':
|
|
125
|
-
return isReactNode(modalContentConfig.content) ? modalContentConfig.content :
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
var _exhaustiveCheck = modalContentConfig;
|
|
132
|
-
return null;
|
|
133
|
-
}
|
|
19
|
+
return isReactNode(modalContentConfig.content) ? (modalContentConfig.content) : (_jsx(modalContentConfig.content, { open: open, close: close, ...otherProps }));
|
|
20
|
+
default: {
|
|
21
|
+
const _exhaustiveCheck = modalContentConfig;
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
134
24
|
}
|
|
135
25
|
};
|
|
136
|
-
|
|
137
|
-
return
|
|
26
|
+
const isModalOpenOptions = (options) => {
|
|
27
|
+
return options?.modalContentConfig !== undefined;
|
|
138
28
|
};
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
var onClose = useCallback(function(options) {
|
|
29
|
+
const ModalProvider = ({ children }) => {
|
|
30
|
+
const { isOpen, onClose: onCloseRaw, onOpen: onOpenRaw } = useDisclosure();
|
|
31
|
+
const [modalContentConfig, setModalContentConfig] = useState();
|
|
32
|
+
const [modalOptions, setModalOptions] = useState();
|
|
33
|
+
const [modalState, setModalState] = useState();
|
|
34
|
+
const onClose = useCallback((options) => {
|
|
146
35
|
onCloseRaw();
|
|
147
|
-
if (modalOptions
|
|
36
|
+
if (modalOptions?.onClose) {
|
|
148
37
|
modalOptions.onClose();
|
|
149
38
|
}
|
|
150
|
-
if (!
|
|
39
|
+
if (!options?.keepModalContentConfig) {
|
|
151
40
|
setModalContentConfig(undefined);
|
|
152
41
|
setModalOptions(undefined);
|
|
153
42
|
setModalState(undefined);
|
|
154
43
|
}
|
|
155
|
-
}, [
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
var newModalContentConfig;
|
|
161
|
-
var newModalSate;
|
|
162
|
-
var newModalOptions;
|
|
44
|
+
}, [modalOptions, onCloseRaw]);
|
|
45
|
+
const onOpen = useCallback((modalContentConfigOrOptions) => {
|
|
46
|
+
let newModalContentConfig;
|
|
47
|
+
let newModalSate;
|
|
48
|
+
let newModalOptions;
|
|
163
49
|
// Here, we know we're passing the global options object
|
|
164
50
|
if (isModalOpenOptions(modalContentConfigOrOptions)) {
|
|
165
51
|
newModalContentConfig = modalContentConfigOrOptions.modalContentConfig;
|
|
166
|
-
newModalSate =
|
|
52
|
+
newModalSate =
|
|
53
|
+
modalContentConfigOrOptions.modalContentConfig.initialModalState;
|
|
167
54
|
newModalOptions = modalContentConfigOrOptions;
|
|
168
|
-
}
|
|
55
|
+
}
|
|
56
|
+
// we will set the state only when we're passing the modal content config. Maybe the modal
|
|
57
|
+
// was closed with keepModalContentConfig set to true, so we don't want to override the state
|
|
58
|
+
else if (modalContentConfigOrOptions) {
|
|
169
59
|
newModalContentConfig = modalContentConfigOrOptions;
|
|
170
60
|
newModalSate = undefined;
|
|
171
61
|
newModalOptions = undefined;
|
|
172
62
|
}
|
|
173
|
-
setModalContentConfig(
|
|
174
|
-
|
|
63
|
+
setModalContentConfig((oldModalContentConfig) => {
|
|
64
|
+
const modalContentConfig = newModalContentConfig || oldModalContentConfig;
|
|
175
65
|
if (modalContentConfig) {
|
|
176
66
|
onOpenRaw();
|
|
177
67
|
}
|
|
@@ -179,67 +69,39 @@ var ModalProvider = function(param) {
|
|
|
179
69
|
});
|
|
180
70
|
setModalState(newModalSate);
|
|
181
71
|
setModalOptions(newModalOptions);
|
|
182
|
-
}, [
|
|
183
|
-
|
|
184
|
-
]);
|
|
185
|
-
var update = useCallback(function(updateOptions) {
|
|
72
|
+
}, [onOpenRaw]);
|
|
73
|
+
const update = useCallback((updateOptions) => {
|
|
186
74
|
if (!updateOptions || isEmpty(updateOptions)) {
|
|
187
75
|
return;
|
|
188
76
|
}
|
|
189
|
-
setModalContentConfig(
|
|
77
|
+
setModalContentConfig((oldModalContentConfig) => {
|
|
190
78
|
if (!oldModalContentConfig) {
|
|
191
79
|
return oldModalContentConfig;
|
|
192
80
|
}
|
|
193
|
-
return
|
|
194
|
-
|
|
195
|
-
|
|
81
|
+
return {
|
|
82
|
+
...oldModalContentConfig,
|
|
83
|
+
...updateOptions.modalContentConfig,
|
|
84
|
+
contentProps: {
|
|
85
|
+
...updateOptions.contentProps,
|
|
86
|
+
...oldModalContentConfig.contentProps,
|
|
87
|
+
},
|
|
88
|
+
};
|
|
196
89
|
});
|
|
197
90
|
}, []);
|
|
198
|
-
|
|
91
|
+
const state = useMemo(() => {
|
|
199
92
|
return {
|
|
200
|
-
isOpen
|
|
93
|
+
isOpen,
|
|
201
94
|
// TODO
|
|
202
95
|
// @ts-expect-error
|
|
203
96
|
open: onOpen,
|
|
204
97
|
close: onClose,
|
|
205
|
-
update
|
|
206
|
-
modalState
|
|
207
|
-
setModalState
|
|
98
|
+
update,
|
|
99
|
+
modalState,
|
|
100
|
+
setModalState,
|
|
208
101
|
};
|
|
209
|
-
}, [
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
update,
|
|
213
|
-
modalState,
|
|
214
|
-
isOpen
|
|
215
|
-
]);
|
|
216
|
-
var content = useMemo(function() {
|
|
217
|
-
return modalContentConfig && getModalComponent(modalContentConfig, state);
|
|
218
|
-
}, [
|
|
219
|
-
modalContentConfig,
|
|
220
|
-
state
|
|
221
|
-
]);
|
|
222
|
-
return /*#__PURE__*/ _jsxs(ModalContext.Provider, {
|
|
223
|
-
value: state,
|
|
224
|
-
children: [
|
|
225
|
-
children,
|
|
226
|
-
/*#__PURE__*/ _jsxs(Modal, {
|
|
227
|
-
scrollBehavior: 'inside',
|
|
228
|
-
isCentered: true,
|
|
229
|
-
blockScrollOnMount: true,
|
|
230
|
-
closeOnOverlayClick: true,
|
|
231
|
-
size: (modalContentConfig === null || modalContentConfig === void 0 ? void 0 : modalContentConfig.size) || '3xl',
|
|
232
|
-
isOpen: isOpen,
|
|
233
|
-
onClose: onClose,
|
|
234
|
-
children: [
|
|
235
|
-
/*#__PURE__*/ _jsx(ModalOverlay, {}),
|
|
236
|
-
/*#__PURE__*/ _jsx(ModalContent, {
|
|
237
|
-
borderRadius: 0,
|
|
238
|
-
children: content
|
|
239
|
-
})
|
|
240
|
-
]
|
|
241
|
-
})
|
|
242
|
-
]
|
|
243
|
-
});
|
|
102
|
+
}, [onOpen, onClose, update, modalState, isOpen]);
|
|
103
|
+
const content = useMemo(() => modalContentConfig && getModalComponent(modalContentConfig, state), [modalContentConfig, state]);
|
|
104
|
+
return (_jsxs(ModalContext.Provider, { value: state, children: [children, _jsxs(Modal, { scrollBehavior: 'inside', isCentered: true, blockScrollOnMount: true, closeOnOverlayClick: true, size: modalContentConfig?.size || '3xl', isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsx(ModalContent, { borderRadius: 0, children: content })] })] }));
|
|
244
105
|
};
|
|
245
106
|
export default ModalProvider;
|
|
107
|
+
//# sourceMappingURL=ModalProvider.js.map
|