@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/menu/index.cjs
CHANGED
|
@@ -1,93 +1,22 @@
|
|
|
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);
|
|
29
|
-
|
|
30
|
-
// src/components/menu/index.ts
|
|
31
|
-
var menu_exports = {};
|
|
32
|
-
__export(menu_exports, {
|
|
33
|
-
Menu: () => Menu,
|
|
34
|
-
MenuItem: () => MenuItem
|
|
35
|
-
});
|
|
36
|
-
module.exports = __toCommonJS(menu_exports);
|
|
37
|
-
|
|
38
|
-
// src/components/menu/menu.tsx
|
|
39
|
-
var import_react7 = __toESM(require("react"), 1);
|
|
40
|
-
var import_react_native6 = require("react-native");
|
|
41
|
-
|
|
42
|
-
// src/core/theme-context.tsx
|
|
43
|
-
var import_react4 = __toESM(require("react"), 1);
|
|
44
|
-
var import_react_native2 = require("react-native");
|
|
45
|
-
var import_theme = require("@xaui/core/theme");
|
|
46
|
-
var import_palette = require("@xaui/core/palette");
|
|
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');
|
|
47
2
|
|
|
48
|
-
// src/core/portal/portal.tsx
|
|
49
|
-
var import_react2 = require("react");
|
|
50
3
|
|
|
51
|
-
|
|
52
|
-
var import_react = require("react");
|
|
53
|
-
var PortalContext = (0, import_react.createContext)(null);
|
|
54
|
-
|
|
55
|
-
// src/core/portal/portal-host.tsx
|
|
56
|
-
var import_react3 = __toESM(require("react"), 1);
|
|
57
|
-
var import_react_native = require("react-native");
|
|
58
|
-
var hostStyles = import_react_native.StyleSheet.create({
|
|
59
|
-
container: {
|
|
60
|
-
flex: 1
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
// src/core/theme-context.tsx
|
|
65
|
-
var XUIThemeContext = (0, import_react4.createContext)(null);
|
|
66
|
-
|
|
67
|
-
// src/core/theme-hooks.ts
|
|
68
|
-
var import_react5 = require("react");
|
|
69
|
-
var import_react_native3 = require("react-native");
|
|
70
|
-
function useXUITheme() {
|
|
71
|
-
const theme = (0, import_react5.useContext)(XUIThemeContext);
|
|
72
|
-
if (!theme) {
|
|
73
|
-
throw new Error("useXUITheme must be used within XUIProvider");
|
|
74
|
-
}
|
|
75
|
-
return theme;
|
|
76
|
-
}
|
|
4
|
+
var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
|
|
77
5
|
|
|
78
|
-
// src/
|
|
79
|
-
var
|
|
6
|
+
// src/components/menu/menu.tsx
|
|
7
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
8
|
+
var _reactnative = require('react-native');
|
|
80
9
|
|
|
81
10
|
// src/components/menu/menu.style.ts
|
|
82
|
-
|
|
11
|
+
|
|
83
12
|
var SCREEN_INDENT = 8;
|
|
84
13
|
var MENU_GAP = 4;
|
|
85
|
-
var styles =
|
|
14
|
+
var styles = _reactnative.StyleSheet.create({
|
|
86
15
|
wrapper: {
|
|
87
16
|
position: "absolute"
|
|
88
17
|
},
|
|
89
18
|
overlay: {
|
|
90
|
-
...
|
|
19
|
+
..._reactnative.StyleSheet.absoluteFillObject
|
|
91
20
|
},
|
|
92
21
|
menuContainer: {
|
|
93
22
|
position: "absolute",
|
|
@@ -100,20 +29,24 @@ var MENU_SCREEN_INDENT = SCREEN_INDENT;
|
|
|
100
29
|
var MENU_TRIGGER_GAP = MENU_GAP;
|
|
101
30
|
|
|
102
31
|
// src/components/menu/menu.hook.ts
|
|
103
|
-
|
|
104
|
-
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
105
38
|
var useMenuTriggerMeasurements = (visible) => {
|
|
106
|
-
const triggerRef = (0,
|
|
107
|
-
const [triggerPosition, setTriggerPosition] = (0,
|
|
39
|
+
const triggerRef = _react.useRef.call(void 0, null);
|
|
40
|
+
const [triggerPosition, setTriggerPosition] = _react.useState.call(void 0,
|
|
108
41
|
null
|
|
109
42
|
);
|
|
110
|
-
(0,
|
|
43
|
+
_react.useEffect.call(void 0, () => {
|
|
111
44
|
if (!visible) {
|
|
112
45
|
setTriggerPosition(null);
|
|
113
46
|
return;
|
|
114
47
|
}
|
|
115
48
|
const measureTrigger = (attempt) => {
|
|
116
|
-
triggerRef.current
|
|
49
|
+
_optionalChain([triggerRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.measure, 'call', _4 => _4((_, __, width, height, pageX, pageY) => {
|
|
117
50
|
if ((width <= 0 || height <= 0) && attempt < 5) {
|
|
118
51
|
globalThis.requestAnimationFrame(() => measureTrigger(attempt + 1));
|
|
119
52
|
return;
|
|
@@ -124,7 +57,7 @@ var useMenuTriggerMeasurements = (visible) => {
|
|
|
124
57
|
width: Math.max(0, width),
|
|
125
58
|
height: Math.max(0, height)
|
|
126
59
|
});
|
|
127
|
-
});
|
|
60
|
+
})]);
|
|
128
61
|
};
|
|
129
62
|
const frameId = globalThis.setTimeout(() => measureTrigger(0), 0);
|
|
130
63
|
return () => globalThis.clearTimeout(frameId);
|
|
@@ -132,14 +65,14 @@ var useMenuTriggerMeasurements = (visible) => {
|
|
|
132
65
|
return { triggerRef, triggerPosition };
|
|
133
66
|
};
|
|
134
67
|
var useMenuContentLayout = (visible) => {
|
|
135
|
-
const [contentSize, setContentSize] = (0,
|
|
136
|
-
const [isMeasured, setIsMeasured] = (0,
|
|
137
|
-
(0,
|
|
68
|
+
const [contentSize, setContentSize] = _react.useState.call(void 0, { width: 0, height: 0 });
|
|
69
|
+
const [isMeasured, setIsMeasured] = _react.useState.call(void 0, false);
|
|
70
|
+
_react.useEffect.call(void 0, () => {
|
|
138
71
|
if (!visible) {
|
|
139
72
|
setIsMeasured(false);
|
|
140
73
|
}
|
|
141
74
|
}, [visible]);
|
|
142
|
-
const handleContentLayout = (0,
|
|
75
|
+
const handleContentLayout = _react.useCallback.call(void 0, (event) => {
|
|
143
76
|
const { width, height } = event.nativeEvent.layout;
|
|
144
77
|
if (width > 0 && height > 0) {
|
|
145
78
|
setContentSize({ width, height });
|
|
@@ -149,10 +82,10 @@ var useMenuContentLayout = (visible) => {
|
|
|
149
82
|
return { contentSize, handleContentLayout, isMeasured };
|
|
150
83
|
};
|
|
151
84
|
var useMenuPosition = (triggerPosition, contentSize, position) => {
|
|
152
|
-
return (0,
|
|
85
|
+
return _react.useMemo.call(void 0, () => {
|
|
153
86
|
if (!triggerPosition) return { top: 0, left: 0 };
|
|
154
|
-
const screenWidth =
|
|
155
|
-
const screenHeight =
|
|
87
|
+
const screenWidth = _reactnative.Dimensions.get("window").width;
|
|
88
|
+
const screenHeight = _reactnative.Dimensions.get("window").height;
|
|
156
89
|
let top;
|
|
157
90
|
let left = triggerPosition.x;
|
|
158
91
|
const hasEnoughSpaceBelow = triggerPosition.y + triggerPosition.height + contentSize.height <= screenHeight - MENU_SCREEN_INDENT;
|
|
@@ -192,20 +125,20 @@ var useMenuPosition = (triggerPosition, contentSize, position) => {
|
|
|
192
125
|
}, [triggerPosition, contentSize, position]);
|
|
193
126
|
};
|
|
194
127
|
var useMenuAnimation = (visible) => {
|
|
195
|
-
const opacity = (0,
|
|
196
|
-
const scale = (0,
|
|
197
|
-
(0,
|
|
128
|
+
const opacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
|
|
129
|
+
const scale = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
|
|
130
|
+
_react.useEffect.call(void 0, () => {
|
|
198
131
|
if (!visible) return;
|
|
199
132
|
opacity.setValue(0);
|
|
200
133
|
scale.setValue(0);
|
|
201
|
-
|
|
202
|
-
|
|
134
|
+
_reactnative.Animated.parallel([
|
|
135
|
+
_reactnative.Animated.timing(opacity, {
|
|
203
136
|
toValue: 1,
|
|
204
137
|
duration: 200,
|
|
205
|
-
easing:
|
|
138
|
+
easing: _reactnative.Easing.bezier(0.4, 0, 0.2, 1),
|
|
206
139
|
useNativeDriver: true
|
|
207
140
|
}),
|
|
208
|
-
|
|
141
|
+
_reactnative.Animated.spring(scale, {
|
|
209
142
|
toValue: 1,
|
|
210
143
|
friction: 9,
|
|
211
144
|
tension: 100,
|
|
@@ -226,29 +159,29 @@ var Menu = ({
|
|
|
226
159
|
customAppearance,
|
|
227
160
|
maxHeight = 280
|
|
228
161
|
}) => {
|
|
229
|
-
const theme = useXUITheme();
|
|
162
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
230
163
|
const { triggerRef, triggerPosition } = useMenuTriggerMeasurements(visible);
|
|
231
164
|
const { contentSize, handleContentLayout, isMeasured } = useMenuContentLayout(visible);
|
|
232
165
|
const menuPosition = useMenuPosition(triggerPosition, contentSize, position);
|
|
233
166
|
const { opacity, scale } = useMenuAnimation(visible);
|
|
234
|
-
return /* @__PURE__ */
|
|
235
|
-
|
|
167
|
+
return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { ref: triggerRef, collapsable: false }, trigger), /* @__PURE__ */ _react2.default.createElement(
|
|
168
|
+
_reactnative.Modal,
|
|
236
169
|
{
|
|
237
170
|
visible,
|
|
238
171
|
transparent: true,
|
|
239
172
|
animationType: "fade",
|
|
240
173
|
onRequestClose: onDismiss
|
|
241
174
|
},
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
|
|
175
|
+
/* @__PURE__ */ _react2.default.createElement(
|
|
176
|
+
_reactnative.Pressable,
|
|
244
177
|
{
|
|
245
|
-
style: [styles.overlay, customAppearance
|
|
178
|
+
style: [styles.overlay, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.overlay])],
|
|
246
179
|
onPress: onDismiss,
|
|
247
180
|
accessibilityRole: "button",
|
|
248
181
|
accessibilityLabel: "Close menu"
|
|
249
182
|
},
|
|
250
|
-
/* @__PURE__ */
|
|
251
|
-
|
|
183
|
+
/* @__PURE__ */ _react2.default.createElement(
|
|
184
|
+
_reactnative.Animated.View,
|
|
252
185
|
{
|
|
253
186
|
onLayout: handleContentLayout,
|
|
254
187
|
style: [
|
|
@@ -262,24 +195,24 @@ var Menu = ({
|
|
|
262
195
|
transform: [{ scale }],
|
|
263
196
|
...theme.shadows.md
|
|
264
197
|
},
|
|
265
|
-
customAppearance
|
|
198
|
+
_optionalChain([customAppearance, 'optionalAccess', _6 => _6.container])
|
|
266
199
|
]
|
|
267
200
|
},
|
|
268
|
-
/* @__PURE__ */
|
|
201
|
+
/* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (e) => e.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _7 => _7.content]) }, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight } }, children)))
|
|
269
202
|
)
|
|
270
203
|
)
|
|
271
204
|
));
|
|
272
205
|
};
|
|
273
206
|
|
|
274
207
|
// src/components/menu/menu-item.tsx
|
|
275
|
-
|
|
276
|
-
|
|
208
|
+
|
|
209
|
+
|
|
277
210
|
|
|
278
211
|
// src/components/menu/menu-item.style.ts
|
|
279
|
-
|
|
212
|
+
|
|
280
213
|
var MIN_WIDTH = 112;
|
|
281
214
|
var MAX_WIDTH = 280;
|
|
282
|
-
var styles2 =
|
|
215
|
+
var styles2 = _reactnative.StyleSheet.create({
|
|
283
216
|
container: {
|
|
284
217
|
minWidth: MIN_WIDTH,
|
|
285
218
|
maxWidth: MAX_WIDTH,
|
|
@@ -329,14 +262,14 @@ var MenuItem = ({
|
|
|
329
262
|
customAppearance,
|
|
330
263
|
accessibilityLabel
|
|
331
264
|
}) => {
|
|
332
|
-
const theme = useXUITheme();
|
|
265
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
333
266
|
const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
|
|
334
267
|
const renderTitle = () => {
|
|
335
268
|
if (typeof title === "string" || typeof title === "number") {
|
|
336
|
-
return /* @__PURE__ */
|
|
337
|
-
|
|
269
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
270
|
+
_reactnative.Text,
|
|
338
271
|
{
|
|
339
|
-
style: [styles2.titleText, { color: titleColor }, customAppearance
|
|
272
|
+
style: [styles2.titleText, { color: titleColor }, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.title])],
|
|
340
273
|
numberOfLines: 1
|
|
341
274
|
},
|
|
342
275
|
title
|
|
@@ -344,8 +277,8 @@ var MenuItem = ({
|
|
|
344
277
|
}
|
|
345
278
|
return title;
|
|
346
279
|
};
|
|
347
|
-
return /* @__PURE__ */
|
|
348
|
-
|
|
280
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
281
|
+
_reactnative.Pressable,
|
|
349
282
|
{
|
|
350
283
|
onPress: isDisabled ? void 0 : onPress,
|
|
351
284
|
disabled: isDisabled,
|
|
@@ -359,14 +292,13 @@ var MenuItem = ({
|
|
|
359
292
|
pressed && !isDisabled && {
|
|
360
293
|
backgroundColor: theme.colors.foreground + "10"
|
|
361
294
|
},
|
|
362
|
-
customAppearance
|
|
295
|
+
_optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
|
|
363
296
|
]
|
|
364
297
|
},
|
|
365
|
-
/* @__PURE__ */
|
|
298
|
+
/* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.row, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.content])] }, startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.startContent }, startContent), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.content }, renderTitle()), endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.endContent }, endContent))
|
|
366
299
|
);
|
|
367
300
|
};
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
});
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
exports.Menu = Menu; exports.MenuItem = MenuItem;
|
package/dist/menu/index.js
CHANGED
package/dist/menubox/index.cjs
CHANGED
|
@@ -1,51 +1,19 @@
|
|
|
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 _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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(menubox_exports, {
|
|
33
|
-
MenuBox: () => MenuBox,
|
|
34
|
-
MenuBoxItem: () => MenuBoxItem
|
|
35
|
-
});
|
|
36
|
-
module.exports = __toCommonJS(menubox_exports);
|
|
3
|
+
|
|
4
|
+
var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
|
|
37
5
|
|
|
38
6
|
// src/components/menubox/menubox.tsx
|
|
39
|
-
var
|
|
40
|
-
var
|
|
7
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
8
|
+
var _reactnative = require('react-native');
|
|
41
9
|
|
|
42
10
|
// src/components/menubox/menubox-context.ts
|
|
43
|
-
|
|
44
|
-
var MenuBoxContext = (0,
|
|
11
|
+
|
|
12
|
+
var MenuBoxContext = _react.createContext.call(void 0, null);
|
|
45
13
|
|
|
46
14
|
// src/components/menubox/menubox.style.ts
|
|
47
|
-
|
|
48
|
-
var styles =
|
|
15
|
+
|
|
16
|
+
var styles = _reactnative.StyleSheet.create({
|
|
49
17
|
container: {
|
|
50
18
|
overflow: "hidden"
|
|
51
19
|
},
|
|
@@ -73,45 +41,6 @@ var styles = import_react_native.StyleSheet.create({
|
|
|
73
41
|
}
|
|
74
42
|
});
|
|
75
43
|
|
|
76
|
-
// src/core/theme-context.tsx
|
|
77
|
-
var import_react5 = __toESM(require("react"), 1);
|
|
78
|
-
var import_react_native3 = require("react-native");
|
|
79
|
-
var import_theme = require("@xaui/core/theme");
|
|
80
|
-
var import_palette = require("@xaui/core/palette");
|
|
81
|
-
|
|
82
|
-
// src/core/portal/portal.tsx
|
|
83
|
-
var import_react3 = require("react");
|
|
84
|
-
|
|
85
|
-
// src/core/portal/portal-context.ts
|
|
86
|
-
var import_react2 = require("react");
|
|
87
|
-
var PortalContext = (0, import_react2.createContext)(null);
|
|
88
|
-
|
|
89
|
-
// src/core/portal/portal-host.tsx
|
|
90
|
-
var import_react4 = __toESM(require("react"), 1);
|
|
91
|
-
var import_react_native2 = require("react-native");
|
|
92
|
-
var hostStyles = import_react_native2.StyleSheet.create({
|
|
93
|
-
container: {
|
|
94
|
-
flex: 1
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
// src/core/theme-context.tsx
|
|
99
|
-
var XUIThemeContext = (0, import_react5.createContext)(null);
|
|
100
|
-
|
|
101
|
-
// src/core/theme-hooks.ts
|
|
102
|
-
var import_react6 = require("react");
|
|
103
|
-
var import_react_native4 = require("react-native");
|
|
104
|
-
function useXUITheme() {
|
|
105
|
-
const theme = (0, import_react6.useContext)(XUIThemeContext);
|
|
106
|
-
if (!theme) {
|
|
107
|
-
throw new Error("useXUITheme must be used within XUIProvider");
|
|
108
|
-
}
|
|
109
|
-
return theme;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// src/core/index.ts
|
|
113
|
-
var import_theme2 = require("@xaui/core/theme");
|
|
114
|
-
|
|
115
44
|
// src/components/menubox/menubox.tsx
|
|
116
45
|
var MenuBox = ({
|
|
117
46
|
children,
|
|
@@ -122,12 +51,12 @@ var MenuBox = ({
|
|
|
122
51
|
style,
|
|
123
52
|
backgroundColor
|
|
124
53
|
}) => {
|
|
125
|
-
const theme = useXUITheme();
|
|
126
|
-
const itemCount =
|
|
127
|
-
const itemKeys = (0,
|
|
54
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
55
|
+
const itemCount = _react.Children.count(children);
|
|
56
|
+
const itemKeys = _react.useMemo.call(void 0, () => {
|
|
128
57
|
const keys = [];
|
|
129
|
-
|
|
130
|
-
if ((0,
|
|
58
|
+
_react.Children.forEach(children, (child) => {
|
|
59
|
+
if (_react.isValidElement.call(void 0, child)) {
|
|
131
60
|
const props = child.props;
|
|
132
61
|
if (props.itemKey) {
|
|
133
62
|
keys.push(props.itemKey);
|
|
@@ -139,8 +68,8 @@ var MenuBox = ({
|
|
|
139
68
|
const getItemIndex = (itemKey) => {
|
|
140
69
|
return itemKeys.indexOf(itemKey);
|
|
141
70
|
};
|
|
142
|
-
const bgColor = backgroundColor
|
|
143
|
-
const contextValue = (0,
|
|
71
|
+
const bgColor = _nullishCoalesce(backgroundColor, () => ( theme.colors.default.background));
|
|
72
|
+
const contextValue = _react.useMemo.call(void 0,
|
|
144
73
|
() => ({
|
|
145
74
|
size,
|
|
146
75
|
radius,
|
|
@@ -152,18 +81,18 @@ var MenuBox = ({
|
|
|
152
81
|
}),
|
|
153
82
|
[size, radius, themeColor, bgColor, itemCount, spacing, getItemIndex]
|
|
154
83
|
);
|
|
155
|
-
return /* @__PURE__ */
|
|
84
|
+
return /* @__PURE__ */ _react2.default.createElement(MenuBoxContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, style] }, children));
|
|
156
85
|
};
|
|
157
86
|
|
|
158
87
|
// src/components/menubox/menubox-item.tsx
|
|
159
|
-
|
|
160
|
-
|
|
88
|
+
|
|
89
|
+
|
|
161
90
|
|
|
162
91
|
// src/components/menubox/menubox.hook.ts
|
|
163
|
-
|
|
92
|
+
|
|
164
93
|
var useMenuBoxItemSizeStyles = (size) => {
|
|
165
|
-
const theme = useXUITheme();
|
|
166
|
-
return (0,
|
|
94
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
95
|
+
return _react.useMemo.call(void 0, () => {
|
|
167
96
|
const sizes = {
|
|
168
97
|
xs: {
|
|
169
98
|
paddingVertical: theme.spacing.sm,
|
|
@@ -194,8 +123,8 @@ var useMenuBoxItemSizeStyles = (size) => {
|
|
|
194
123
|
}, [size, theme]);
|
|
195
124
|
};
|
|
196
125
|
var useMenuBoxRadiusStyles = (radius, isFirst, isLast) => {
|
|
197
|
-
const theme = useXUITheme();
|
|
198
|
-
return (0,
|
|
126
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
127
|
+
return _react.useMemo.call(void 0, () => {
|
|
199
128
|
const radiusMap = {
|
|
200
129
|
none: theme.borderRadius.none,
|
|
201
130
|
sm: theme.borderRadius.md,
|
|
@@ -214,16 +143,16 @@ var useMenuBoxRadiusStyles = (radius, isFirst, isLast) => {
|
|
|
214
143
|
};
|
|
215
144
|
|
|
216
145
|
// src/components/menubox/menubox.animation.ts
|
|
217
|
-
|
|
146
|
+
|
|
218
147
|
var runMenuBoxPressInAnimation = (animatedScale, animatedOpacity) => {
|
|
219
|
-
|
|
220
|
-
|
|
148
|
+
_reactnative.Animated.parallel([
|
|
149
|
+
_reactnative.Animated.spring(animatedScale, {
|
|
221
150
|
toValue: 0.99,
|
|
222
151
|
useNativeDriver: true,
|
|
223
152
|
speed: 50,
|
|
224
153
|
bounciness: 0
|
|
225
154
|
}),
|
|
226
|
-
|
|
155
|
+
_reactnative.Animated.timing(animatedOpacity, {
|
|
227
156
|
toValue: 0.8,
|
|
228
157
|
duration: 100,
|
|
229
158
|
useNativeDriver: true
|
|
@@ -231,14 +160,14 @@ var runMenuBoxPressInAnimation = (animatedScale, animatedOpacity) => {
|
|
|
231
160
|
]).start();
|
|
232
161
|
};
|
|
233
162
|
var runMenuBoxPressOutAnimation = (animatedScale, animatedOpacity) => {
|
|
234
|
-
|
|
235
|
-
|
|
163
|
+
_reactnative.Animated.parallel([
|
|
164
|
+
_reactnative.Animated.spring(animatedScale, {
|
|
236
165
|
toValue: 1,
|
|
237
166
|
useNativeDriver: true,
|
|
238
167
|
speed: 50,
|
|
239
168
|
bounciness: 0
|
|
240
169
|
}),
|
|
241
|
-
|
|
170
|
+
_reactnative.Animated.timing(animatedOpacity, {
|
|
242
171
|
toValue: 1,
|
|
243
172
|
duration: 100,
|
|
244
173
|
useNativeDriver: true
|
|
@@ -248,10 +177,10 @@ var runMenuBoxPressOutAnimation = (animatedScale, animatedOpacity) => {
|
|
|
248
177
|
|
|
249
178
|
// src/components/menubox/menubox-item.tsx
|
|
250
179
|
var MenuBoxItem = (props) => {
|
|
251
|
-
const context = (0,
|
|
252
|
-
const theme = useXUITheme();
|
|
253
|
-
const animatedScale =
|
|
254
|
-
const animatedOpacity =
|
|
180
|
+
const context = _react.useContext.call(void 0, MenuBoxContext);
|
|
181
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
182
|
+
const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
|
|
183
|
+
const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
|
|
255
184
|
const {
|
|
256
185
|
itemKey,
|
|
257
186
|
title,
|
|
@@ -262,12 +191,12 @@ var MenuBoxItem = (props) => {
|
|
|
262
191
|
customAppearance,
|
|
263
192
|
onPress
|
|
264
193
|
} = props;
|
|
265
|
-
const size = context
|
|
266
|
-
const radius = context
|
|
267
|
-
const itemBackgroundColor = context
|
|
268
|
-
const spacing = context
|
|
269
|
-
const itemCount = context
|
|
270
|
-
const index = context
|
|
194
|
+
const size = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _ => _.size]), () => ( "md"));
|
|
195
|
+
const radius = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _2 => _2.radius]), () => ( "lg"));
|
|
196
|
+
const itemBackgroundColor = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _3 => _3.backgroundColor]), () => ( (theme.mode === "dark" ? theme.colors.default.background : theme.colors.background)));
|
|
197
|
+
const spacing = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _4 => _4.spacing]), () => ( 0));
|
|
198
|
+
const itemCount = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _5 => _5.itemCount]), () => ( 1));
|
|
199
|
+
const index = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _6 => _6.getItemIndex, 'call', _7 => _7(itemKey)]), () => ( 0));
|
|
271
200
|
const isFirst = index === 0;
|
|
272
201
|
const isLast = index === itemCount - 1;
|
|
273
202
|
const sizeStyles = useMenuBoxItemSizeStyles(size);
|
|
@@ -278,7 +207,7 @@ var MenuBoxItem = (props) => {
|
|
|
278
207
|
if (isDisabled) {
|
|
279
208
|
return;
|
|
280
209
|
}
|
|
281
|
-
onPress
|
|
210
|
+
_optionalChain([onPress, 'optionalCall', _8 => _8({})]);
|
|
282
211
|
};
|
|
283
212
|
const handlePressIn = () => {
|
|
284
213
|
if (!isDisabled) {
|
|
@@ -292,13 +221,13 @@ var MenuBoxItem = (props) => {
|
|
|
292
221
|
};
|
|
293
222
|
const renderTitle = () => {
|
|
294
223
|
if (typeof title === "string" || typeof title === "number") {
|
|
295
|
-
return /* @__PURE__ */
|
|
296
|
-
|
|
224
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
225
|
+
_reactnative.Text,
|
|
297
226
|
{
|
|
298
227
|
style: [
|
|
299
228
|
styles.title,
|
|
300
229
|
{ fontSize: sizeStyles.titleSize, color: titleColor },
|
|
301
|
-
customAppearance
|
|
230
|
+
_optionalChain([customAppearance, 'optionalAccess', _9 => _9.title])
|
|
302
231
|
],
|
|
303
232
|
numberOfLines: 1
|
|
304
233
|
},
|
|
@@ -310,13 +239,13 @@ var MenuBoxItem = (props) => {
|
|
|
310
239
|
const renderDescription = () => {
|
|
311
240
|
if (!description) return null;
|
|
312
241
|
if (typeof description === "string" || typeof description === "number") {
|
|
313
|
-
return /* @__PURE__ */
|
|
314
|
-
|
|
242
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
243
|
+
_reactnative.Text,
|
|
315
244
|
{
|
|
316
245
|
style: [
|
|
317
246
|
styles.description,
|
|
318
247
|
{ fontSize: sizeStyles.descriptionSize, color: descriptionColor },
|
|
319
|
-
customAppearance
|
|
248
|
+
_optionalChain([customAppearance, 'optionalAccess', _10 => _10.description])
|
|
320
249
|
],
|
|
321
250
|
numberOfLines: 1
|
|
322
251
|
},
|
|
@@ -325,8 +254,8 @@ var MenuBoxItem = (props) => {
|
|
|
325
254
|
}
|
|
326
255
|
return description;
|
|
327
256
|
};
|
|
328
|
-
const content = /* @__PURE__ */
|
|
329
|
-
|
|
257
|
+
const content = /* @__PURE__ */ _react2.default.createElement(
|
|
258
|
+
_reactnative.Animated.View,
|
|
330
259
|
{
|
|
331
260
|
style: [
|
|
332
261
|
styles.item,
|
|
@@ -339,15 +268,15 @@ var MenuBoxItem = (props) => {
|
|
|
339
268
|
},
|
|
340
269
|
radiusStyles,
|
|
341
270
|
isDisabled && styles.disabled,
|
|
342
|
-
customAppearance
|
|
271
|
+
_optionalChain([customAppearance, 'optionalAccess', _11 => _11.container])
|
|
343
272
|
]
|
|
344
273
|
},
|
|
345
|
-
startContent && /* @__PURE__ */
|
|
346
|
-
/* @__PURE__ */
|
|
347
|
-
endContent && /* @__PURE__ */
|
|
274
|
+
startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _12 => _12.content]) }, startContent),
|
|
275
|
+
/* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, _optionalChain([customAppearance, 'optionalAccess', _13 => _13.content])] }, renderTitle(), renderDescription()),
|
|
276
|
+
endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _14 => _14.content]) }, endContent)
|
|
348
277
|
);
|
|
349
|
-
return /* @__PURE__ */
|
|
350
|
-
|
|
278
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
279
|
+
_reactnative.Pressable,
|
|
351
280
|
{
|
|
352
281
|
onPress: handlePress,
|
|
353
282
|
onPressIn: handlePressIn,
|
|
@@ -362,8 +291,7 @@ var MenuBoxItem = (props) => {
|
|
|
362
291
|
content
|
|
363
292
|
);
|
|
364
293
|
};
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
});
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
exports.MenuBox = MenuBox; exports.MenuBoxItem = MenuBoxItem;
|