@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/chip/index.cjs
CHANGED
|
@@ -1,48 +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 _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(chip_exports, {
|
|
33
|
-
Chip: () => Chip,
|
|
34
|
-
ChipGroup: () => ChipGroup,
|
|
35
|
-
ChipItem: () => ChipItem
|
|
36
|
-
});
|
|
37
|
-
module.exports = __toCommonJS(chip_exports);
|
|
3
|
+
|
|
4
|
+
var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
|
|
38
5
|
|
|
39
6
|
// src/components/chip/chip.tsx
|
|
40
|
-
var
|
|
41
|
-
var
|
|
7
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
8
|
+
var _reactnative = require('react-native');
|
|
42
9
|
|
|
43
10
|
// src/components/chip/chip.style.ts
|
|
44
|
-
|
|
45
|
-
var styles =
|
|
11
|
+
|
|
12
|
+
var styles = _reactnative.StyleSheet.create({
|
|
46
13
|
chip: {
|
|
47
14
|
flexDirection: "row",
|
|
48
15
|
alignItems: "center",
|
|
@@ -81,49 +48,8 @@ var styles = import_react_native.StyleSheet.create({
|
|
|
81
48
|
});
|
|
82
49
|
|
|
83
50
|
// src/components/chip/chip.hook.ts
|
|
84
|
-
var import_react6 = require("react");
|
|
85
|
-
var import_core = require("@xaui/core");
|
|
86
|
-
|
|
87
|
-
// src/core/theme-context.tsx
|
|
88
|
-
var import_react4 = __toESM(require("react"), 1);
|
|
89
|
-
var import_react_native3 = require("react-native");
|
|
90
|
-
var import_theme = require("@xaui/core/theme");
|
|
91
|
-
var import_palette = require("@xaui/core/palette");
|
|
92
|
-
|
|
93
|
-
// src/core/portal/portal.tsx
|
|
94
|
-
var import_react2 = require("react");
|
|
95
|
-
|
|
96
|
-
// src/core/portal/portal-context.ts
|
|
97
|
-
var import_react = require("react");
|
|
98
|
-
var PortalContext = (0, import_react.createContext)(null);
|
|
99
|
-
|
|
100
|
-
// src/core/portal/portal-host.tsx
|
|
101
|
-
var import_react3 = __toESM(require("react"), 1);
|
|
102
|
-
var import_react_native2 = require("react-native");
|
|
103
|
-
var hostStyles = import_react_native2.StyleSheet.create({
|
|
104
|
-
container: {
|
|
105
|
-
flex: 1
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
// src/core/theme-context.tsx
|
|
110
|
-
var XUIThemeContext = (0, import_react4.createContext)(null);
|
|
111
|
-
|
|
112
|
-
// src/core/theme-hooks.ts
|
|
113
|
-
var import_react5 = require("react");
|
|
114
|
-
var import_react_native4 = require("react-native");
|
|
115
|
-
function useXUITheme() {
|
|
116
|
-
const theme = (0, import_react5.useContext)(XUIThemeContext);
|
|
117
|
-
if (!theme) {
|
|
118
|
-
throw new Error("useXUITheme must be used within XUIProvider");
|
|
119
|
-
}
|
|
120
|
-
return theme;
|
|
121
|
-
}
|
|
122
51
|
|
|
123
|
-
|
|
124
|
-
var import_theme2 = require("@xaui/core/theme");
|
|
125
|
-
|
|
126
|
-
// src/components/chip/chip.hook.ts
|
|
52
|
+
var _core = require('@xaui/core');
|
|
127
53
|
var sizeMap = {
|
|
128
54
|
sm: { height: 32, paddingH: 12, fontSize: 13 },
|
|
129
55
|
md: { height: 40, paddingH: 16, fontSize: 15 },
|
|
@@ -140,20 +66,20 @@ var closeSizeMap = {
|
|
|
140
66
|
lg: 17
|
|
141
67
|
};
|
|
142
68
|
function useChipSizeStyles(size) {
|
|
143
|
-
return (0,
|
|
69
|
+
return _react.useMemo.call(void 0, () => {
|
|
144
70
|
const { height, paddingH, fontSize } = sizeMap[size];
|
|
145
71
|
return { height, paddingHorizontal: paddingH, fontSize };
|
|
146
72
|
}, [size]);
|
|
147
73
|
}
|
|
148
74
|
function useChipDotSize(size) {
|
|
149
|
-
return (0,
|
|
75
|
+
return _react.useMemo.call(void 0, () => dotSizeMap[size], [size]);
|
|
150
76
|
}
|
|
151
77
|
function useChipCloseSize(size) {
|
|
152
|
-
return (0,
|
|
78
|
+
return _react.useMemo.call(void 0, () => closeSizeMap[size], [size]);
|
|
153
79
|
}
|
|
154
80
|
function useChipRadiusStyles(radius, height) {
|
|
155
|
-
const theme = useXUITheme();
|
|
156
|
-
return (0,
|
|
81
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
82
|
+
return _react.useMemo.call(void 0, () => {
|
|
157
83
|
if (radius === "full") {
|
|
158
84
|
return { borderRadius: height / 2 };
|
|
159
85
|
}
|
|
@@ -161,10 +87,10 @@ function useChipRadiusStyles(radius, height) {
|
|
|
161
87
|
}, [height, radius, theme.borderRadius]);
|
|
162
88
|
}
|
|
163
89
|
function useChipVariantStyles(themeColor, variant) {
|
|
164
|
-
const theme = useXUITheme();
|
|
165
|
-
const safeColor = (0,
|
|
90
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
91
|
+
const safeColor = _core.getSafeThemeColor.call(void 0, themeColor);
|
|
166
92
|
const colorScheme = theme.colors[safeColor];
|
|
167
|
-
return (0,
|
|
93
|
+
return _react.useMemo.call(void 0, () => {
|
|
168
94
|
switch (variant) {
|
|
169
95
|
case "bordered":
|
|
170
96
|
return {
|
|
@@ -185,10 +111,10 @@ function useChipVariantStyles(themeColor, variant) {
|
|
|
185
111
|
};
|
|
186
112
|
case "faded":
|
|
187
113
|
return {
|
|
188
|
-
backgroundColor: (0,
|
|
114
|
+
backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.7),
|
|
189
115
|
color: colorScheme.main,
|
|
190
116
|
borderWidth: 1,
|
|
191
|
-
borderColor: (0,
|
|
117
|
+
borderColor: _core.withOpacity.call(void 0, colorScheme.main, 0.3)
|
|
192
118
|
};
|
|
193
119
|
case "shadow":
|
|
194
120
|
return {
|
|
@@ -227,8 +153,8 @@ var Chip = ({
|
|
|
227
153
|
onClose,
|
|
228
154
|
onPress
|
|
229
155
|
}) => {
|
|
230
|
-
const [isClosed, setIsClosed] =
|
|
231
|
-
const [isClosing, setIsClosing] =
|
|
156
|
+
const [isClosed, setIsClosed] = _react2.default.useState(false);
|
|
157
|
+
const [isClosing, setIsClosing] = _react2.default.useState(false);
|
|
232
158
|
const sizeStyles = useChipSizeStyles(size);
|
|
233
159
|
const radiusStyles = useChipRadiusStyles(radius, sizeStyles.height);
|
|
234
160
|
const variantStyles = useChipVariantStyles(themeColor, variant);
|
|
@@ -237,29 +163,29 @@ var Chip = ({
|
|
|
237
163
|
const isDotVariant = variant === "dot";
|
|
238
164
|
const hasClose = onClose !== void 0;
|
|
239
165
|
const isInteractive = onPress !== void 0 || hasClose;
|
|
240
|
-
const scale =
|
|
241
|
-
const opacity =
|
|
242
|
-
const isClosingRef =
|
|
243
|
-
const colorProgress =
|
|
244
|
-
const targetBackgroundColor = variantStyles.backgroundColor
|
|
245
|
-
const targetBorderColor = variantStyles.borderColor
|
|
246
|
-
const targetTextColor = variantStyles.color
|
|
247
|
-
const targetDotColor = variantStyles.dotColor
|
|
248
|
-
const previousColorsRef =
|
|
166
|
+
const scale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
|
|
167
|
+
const opacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
|
|
168
|
+
const isClosingRef = _react2.default.useRef(false);
|
|
169
|
+
const colorProgress = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
|
|
170
|
+
const targetBackgroundColor = _nullishCoalesce(variantStyles.backgroundColor, () => ( "transparent"));
|
|
171
|
+
const targetBorderColor = _nullishCoalesce(variantStyles.borderColor, () => ( "transparent"));
|
|
172
|
+
const targetTextColor = _nullishCoalesce(variantStyles.color, () => ( "#000000"));
|
|
173
|
+
const targetDotColor = _nullishCoalesce(variantStyles.dotColor, () => ( targetTextColor));
|
|
174
|
+
const previousColorsRef = _react2.default.useRef({
|
|
249
175
|
backgroundColor: targetBackgroundColor,
|
|
250
176
|
borderColor: targetBorderColor,
|
|
251
177
|
textColor: targetTextColor,
|
|
252
178
|
dotColor: targetDotColor
|
|
253
179
|
});
|
|
254
|
-
|
|
180
|
+
_react2.default.useEffect(() => {
|
|
255
181
|
if (previousColorsRef.current.backgroundColor === targetBackgroundColor && previousColorsRef.current.borderColor === targetBorderColor && previousColorsRef.current.textColor === targetTextColor && previousColorsRef.current.dotColor === targetDotColor) {
|
|
256
182
|
return;
|
|
257
183
|
}
|
|
258
184
|
colorProgress.setValue(0);
|
|
259
|
-
|
|
185
|
+
_reactnative.Animated.timing(colorProgress, {
|
|
260
186
|
toValue: 1,
|
|
261
187
|
duration: 180,
|
|
262
|
-
easing:
|
|
188
|
+
easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
|
|
263
189
|
useNativeDriver: false
|
|
264
190
|
}).start(() => {
|
|
265
191
|
previousColorsRef.current = {
|
|
@@ -292,40 +218,40 @@ var Chip = ({
|
|
|
292
218
|
inputRange: [0, 1],
|
|
293
219
|
outputRange: [previousColorsRef.current.dotColor, targetDotColor]
|
|
294
220
|
});
|
|
295
|
-
const handlePressIn =
|
|
221
|
+
const handlePressIn = _react2.default.useCallback(() => {
|
|
296
222
|
if (!isInteractive || isDisabled || isClosing || hasClose) return;
|
|
297
|
-
|
|
223
|
+
_reactnative.Animated.timing(scale, {
|
|
298
224
|
toValue: 0.97,
|
|
299
225
|
duration: 90,
|
|
300
|
-
easing:
|
|
226
|
+
easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
|
|
301
227
|
useNativeDriver: true
|
|
302
228
|
}).start();
|
|
303
229
|
}, [hasClose, isInteractive, isClosing, isDisabled, scale]);
|
|
304
|
-
const handlePressOut =
|
|
230
|
+
const handlePressOut = _react2.default.useCallback(() => {
|
|
305
231
|
if (!isInteractive || isDisabled || isClosing || hasClose) return;
|
|
306
|
-
|
|
232
|
+
_reactnative.Animated.timing(scale, {
|
|
307
233
|
toValue: 1,
|
|
308
234
|
duration: 120,
|
|
309
|
-
easing:
|
|
235
|
+
easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
|
|
310
236
|
useNativeDriver: true
|
|
311
237
|
}).start();
|
|
312
238
|
}, [hasClose, isInteractive, isClosing, isDisabled, scale]);
|
|
313
|
-
const handleChipPress =
|
|
239
|
+
const handleChipPress = _react2.default.useCallback(() => {
|
|
314
240
|
if (isDisabled || isClosing || isClosingRef.current) return;
|
|
315
241
|
if (hasClose && onClose) {
|
|
316
242
|
isClosingRef.current = true;
|
|
317
243
|
setIsClosing(true);
|
|
318
|
-
|
|
319
|
-
|
|
244
|
+
_reactnative.Animated.parallel([
|
|
245
|
+
_reactnative.Animated.timing(opacity, {
|
|
320
246
|
toValue: 0,
|
|
321
247
|
duration: 180,
|
|
322
|
-
easing:
|
|
248
|
+
easing: _reactnative.Easing.in(_reactnative.Easing.quad),
|
|
323
249
|
useNativeDriver: true
|
|
324
250
|
}),
|
|
325
|
-
|
|
251
|
+
_reactnative.Animated.timing(scale, {
|
|
326
252
|
toValue: 0.88,
|
|
327
253
|
duration: 180,
|
|
328
|
-
easing:
|
|
254
|
+
easing: _reactnative.Easing.in(_reactnative.Easing.quad),
|
|
329
255
|
useNativeDriver: true
|
|
330
256
|
})
|
|
331
257
|
]).start(() => {
|
|
@@ -336,13 +262,13 @@ var Chip = ({
|
|
|
336
262
|
});
|
|
337
263
|
return;
|
|
338
264
|
}
|
|
339
|
-
onPress
|
|
265
|
+
_optionalChain([onPress, 'optionalCall', _ => _()]);
|
|
340
266
|
}, [hasClose, isClosing, isDisabled, onClose, onPress, opacity, scale]);
|
|
341
267
|
if (isClosed) {
|
|
342
268
|
return null;
|
|
343
269
|
}
|
|
344
|
-
const chipContent = /* @__PURE__ */
|
|
345
|
-
|
|
270
|
+
const chipContent = /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: { transform: [{ scale }], opacity } }, /* @__PURE__ */ _react2.default.createElement(
|
|
271
|
+
_reactnative.Animated.View,
|
|
346
272
|
{
|
|
347
273
|
style: [
|
|
348
274
|
styles.chip,
|
|
@@ -356,13 +282,13 @@ var Chip = ({
|
|
|
356
282
|
radiusStyles,
|
|
357
283
|
variantStyles.shadow,
|
|
358
284
|
isDisabled && styles.disabled,
|
|
359
|
-
customAppearance
|
|
285
|
+
_optionalChain([customAppearance, 'optionalAccess', _2 => _2.container])
|
|
360
286
|
],
|
|
361
287
|
accessible: true,
|
|
362
288
|
accessibilityRole: "text"
|
|
363
289
|
},
|
|
364
|
-
isDotVariant && /* @__PURE__ */
|
|
365
|
-
|
|
290
|
+
isDotVariant && /* @__PURE__ */ _react2.default.createElement(
|
|
291
|
+
_reactnative.Animated.View,
|
|
366
292
|
{
|
|
367
293
|
style: [
|
|
368
294
|
styles.dot,
|
|
@@ -371,35 +297,35 @@ var Chip = ({
|
|
|
371
297
|
height: dotSize,
|
|
372
298
|
backgroundColor: animatedDotColor
|
|
373
299
|
},
|
|
374
|
-
customAppearance
|
|
300
|
+
_optionalChain([customAppearance, 'optionalAccess', _3 => _3.dot])
|
|
375
301
|
]
|
|
376
302
|
}
|
|
377
303
|
),
|
|
378
|
-
avatar && /* @__PURE__ */
|
|
379
|
-
startContent && !avatar && /* @__PURE__ */
|
|
380
|
-
/* @__PURE__ */
|
|
381
|
-
|
|
304
|
+
avatar && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.avatar }, avatar),
|
|
305
|
+
startContent && !avatar && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.startContent }, startContent),
|
|
306
|
+
/* @__PURE__ */ _react2.default.createElement(
|
|
307
|
+
_reactnative.Animated.Text,
|
|
382
308
|
{
|
|
383
309
|
style: [
|
|
384
310
|
styles.text,
|
|
385
311
|
{ fontSize: sizeStyles.fontSize, color: animatedTextColor },
|
|
386
|
-
customAppearance
|
|
312
|
+
_optionalChain([customAppearance, 'optionalAccess', _4 => _4.text])
|
|
387
313
|
]
|
|
388
314
|
},
|
|
389
315
|
children
|
|
390
316
|
),
|
|
391
|
-
endContent && !hasClose && /* @__PURE__ */
|
|
392
|
-
hasClose && /* @__PURE__ */
|
|
393
|
-
|
|
317
|
+
endContent && !hasClose && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.endContent }, endContent),
|
|
318
|
+
hasClose && /* @__PURE__ */ _react2.default.createElement(
|
|
319
|
+
_reactnative.View,
|
|
394
320
|
{
|
|
395
321
|
style: [
|
|
396
322
|
styles.closeButton,
|
|
397
323
|
{ width: closeSize, height: closeSize },
|
|
398
|
-
customAppearance
|
|
324
|
+
_optionalChain([customAppearance, 'optionalAccess', _5 => _5.closeButton])
|
|
399
325
|
]
|
|
400
326
|
},
|
|
401
|
-
/* @__PURE__ */
|
|
402
|
-
|
|
327
|
+
/* @__PURE__ */ _react2.default.createElement(
|
|
328
|
+
_reactnative.Animated.Text,
|
|
403
329
|
{
|
|
404
330
|
style: {
|
|
405
331
|
fontSize: closeSize - 2,
|
|
@@ -412,8 +338,8 @@ var Chip = ({
|
|
|
412
338
|
)
|
|
413
339
|
));
|
|
414
340
|
if (isInteractive) {
|
|
415
|
-
return /* @__PURE__ */
|
|
416
|
-
|
|
341
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
342
|
+
_reactnative.Pressable,
|
|
417
343
|
{
|
|
418
344
|
onPress: isDisabled || isClosing ? void 0 : handleChipPress,
|
|
419
345
|
onPressIn: handlePressIn,
|
|
@@ -427,22 +353,22 @@ var Chip = ({
|
|
|
427
353
|
};
|
|
428
354
|
|
|
429
355
|
// src/components/chip/chip-group.tsx
|
|
430
|
-
|
|
431
|
-
|
|
356
|
+
|
|
357
|
+
|
|
432
358
|
|
|
433
359
|
// src/components/chip/chip-context.ts
|
|
434
|
-
|
|
435
|
-
var ChipGroupContext = (0,
|
|
360
|
+
|
|
361
|
+
var ChipGroupContext = _react.createContext.call(void 0, null);
|
|
436
362
|
|
|
437
363
|
// src/components/chip/chip-group.hook.ts
|
|
438
|
-
|
|
364
|
+
|
|
439
365
|
function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues, onSelectionChange) {
|
|
440
|
-
const [internalValues, setInternalValues] = (0,
|
|
441
|
-
defaultSelectedValues
|
|
366
|
+
const [internalValues, setInternalValues] = _react.useState.call(void 0,
|
|
367
|
+
_nullishCoalesce(defaultSelectedValues, () => ( []))
|
|
442
368
|
);
|
|
443
369
|
const isControlled = selectedValues !== void 0;
|
|
444
370
|
const currentValues = isControlled ? selectedValues : internalValues;
|
|
445
|
-
const onToggle = (0,
|
|
371
|
+
const onToggle = _react.useCallback.call(void 0,
|
|
446
372
|
(value) => {
|
|
447
373
|
const isSelected = currentValues.includes(value);
|
|
448
374
|
let nextValues;
|
|
@@ -454,11 +380,11 @@ function useChipGroupSelection(selectMode, selectedValues, defaultSelectedValues
|
|
|
454
380
|
if (!isControlled) {
|
|
455
381
|
setInternalValues(nextValues);
|
|
456
382
|
}
|
|
457
|
-
onSelectionChange
|
|
383
|
+
_optionalChain([onSelectionChange, 'optionalCall', _6 => _6(nextValues)]);
|
|
458
384
|
},
|
|
459
385
|
[currentValues, isControlled, onSelectionChange, selectMode]
|
|
460
386
|
);
|
|
461
|
-
return (0,
|
|
387
|
+
return _react.useMemo.call(void 0, () => ({ currentValues, onToggle }), [currentValues, onToggle]);
|
|
462
388
|
}
|
|
463
389
|
|
|
464
390
|
// src/components/chip/chip-group.tsx
|
|
@@ -483,7 +409,7 @@ var ChipGroup = ({
|
|
|
483
409
|
defaultSelectedValues,
|
|
484
410
|
onSelectionChange
|
|
485
411
|
);
|
|
486
|
-
const contextValue =
|
|
412
|
+
const contextValue = _react2.default.useMemo(
|
|
487
413
|
() => ({
|
|
488
414
|
variant,
|
|
489
415
|
themeColor,
|
|
@@ -507,13 +433,13 @@ var ChipGroup = ({
|
|
|
507
433
|
onToggle
|
|
508
434
|
]
|
|
509
435
|
);
|
|
510
|
-
return /* @__PURE__ */
|
|
511
|
-
|
|
436
|
+
return /* @__PURE__ */ _react2.default.createElement(ChipGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(
|
|
437
|
+
_reactnative.View,
|
|
512
438
|
{
|
|
513
439
|
style: [
|
|
514
440
|
styles.groupContainer,
|
|
515
441
|
{ gap: spacing },
|
|
516
|
-
customAppearance
|
|
442
|
+
_optionalChain([customAppearance, 'optionalAccess', _7 => _7.container])
|
|
517
443
|
],
|
|
518
444
|
accessible: true
|
|
519
445
|
},
|
|
@@ -522,7 +448,7 @@ var ChipGroup = ({
|
|
|
522
448
|
};
|
|
523
449
|
|
|
524
450
|
// src/components/chip/chip-item.tsx
|
|
525
|
-
|
|
451
|
+
|
|
526
452
|
function getSelectableVariant(baseVariant, isSelected) {
|
|
527
453
|
if (isSelected) {
|
|
528
454
|
return baseVariant;
|
|
@@ -543,17 +469,17 @@ var ChipItem = ({
|
|
|
543
469
|
isDisabled,
|
|
544
470
|
customAppearance
|
|
545
471
|
}) => {
|
|
546
|
-
const groupContext = (0,
|
|
472
|
+
const groupContext = _react.useContext.call(void 0, ChipGroupContext);
|
|
547
473
|
if (!groupContext) {
|
|
548
474
|
return null;
|
|
549
475
|
}
|
|
550
|
-
const resolvedVariant = variant
|
|
551
|
-
const resolvedColor = themeColor
|
|
552
|
-
const resolvedDisabled = isDisabled
|
|
476
|
+
const resolvedVariant = _nullishCoalesce(variant, () => ( groupContext.variant));
|
|
477
|
+
const resolvedColor = _nullishCoalesce(themeColor, () => ( groupContext.themeColor));
|
|
478
|
+
const resolvedDisabled = _nullishCoalesce(isDisabled, () => ( groupContext.isDisabled));
|
|
553
479
|
const isSelected = groupContext.selectedValues.includes(value);
|
|
554
480
|
const chipVariant = groupContext.isSelectable ? getSelectableVariant(resolvedVariant, isSelected) : resolvedVariant;
|
|
555
481
|
const handlePress = groupContext.isSelectable ? () => groupContext.onToggle(value) : void 0;
|
|
556
|
-
return /* @__PURE__ */
|
|
482
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
557
483
|
Chip,
|
|
558
484
|
{
|
|
559
485
|
variant: chipVariant,
|
|
@@ -570,9 +496,8 @@ var ChipItem = ({
|
|
|
570
496
|
children
|
|
571
497
|
);
|
|
572
498
|
};
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
});
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
exports.Chip = Chip; exports.ChipGroup = ChipGroup; exports.ChipItem = ChipItem;
|
package/dist/chip/index.js
CHANGED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
|
+
|
|
3
|
+
var _chunkOQ2BLOOGcjs = require('./chunk-OQ2BLOOG.cjs');
|
|
4
|
+
|
|
5
|
+
// src/components/divider/divider.tsx
|
|
6
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
7
|
+
var _reactnative = require('react-native');
|
|
8
|
+
|
|
9
|
+
// src/components/divider/divider.style.ts
|
|
10
|
+
|
|
11
|
+
var styles = _reactnative.StyleSheet.create({
|
|
12
|
+
horizontal: {
|
|
13
|
+
height: 1,
|
|
14
|
+
flexShrink: 1,
|
|
15
|
+
flexBasis: "auto",
|
|
16
|
+
width: "100%"
|
|
17
|
+
},
|
|
18
|
+
vertical: {
|
|
19
|
+
width: 1,
|
|
20
|
+
alignSelf: "stretch"
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
// src/components/divider/divider.hook.ts
|
|
25
|
+
|
|
26
|
+
var _core = require('@xaui/core');
|
|
27
|
+
var useDividerColor = (themeColor, customColor) => {
|
|
28
|
+
const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
|
|
29
|
+
const dividerColor = _react.useMemo.call(void 0, () => {
|
|
30
|
+
if (customColor) {
|
|
31
|
+
return customColor;
|
|
32
|
+
}
|
|
33
|
+
const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
|
|
34
|
+
return theme.colors[safeThemeColor].main;
|
|
35
|
+
}, [customColor, themeColor, theme]);
|
|
36
|
+
return dividerColor;
|
|
37
|
+
};
|
|
38
|
+
var useDividerSize = (size, orientation) => {
|
|
39
|
+
const sizeStyles = _react.useMemo.call(void 0, () => {
|
|
40
|
+
if (orientation === "horizontal") {
|
|
41
|
+
return {
|
|
42
|
+
height: size
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
return {
|
|
46
|
+
width: size
|
|
47
|
+
};
|
|
48
|
+
}, [size, orientation]);
|
|
49
|
+
return sizeStyles;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// src/components/divider/divider.tsx
|
|
53
|
+
var Divider = ({
|
|
54
|
+
size = 1,
|
|
55
|
+
themeColor = "default",
|
|
56
|
+
color,
|
|
57
|
+
orientation = "horizontal"
|
|
58
|
+
}) => {
|
|
59
|
+
const dividerColor = useDividerColor(themeColor, color);
|
|
60
|
+
const sizeStyles = useDividerSize(size, orientation);
|
|
61
|
+
return /* @__PURE__ */ _react2.default.createElement(
|
|
62
|
+
_reactnative.View,
|
|
63
|
+
{
|
|
64
|
+
style: [
|
|
65
|
+
orientation === "horizontal" ? styles.horizontal : styles.vertical,
|
|
66
|
+
sizeStyles,
|
|
67
|
+
{ backgroundColor: dividerColor }
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
exports.Divider = Divider;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/components/select/checkmark-icon.tsx
|
|
2
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
3
|
+
var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
|
|
4
|
+
function CheckmarkIcon({ color, size }) {
|
|
5
|
+
return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(
|
|
6
|
+
_reactnativesvg.Polyline,
|
|
7
|
+
{
|
|
8
|
+
points: "1 9 7 14 15 4",
|
|
9
|
+
stroke: color,
|
|
10
|
+
strokeWidth: 2,
|
|
11
|
+
strokeLinecap: "round",
|
|
12
|
+
strokeLinejoin: "round"
|
|
13
|
+
}
|
|
14
|
+
));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
exports.CheckmarkIcon = CheckmarkIcon;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// src/components/select/checkmark-icon.tsx
|
|
2
|
+
import React from "react";
|
|
3
|
+
import Svg, { Polyline } from "react-native-svg";
|
|
4
|
+
function CheckmarkIcon({ color, size }) {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ React.createElement(
|
|
6
|
+
Polyline,
|
|
7
|
+
{
|
|
8
|
+
points: "1 9 7 14 15 4",
|
|
9
|
+
stroke: color,
|
|
10
|
+
strokeWidth: 2,
|
|
11
|
+
strokeLinecap: "round",
|
|
12
|
+
strokeLinejoin: "round"
|
|
13
|
+
}
|
|
14
|
+
));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export {
|
|
18
|
+
CheckmarkIcon
|
|
19
|
+
};
|