@xaui/native 0.0.26 → 0.0.28
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/LICENSE +21 -0
- package/README.md +105 -228
- package/dist/alert/index.cjs +92 -166
- package/dist/alert/index.js +2 -1
- package/dist/app-bar/index.cjs +24 -98
- package/dist/app-bar/index.js +2 -1
- package/dist/autocomplete/index.cjs +192 -281
- package/dist/autocomplete/index.js +36 -48
- package/dist/avatar/index.cjs +59 -133
- package/dist/avatar/index.js +2 -1
- package/dist/badge/index.cjs +26 -99
- package/dist/badge/index.js +2 -1
- package/dist/bottom-sheet/index.cjs +5 -456
- package/dist/bottom-sheet/index.js +4 -363
- package/dist/bottom-tab-bar/index.cjs +93 -167
- package/dist/bottom-tab-bar/index.js +2 -2
- package/dist/button/index.cjs +73 -525
- package/dist/button/index.js +3 -2
- package/dist/card/index.cjs +76 -169
- package/dist/card/index.js +2 -2
- package/dist/carousel/index.cjs +68 -145
- package/dist/carousel/index.js +1 -1
- package/dist/chart/index.cjs +132 -173
- package/dist/checkbox/index.cjs +70 -143
- package/dist/checkbox/index.js +2 -1
- package/dist/chip/index.cjs +89 -164
- package/dist/chip/index.js +2 -1
- package/dist/chunk-BD72HIPR.cjs +75 -0
- package/dist/chunk-DHSTKO3K.cjs +19 -0
- package/dist/{chunk-CZFDZPAS.js → chunk-DXXNBF5P.js} +5 -0
- package/dist/{chunk-UI5L26KD.js → chunk-F7WH4DMG.js} +1 -1
- package/dist/chunk-GBHQCAKW.js +19 -0
- package/dist/chunk-HC2SSHNU.js +368 -0
- package/dist/chunk-HSPTLUFA.cjs +7 -0
- package/dist/chunk-JEGEPGVU.js +287 -0
- package/dist/chunk-KTLGDLCB.cjs +287 -0
- package/dist/{chunk-GHCVNQET.js → chunk-LTKYHG5V.js} +5 -12
- package/dist/{chunk-ULJSCNPE.js → chunk-LUBWRVI2.js} +1 -1
- package/dist/chunk-OQ2BLOOG.cjs +138 -0
- package/dist/chunk-QMYWIWSX.cjs +384 -0
- package/dist/chunk-XFPPR2VB.cjs +368 -0
- package/dist/core/index.cjs +22 -168
- package/dist/core/index.d.cts +1 -1
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +5 -3
- package/dist/datepicker/index.cjs +239 -320
- package/dist/datepicker/index.js +2 -1
- package/dist/divider/index.cjs +5 -145
- package/dist/divider/index.js +3 -2
- package/dist/drawer/index.cjs +39 -112
- package/dist/drawer/index.js +2 -1
- package/dist/expansion-panel/index.cjs +91 -230
- package/dist/expansion-panel/index.js +3 -2
- package/dist/fab/index.cjs +6 -722
- package/dist/fab/index.js +4 -3
- package/dist/fab-menu/index.cjs +81 -814
- package/dist/fab-menu/index.js +4 -3
- package/dist/feature-discovery/index.cjs +72 -139
- package/dist/feature-discovery/index.js +2 -2
- package/dist/index.cjs +1 -18
- package/dist/indicator/index.cjs +5 -445
- package/dist/indicator/index.js +3 -2
- package/dist/input/index.cjs +214 -282
- package/dist/input/index.js +2 -2
- package/dist/list/index.cjs +71 -146
- package/dist/list/index.js +2 -1
- package/dist/menu/index.cjs +59 -127
- package/dist/menu/index.js +2 -2
- package/dist/menubox/index.cjs +60 -132
- package/dist/menubox/index.js +2 -1
- package/dist/pager/index.cjs +42 -80
- package/dist/progress/index.cjs +43 -114
- package/dist/progress/index.js +2 -1
- package/dist/radio/index.cjs +82 -154
- package/dist/radio/index.js +2 -1
- package/dist/segment-button/index.cjs +60 -147
- package/dist/segment-button/index.js +2 -2
- package/dist/select/index.cjs +149 -224
- package/dist/select/index.js +10 -22
- package/dist/skeleton/index.cjs +23 -94
- package/dist/skeleton/index.js +2 -2
- package/dist/slider/index.cjs +77 -156
- package/dist/slider/index.js +2 -1
- package/dist/snackbar/index.cjs +420 -0
- package/dist/snackbar/index.d.cts +175 -0
- package/dist/snackbar/index.d.ts +175 -0
- package/dist/snackbar/index.js +420 -0
- package/dist/stepper/index.cjs +121 -195
- package/dist/stepper/index.js +2 -1
- package/dist/switch/index.cjs +48 -121
- package/dist/switch/index.js +2 -1
- package/dist/tabs/index.cjs +67 -151
- package/dist/tabs/index.js +2 -1
- package/dist/timepicker/index.cjs +135 -593
- package/dist/timepicker/index.js +24 -383
- package/dist/toolbar/index.cjs +59 -128
- package/dist/toolbar/index.js +2 -1
- package/dist/typography/index.cjs +37 -92
- package/dist/typography/index.d.cts +1 -1
- package/dist/typography/index.d.ts +1 -1
- package/dist/typography/index.js +20 -1
- package/dist/view/index.cjs +178 -223
- package/package.json +7 -1
- package/dist/chunk-3XSXTM3G.js +0 -661
- package/dist/chunk-4KSZLONZ.js +0 -79
- package/dist/chunk-I4V5Y5GD.js +0 -76
- package/dist/chunk-URBEEDFX.js +0 -79
package/dist/badge/index.cjs
CHANGED
|
@@ -1,46 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-HSPTLUFA.cjs');
|
|
29
2
|
|
|
30
|
-
|
|
31
|
-
var
|
|
32
|
-
__export(badge_exports, {
|
|
33
|
-
Badge: () => Badge
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(badge_exports);
|
|
3
|
+
|
|
4
|
+
var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
|
|
36
5
|
|
|
37
6
|
// src/components/badge/badge.tsx
|
|
38
|
-
var
|
|
39
|
-
var
|
|
7
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
8
|
+
var _reactnative = require('react-native');
|
|
40
9
|
|
|
41
10
|
// src/components/badge/badge.style.ts
|
|
42
|
-
|
|
43
|
-
var styles =
|
|
11
|
+
|
|
12
|
+
var styles = _reactnative.StyleSheet.create({
|
|
44
13
|
container: {
|
|
45
14
|
position: "relative",
|
|
46
15
|
alignSelf: "flex-start"
|
|
@@ -59,49 +28,8 @@ var styles = import_react_native.StyleSheet.create({
|
|
|
59
28
|
});
|
|
60
29
|
|
|
61
30
|
// src/components/badge/badge.hook.ts
|
|
62
|
-
var import_react6 = require("react");
|
|
63
|
-
var import_core = require("@xaui/core");
|
|
64
|
-
|
|
65
|
-
// src/core/theme-context.tsx
|
|
66
|
-
var import_react4 = __toESM(require("react"), 1);
|
|
67
|
-
var import_react_native3 = require("react-native");
|
|
68
|
-
var import_theme = require("@xaui/core/theme");
|
|
69
|
-
var import_palette = require("@xaui/core/palette");
|
|
70
|
-
|
|
71
|
-
// src/core/portal/portal.tsx
|
|
72
|
-
var import_react2 = require("react");
|
|
73
|
-
|
|
74
|
-
// src/core/portal/portal-context.ts
|
|
75
|
-
var import_react = require("react");
|
|
76
|
-
var PortalContext = (0, import_react.createContext)(null);
|
|
77
|
-
|
|
78
|
-
// src/core/portal/portal-host.tsx
|
|
79
|
-
var import_react3 = __toESM(require("react"), 1);
|
|
80
|
-
var import_react_native2 = require("react-native");
|
|
81
|
-
var hostStyles = import_react_native2.StyleSheet.create({
|
|
82
|
-
container: {
|
|
83
|
-
flex: 1
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
// src/core/theme-context.tsx
|
|
88
|
-
var XUIThemeContext = (0, import_react4.createContext)(null);
|
|
89
|
-
|
|
90
|
-
// src/core/theme-hooks.ts
|
|
91
|
-
var import_react5 = require("react");
|
|
92
|
-
var import_react_native4 = require("react-native");
|
|
93
|
-
function useXUITheme() {
|
|
94
|
-
const theme = (0, import_react5.useContext)(XUIThemeContext);
|
|
95
|
-
if (!theme) {
|
|
96
|
-
throw new Error("useXUITheme must be used within XUIProvider");
|
|
97
|
-
}
|
|
98
|
-
return theme;
|
|
99
|
-
}
|
|
100
31
|
|
|
101
|
-
|
|
102
|
-
var import_theme2 = require("@xaui/core/theme");
|
|
103
|
-
|
|
104
|
-
// src/components/badge/badge.hook.ts
|
|
32
|
+
var _core = require('@xaui/core');
|
|
105
33
|
var sizeMap = {
|
|
106
34
|
sm: { height: 16, minWidth: 16, dot: 8 },
|
|
107
35
|
md: { height: 20, minWidth: 20, dot: 10 },
|
|
@@ -113,8 +41,8 @@ var fontSizeMap = {
|
|
|
113
41
|
lg: 12
|
|
114
42
|
};
|
|
115
43
|
function useBadgeSizeStyles(size, isDot, isOneChar) {
|
|
116
|
-
const theme = useXUITheme();
|
|
117
|
-
return (0,
|
|
44
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
45
|
+
return _react.useMemo.call(void 0, () => {
|
|
118
46
|
const { height, minWidth, dot } = sizeMap[size];
|
|
119
47
|
const fontSize = fontSizeMap[size];
|
|
120
48
|
if (isDot) {
|
|
@@ -143,10 +71,10 @@ function useBadgeSizeStyles(size, isDot, isOneChar) {
|
|
|
143
71
|
}, [isDot, isOneChar, size, theme]);
|
|
144
72
|
}
|
|
145
73
|
function useBadgeVariantStyles(themeColor, variant) {
|
|
146
|
-
const theme = useXUITheme();
|
|
147
|
-
const safeThemeColor = (0,
|
|
74
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
75
|
+
const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
|
|
148
76
|
const colorScheme = theme.colors[safeThemeColor];
|
|
149
|
-
return (0,
|
|
77
|
+
return _react.useMemo.call(void 0, () => {
|
|
150
78
|
if (variant === "flat") {
|
|
151
79
|
return {
|
|
152
80
|
backgroundColor: colorScheme.background,
|
|
@@ -155,7 +83,7 @@ function useBadgeVariantStyles(themeColor, variant) {
|
|
|
155
83
|
}
|
|
156
84
|
if (variant === "faded") {
|
|
157
85
|
return {
|
|
158
|
-
backgroundColor: (0,
|
|
86
|
+
backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.7),
|
|
159
87
|
color: colorScheme.main
|
|
160
88
|
};
|
|
161
89
|
}
|
|
@@ -173,8 +101,8 @@ function useBadgeVariantStyles(themeColor, variant) {
|
|
|
173
101
|
}, [colorScheme, theme, variant]);
|
|
174
102
|
}
|
|
175
103
|
function useBadgeRadiusStyles(radius, height) {
|
|
176
|
-
const theme = useXUITheme();
|
|
177
|
-
return (0,
|
|
104
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
105
|
+
return _react.useMemo.call(void 0, () => {
|
|
178
106
|
if (radius === "full") {
|
|
179
107
|
return { borderRadius: height / 2 };
|
|
180
108
|
}
|
|
@@ -182,7 +110,7 @@ function useBadgeRadiusStyles(radius, height) {
|
|
|
182
110
|
}, [height, radius, theme.borderRadius]);
|
|
183
111
|
}
|
|
184
112
|
function useBadgePlacementStyles(placement, height) {
|
|
185
|
-
return (0,
|
|
113
|
+
return _react.useMemo.call(void 0, () => {
|
|
186
114
|
const offset = Math.round(height * 0.3);
|
|
187
115
|
switch (placement) {
|
|
188
116
|
case "top-left":
|
|
@@ -227,8 +155,8 @@ var Badge = ({
|
|
|
227
155
|
const outlineEnabled = disableOutline ? false : showOutline;
|
|
228
156
|
const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
|
|
229
157
|
const badgeContent = isDot ? null : content;
|
|
230
|
-
return /* @__PURE__ */
|
|
231
|
-
|
|
158
|
+
return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _ => _.container])] }, children, shouldRender && /* @__PURE__ */ _react2.default.createElement(
|
|
159
|
+
_reactnative.View,
|
|
232
160
|
{
|
|
233
161
|
style: [
|
|
234
162
|
styles.badge,
|
|
@@ -243,13 +171,13 @@ var Badge = ({
|
|
|
243
171
|
placementStyles,
|
|
244
172
|
outlineStyles,
|
|
245
173
|
variantStyles.shadow,
|
|
246
|
-
customAppearance
|
|
174
|
+
_optionalChain([customAppearance, 'optionalAccess', _2 => _2.badge])
|
|
247
175
|
],
|
|
248
176
|
accessible: true,
|
|
249
177
|
accessibilityRole: "text"
|
|
250
178
|
},
|
|
251
|
-
badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */
|
|
252
|
-
|
|
179
|
+
badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ _react2.default.createElement(
|
|
180
|
+
_reactnative.Text,
|
|
253
181
|
{
|
|
254
182
|
style: [
|
|
255
183
|
styles.text,
|
|
@@ -257,14 +185,13 @@ var Badge = ({
|
|
|
257
185
|
fontSize: sizeStyles.fontSize,
|
|
258
186
|
color: variantStyles.color
|
|
259
187
|
},
|
|
260
|
-
customAppearance
|
|
188
|
+
_optionalChain([customAppearance, 'optionalAccess', _3 => _3.text])
|
|
261
189
|
]
|
|
262
190
|
},
|
|
263
191
|
badgeContent
|
|
264
192
|
)
|
|
265
193
|
));
|
|
266
194
|
};
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
});
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
exports.Badge = Badge;
|
package/dist/badge/index.js
CHANGED
|
@@ -1,459 +1,8 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
29
2
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
BottomSheet: () => BottomSheet
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(bottom_sheet_exports);
|
|
3
|
+
var _chunkXFPPR2VBcjs = require('../chunk-XFPPR2VB.cjs');
|
|
4
|
+
require('../chunk-HSPTLUFA.cjs');
|
|
5
|
+
require('../chunk-OQ2BLOOG.cjs');
|
|
36
6
|
|
|
37
|
-
// src/components/bottom-sheet/bottom-sheet.tsx
|
|
38
|
-
var import_react7 = __toESM(require("react"), 1);
|
|
39
|
-
var import_react_native7 = require("react-native");
|
|
40
7
|
|
|
41
|
-
|
|
42
|
-
var import_react2 = require("react");
|
|
43
|
-
|
|
44
|
-
// src/core/portal/portal-context.ts
|
|
45
|
-
var import_react = require("react");
|
|
46
|
-
var PortalContext = (0, import_react.createContext)(null);
|
|
47
|
-
|
|
48
|
-
// src/core/portal/portal.tsx
|
|
49
|
-
var portalId = 0;
|
|
50
|
-
var Portal = ({ children }) => {
|
|
51
|
-
const context = (0, import_react2.useContext)(PortalContext);
|
|
52
|
-
const keyRef = (0, import_react2.useRef)(`portal-${++portalId}`);
|
|
53
|
-
(0, import_react2.useLayoutEffect)(() => {
|
|
54
|
-
if (!context) return;
|
|
55
|
-
context.addPortal(keyRef.current, children);
|
|
56
|
-
}, [children, context]);
|
|
57
|
-
(0, import_react2.useEffect)(() => {
|
|
58
|
-
if (!context) return;
|
|
59
|
-
const key = keyRef.current;
|
|
60
|
-
return () => {
|
|
61
|
-
context.removePortal(key);
|
|
62
|
-
};
|
|
63
|
-
}, [context]);
|
|
64
|
-
return null;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
// src/components/bottom-sheet/bottom-sheet.hook.ts
|
|
68
|
-
var import_react6 = require("react");
|
|
69
|
-
var import_react_native5 = require("react-native");
|
|
70
|
-
|
|
71
|
-
// src/core/theme-context.tsx
|
|
72
|
-
var import_react4 = __toESM(require("react"), 1);
|
|
73
|
-
var import_react_native2 = require("react-native");
|
|
74
|
-
var import_theme = require("@xaui/core/theme");
|
|
75
|
-
var import_palette = require("@xaui/core/palette");
|
|
76
|
-
|
|
77
|
-
// src/core/portal/portal-host.tsx
|
|
78
|
-
var import_react3 = __toESM(require("react"), 1);
|
|
79
|
-
var import_react_native = require("react-native");
|
|
80
|
-
var hostStyles = import_react_native.StyleSheet.create({
|
|
81
|
-
container: {
|
|
82
|
-
flex: 1
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
// src/core/theme-context.tsx
|
|
87
|
-
var XUIThemeContext = (0, import_react4.createContext)(null);
|
|
88
|
-
|
|
89
|
-
// src/core/theme-hooks.ts
|
|
90
|
-
var import_react5 = require("react");
|
|
91
|
-
var import_react_native3 = require("react-native");
|
|
92
|
-
function useXUITheme() {
|
|
93
|
-
const theme = (0, import_react5.useContext)(XUIThemeContext);
|
|
94
|
-
if (!theme) {
|
|
95
|
-
throw new Error("useXUITheme must be used within XUIProvider");
|
|
96
|
-
}
|
|
97
|
-
return theme;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// src/core/index.ts
|
|
101
|
-
var import_theme2 = require("@xaui/core/theme");
|
|
102
|
-
|
|
103
|
-
// src/components/bottom-sheet/bottom-sheet.hook.ts
|
|
104
|
-
var import_core2 = require("@xaui/core");
|
|
105
|
-
|
|
106
|
-
// src/components/bottom-sheet/bottom-sheet.animation.ts
|
|
107
|
-
var import_react_native4 = require("react-native");
|
|
108
|
-
var SPRING_CONFIG = {
|
|
109
|
-
useNativeDriver: true,
|
|
110
|
-
speed: 14,
|
|
111
|
-
bounciness: 4
|
|
112
|
-
};
|
|
113
|
-
var TIMING_CONFIG = {
|
|
114
|
-
duration: 280,
|
|
115
|
-
easing: import_react_native4.Easing.bezier(0.2, 0, 0, 1),
|
|
116
|
-
useNativeDriver: true
|
|
117
|
-
};
|
|
118
|
-
var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
|
|
119
|
-
const animation = import_react_native4.Animated.parallel([
|
|
120
|
-
import_react_native4.Animated.spring(translateY, {
|
|
121
|
-
...SPRING_CONFIG,
|
|
122
|
-
toValue: targetTranslateY
|
|
123
|
-
}),
|
|
124
|
-
import_react_native4.Animated.timing(backdropOpacity, {
|
|
125
|
-
...TIMING_CONFIG,
|
|
126
|
-
toValue: 1
|
|
127
|
-
})
|
|
128
|
-
]);
|
|
129
|
-
animation.start();
|
|
130
|
-
return animation;
|
|
131
|
-
};
|
|
132
|
-
var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
|
|
133
|
-
const animation = import_react_native4.Animated.parallel([
|
|
134
|
-
import_react_native4.Animated.timing(translateY, {
|
|
135
|
-
...TIMING_CONFIG,
|
|
136
|
-
toValue: screenHeight
|
|
137
|
-
}),
|
|
138
|
-
import_react_native4.Animated.timing(backdropOpacity, {
|
|
139
|
-
...TIMING_CONFIG,
|
|
140
|
-
toValue: 0
|
|
141
|
-
})
|
|
142
|
-
]);
|
|
143
|
-
animation.start(({ finished }) => {
|
|
144
|
-
if (finished && onComplete) {
|
|
145
|
-
onComplete();
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
return animation;
|
|
149
|
-
};
|
|
150
|
-
var runSnapAnimation = (translateY, targetTranslateY) => {
|
|
151
|
-
const animation = import_react_native4.Animated.spring(translateY, {
|
|
152
|
-
...SPRING_CONFIG,
|
|
153
|
-
toValue: targetTranslateY
|
|
154
|
-
});
|
|
155
|
-
animation.start();
|
|
156
|
-
return animation;
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
// src/components/bottom-sheet/bottom-sheet.hook.ts
|
|
160
|
-
var DISMISS_VELOCITY_THRESHOLD = 0.5;
|
|
161
|
-
var DISMISS_DISTANCE_FRACTION = 0.3;
|
|
162
|
-
var SCREEN_HEIGHT = import_react_native5.Dimensions.get("window").height;
|
|
163
|
-
var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
|
|
164
|
-
var useBottomSheetAnimation = ({
|
|
165
|
-
isOpen,
|
|
166
|
-
snapPoints,
|
|
167
|
-
initialSnapIndex,
|
|
168
|
-
enableSwipeToDismiss,
|
|
169
|
-
disableAnimation,
|
|
170
|
-
onClose,
|
|
171
|
-
onSnapChange
|
|
172
|
-
}) => {
|
|
173
|
-
const [shouldRender, setShouldRender] = (0, import_react6.useState)(false);
|
|
174
|
-
const currentSnapIndex = (0, import_react6.useRef)(initialSnapIndex);
|
|
175
|
-
const animationRef = (0, import_react6.useRef)(null);
|
|
176
|
-
const translateY = (0, import_react6.useRef)(new import_react_native5.Animated.Value(SCREEN_HEIGHT)).current;
|
|
177
|
-
const backdropOpacity = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
|
|
178
|
-
const sortedSnapPoints = (0, import_react6.useMemo)(
|
|
179
|
-
() => [...snapPoints].sort((a, b) => a - b),
|
|
180
|
-
[snapPoints]
|
|
181
|
-
);
|
|
182
|
-
const snapTranslateValues = (0, import_react6.useMemo)(
|
|
183
|
-
() => sortedSnapPoints.map(getTranslateYForSnap),
|
|
184
|
-
[sortedSnapPoints]
|
|
185
|
-
);
|
|
186
|
-
const open = (0, import_react6.useCallback)(() => {
|
|
187
|
-
setShouldRender(true);
|
|
188
|
-
const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
|
|
189
|
-
currentSnapIndex.current = targetIndex;
|
|
190
|
-
if (disableAnimation) {
|
|
191
|
-
translateY.setValue(snapTranslateValues[targetIndex]);
|
|
192
|
-
backdropOpacity.setValue(1);
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
|
-
translateY.setValue(SCREEN_HEIGHT);
|
|
196
|
-
backdropOpacity.setValue(0);
|
|
197
|
-
animationRef.current?.stop();
|
|
198
|
-
animationRef.current = runOpenAnimation(
|
|
199
|
-
translateY,
|
|
200
|
-
backdropOpacity,
|
|
201
|
-
snapTranslateValues[targetIndex]
|
|
202
|
-
);
|
|
203
|
-
}, [
|
|
204
|
-
initialSnapIndex,
|
|
205
|
-
sortedSnapPoints,
|
|
206
|
-
snapTranslateValues,
|
|
207
|
-
disableAnimation,
|
|
208
|
-
translateY,
|
|
209
|
-
backdropOpacity
|
|
210
|
-
]);
|
|
211
|
-
const close = (0, import_react6.useCallback)(() => {
|
|
212
|
-
if (disableAnimation) {
|
|
213
|
-
translateY.setValue(SCREEN_HEIGHT);
|
|
214
|
-
backdropOpacity.setValue(0);
|
|
215
|
-
setShouldRender(false);
|
|
216
|
-
onClose?.();
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
219
|
-
animationRef.current?.stop();
|
|
220
|
-
animationRef.current = runCloseAnimation(
|
|
221
|
-
translateY,
|
|
222
|
-
backdropOpacity,
|
|
223
|
-
SCREEN_HEIGHT,
|
|
224
|
-
() => {
|
|
225
|
-
setShouldRender(false);
|
|
226
|
-
onClose?.();
|
|
227
|
-
}
|
|
228
|
-
);
|
|
229
|
-
}, [disableAnimation, translateY, backdropOpacity, onClose]);
|
|
230
|
-
const snapTo = (0, import_react6.useCallback)(
|
|
231
|
-
(index) => {
|
|
232
|
-
const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
|
|
233
|
-
currentSnapIndex.current = clampedIndex;
|
|
234
|
-
onSnapChange?.(clampedIndex);
|
|
235
|
-
if (disableAnimation) {
|
|
236
|
-
translateY.setValue(snapTranslateValues[clampedIndex]);
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
animationRef.current?.stop();
|
|
240
|
-
animationRef.current = runSnapAnimation(
|
|
241
|
-
translateY,
|
|
242
|
-
snapTranslateValues[clampedIndex]
|
|
243
|
-
);
|
|
244
|
-
},
|
|
245
|
-
[
|
|
246
|
-
sortedSnapPoints,
|
|
247
|
-
snapTranslateValues,
|
|
248
|
-
disableAnimation,
|
|
249
|
-
translateY,
|
|
250
|
-
onSnapChange
|
|
251
|
-
]
|
|
252
|
-
);
|
|
253
|
-
(0, import_react6.useEffect)(() => {
|
|
254
|
-
if (isOpen) {
|
|
255
|
-
open();
|
|
256
|
-
} else if (shouldRender) {
|
|
257
|
-
close();
|
|
258
|
-
}
|
|
259
|
-
}, [isOpen]);
|
|
260
|
-
const panResponder = (0, import_react6.useMemo)(
|
|
261
|
-
() => import_react_native5.PanResponder.create({
|
|
262
|
-
onStartShouldSetPanResponder: () => true,
|
|
263
|
-
onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
|
|
264
|
-
onPanResponderMove: (_, gestureState) => {
|
|
265
|
-
const currentTranslate = snapTranslateValues[currentSnapIndex.current];
|
|
266
|
-
const newTranslateY = currentTranslate + gestureState.dy;
|
|
267
|
-
const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
|
|
268
|
-
const clamped = Math.max(maxExpanded, newTranslateY);
|
|
269
|
-
translateY.setValue(clamped);
|
|
270
|
-
},
|
|
271
|
-
onPanResponderRelease: (_, gestureState) => {
|
|
272
|
-
const currentTranslate = snapTranslateValues[currentSnapIndex.current];
|
|
273
|
-
const finalPosition = currentTranslate + gestureState.dy;
|
|
274
|
-
if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
|
|
275
|
-
close();
|
|
276
|
-
return;
|
|
277
|
-
}
|
|
278
|
-
if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
|
|
279
|
-
const nextIndex = Math.min(
|
|
280
|
-
currentSnapIndex.current + 1,
|
|
281
|
-
sortedSnapPoints.length - 1
|
|
282
|
-
);
|
|
283
|
-
snapTo(nextIndex);
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
|
-
if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
|
|
287
|
-
const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
|
|
288
|
-
if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
|
|
289
|
-
close();
|
|
290
|
-
return;
|
|
291
|
-
}
|
|
292
|
-
snapTo(prevIndex);
|
|
293
|
-
return;
|
|
294
|
-
}
|
|
295
|
-
let closestIndex = 0;
|
|
296
|
-
let minDistance = Infinity;
|
|
297
|
-
snapTranslateValues.forEach((snapVal, index) => {
|
|
298
|
-
const distance = Math.abs(finalPosition - snapVal);
|
|
299
|
-
if (distance < minDistance) {
|
|
300
|
-
minDistance = distance;
|
|
301
|
-
closestIndex = index;
|
|
302
|
-
}
|
|
303
|
-
});
|
|
304
|
-
snapTo(closestIndex);
|
|
305
|
-
}
|
|
306
|
-
}),
|
|
307
|
-
[
|
|
308
|
-
snapTranslateValues,
|
|
309
|
-
sortedSnapPoints,
|
|
310
|
-
enableSwipeToDismiss,
|
|
311
|
-
translateY,
|
|
312
|
-
close,
|
|
313
|
-
snapTo
|
|
314
|
-
]
|
|
315
|
-
);
|
|
316
|
-
return {
|
|
317
|
-
shouldRender,
|
|
318
|
-
translateY,
|
|
319
|
-
backdropOpacity,
|
|
320
|
-
panResponder,
|
|
321
|
-
close,
|
|
322
|
-
snapTo,
|
|
323
|
-
screenHeight: SCREEN_HEIGHT
|
|
324
|
-
};
|
|
325
|
-
};
|
|
326
|
-
var useBottomSheetStyles = (themeColor, radius) => {
|
|
327
|
-
const theme = useXUITheme();
|
|
328
|
-
const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
|
|
329
|
-
const colorScheme = theme.colors[safeThemeColor];
|
|
330
|
-
const sheetStyles = (0, import_react6.useMemo)(
|
|
331
|
-
() => ({
|
|
332
|
-
backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
|
|
333
|
-
borderTopLeftRadius: theme.borderRadius[radius],
|
|
334
|
-
borderTopRightRadius: theme.borderRadius[radius]
|
|
335
|
-
}),
|
|
336
|
-
[theme, colorScheme, radius]
|
|
337
|
-
);
|
|
338
|
-
const handleIndicatorColor = (0, import_react6.useMemo)(
|
|
339
|
-
() => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
|
|
340
|
-
[theme, colorScheme]
|
|
341
|
-
);
|
|
342
|
-
return { sheetStyles, handleIndicatorColor };
|
|
343
|
-
};
|
|
344
|
-
|
|
345
|
-
// src/components/bottom-sheet/bottom-sheet.style.ts
|
|
346
|
-
var import_react_native6 = require("react-native");
|
|
347
|
-
var styles = import_react_native6.StyleSheet.create({
|
|
348
|
-
backdrop: {
|
|
349
|
-
position: "absolute",
|
|
350
|
-
top: 0,
|
|
351
|
-
left: 0,
|
|
352
|
-
right: 0,
|
|
353
|
-
bottom: 0,
|
|
354
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
|
355
|
-
},
|
|
356
|
-
container: {
|
|
357
|
-
position: "absolute",
|
|
358
|
-
left: 0,
|
|
359
|
-
right: 0,
|
|
360
|
-
bottom: 0
|
|
361
|
-
},
|
|
362
|
-
sheet: {
|
|
363
|
-
overflow: "hidden"
|
|
364
|
-
},
|
|
365
|
-
handle: {
|
|
366
|
-
alignItems: "center",
|
|
367
|
-
justifyContent: "center",
|
|
368
|
-
paddingVertical: 10
|
|
369
|
-
},
|
|
370
|
-
handleIndicator: {
|
|
371
|
-
width: 36,
|
|
372
|
-
height: 4,
|
|
373
|
-
borderRadius: 2
|
|
374
|
-
},
|
|
375
|
-
content: {
|
|
376
|
-
flex: 1
|
|
377
|
-
}
|
|
378
|
-
});
|
|
379
|
-
|
|
380
|
-
// src/components/bottom-sheet/bottom-sheet.tsx
|
|
381
|
-
var BottomSheet = ({
|
|
382
|
-
children,
|
|
383
|
-
isOpen,
|
|
384
|
-
snapPoints = [0.4, 0.9],
|
|
385
|
-
initialSnapIndex = 0,
|
|
386
|
-
themeColor = "default",
|
|
387
|
-
radius = "lg",
|
|
388
|
-
showBackdrop = true,
|
|
389
|
-
closeOnBackdropPress = true,
|
|
390
|
-
enableSwipeToDismiss = true,
|
|
391
|
-
showHandle = true,
|
|
392
|
-
disableAnimation = false,
|
|
393
|
-
style,
|
|
394
|
-
handleContent,
|
|
395
|
-
onClose,
|
|
396
|
-
onSnapChange
|
|
397
|
-
}) => {
|
|
398
|
-
const {
|
|
399
|
-
shouldRender,
|
|
400
|
-
translateY,
|
|
401
|
-
backdropOpacity,
|
|
402
|
-
panResponder,
|
|
403
|
-
close,
|
|
404
|
-
screenHeight
|
|
405
|
-
} = useBottomSheetAnimation({
|
|
406
|
-
isOpen,
|
|
407
|
-
snapPoints,
|
|
408
|
-
initialSnapIndex,
|
|
409
|
-
enableSwipeToDismiss,
|
|
410
|
-
disableAnimation,
|
|
411
|
-
onClose,
|
|
412
|
-
onSnapChange
|
|
413
|
-
});
|
|
414
|
-
const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
|
|
415
|
-
themeColor,
|
|
416
|
-
radius
|
|
417
|
-
);
|
|
418
|
-
if (!shouldRender) {
|
|
419
|
-
return null;
|
|
420
|
-
}
|
|
421
|
-
const handleBackdropPress = () => {
|
|
422
|
-
if (closeOnBackdropPress) {
|
|
423
|
-
close();
|
|
424
|
-
}
|
|
425
|
-
};
|
|
426
|
-
return /* @__PURE__ */ import_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ import_react7.default.createElement(
|
|
427
|
-
import_react_native7.Animated.View,
|
|
428
|
-
{
|
|
429
|
-
style: [
|
|
430
|
-
styles.container,
|
|
431
|
-
{
|
|
432
|
-
height: screenHeight,
|
|
433
|
-
transform: [{ translateY }]
|
|
434
|
-
}
|
|
435
|
-
]
|
|
436
|
-
},
|
|
437
|
-
/* @__PURE__ */ import_react7.default.createElement(
|
|
438
|
-
import_react_native7.View,
|
|
439
|
-
{
|
|
440
|
-
style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
|
|
441
|
-
...panResponder.panHandlers
|
|
442
|
-
},
|
|
443
|
-
showHandle && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ import_react7.default.createElement(
|
|
444
|
-
import_react_native7.View,
|
|
445
|
-
{
|
|
446
|
-
style: [
|
|
447
|
-
styles.handleIndicator,
|
|
448
|
-
{ backgroundColor: handleIndicatorColor }
|
|
449
|
-
]
|
|
450
|
-
}
|
|
451
|
-
)),
|
|
452
|
-
/* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.content }, children)
|
|
453
|
-
)
|
|
454
|
-
));
|
|
455
|
-
};
|
|
456
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
457
|
-
0 && (module.exports = {
|
|
458
|
-
BottomSheet
|
|
459
|
-
});
|
|
8
|
+
exports.BottomSheet = _chunkXFPPR2VBcjs.BottomSheet;
|