@xaui/native 0.9.1-beta.96 → 0.9.1-beta.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-C6JO2RTV.cjs +752 -0
- package/dist/chunk-SVS726BW.js +822 -0
- package/dist/{chunk-QT7KLGO3.js → chunk-V5FYHQKQ.js} +102 -87
- package/dist/{chunk-SIOSYITD.cjs → chunk-ZBFBF7S4.cjs} +60 -45
- package/dist/components/agenda-calendar/agenda-calendar-today-button.d.cts +4 -0
- package/dist/components/agenda-calendar/agenda-calendar-today-button.d.ts +4 -0
- package/dist/components/agenda-calendar/agenda-calendar.recipe.d.cts +1 -1
- package/dist/components/agenda-calendar/agenda-calendar.recipe.d.ts +1 -1
- package/dist/components/agenda-calendar/agenda-calendar.type.d.cts +4 -1
- package/dist/components/agenda-calendar/agenda-calendar.type.d.ts +4 -1
- package/dist/components/agenda-calendar/index.cjs +2 -2
- package/dist/components/agenda-calendar/index.js +1 -1
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/phone-number-field/index.cjs +16 -9
- package/dist/components/phone-number-field/index.js +9 -2
- package/dist/components/slide-button/index.cjs +30 -0
- package/dist/components/slide-button/index.d.cts +44 -0
- package/dist/components/slide-button/index.d.ts +44 -0
- package/dist/components/slide-button/index.js +30 -0
- package/dist/components/slide-button/slide-button-fill.d.cts +29 -0
- package/dist/components/slide-button/slide-button-fill.d.ts +29 -0
- package/dist/components/slide-button/slide-button-icon.d.cts +10 -0
- package/dist/components/slide-button/slide-button-icon.d.ts +10 -0
- package/dist/components/slide-button/slide-button-label.d.cts +20 -0
- package/dist/components/slide-button/slide-button-label.d.ts +20 -0
- package/dist/components/slide-button/slide-button-thumb.d.cts +20 -0
- package/dist/components/slide-button/slide-button-thumb.d.ts +20 -0
- package/dist/components/slide-button/slide-button.animation.d.cts +33 -0
- package/dist/components/slide-button/slide-button.animation.d.ts +33 -0
- package/dist/components/slide-button/slide-button.context.d.cts +7 -0
- package/dist/components/slide-button/slide-button.context.d.ts +7 -0
- package/dist/components/slide-button/slide-button.d.cts +56 -0
- package/dist/components/slide-button/slide-button.d.ts +56 -0
- package/dist/components/slide-button/slide-button.recipe.d.cts +31 -0
- package/dist/components/slide-button/slide-button.recipe.d.ts +31 -0
- package/dist/components/slide-button/slide-button.type.d.cts +79 -0
- package/dist/components/slide-button/slide-button.type.d.ts +79 -0
- package/dist/index.cjs +31 -13
- package/dist/index.js +35 -17
- package/package.json +11 -1
|
@@ -0,0 +1,822 @@
|
|
|
1
|
+
import { useControllableState } from "./chunk-F6W3JQ7K.js";
|
|
2
|
+
import { Icon } from "./chunk-JN6IRT2M.js";
|
|
3
|
+
import { childrenToString } from "./chunk-WFZDAXDI.js";
|
|
4
|
+
import { createRecipe, radiusAxis } from "./chunk-DKVXTMIJ.js";
|
|
5
|
+
import { createSlotContext } from "./chunk-TTZOIXKE.js";
|
|
6
|
+
import { alpha, useXAUITheme } from "./chunk-Z6JBWRPL.js";
|
|
7
|
+
import { useStyleProps } from "./chunk-M63GFNKV.js";
|
|
8
|
+
|
|
9
|
+
// src/components/slide-button/slide-button-fill.tsx
|
|
10
|
+
import { forwardRef } from "react";
|
|
11
|
+
import { View } from "react-native";
|
|
12
|
+
import Animated, { useAnimatedStyle } from "react-native-reanimated";
|
|
13
|
+
|
|
14
|
+
// src/components/slide-button/slide-button.animation.ts
|
|
15
|
+
var THUMB_PRESSED_SCALE = 1.06;
|
|
16
|
+
var THUMB_SPRING = {
|
|
17
|
+
damping: 20,
|
|
18
|
+
stiffness: 260,
|
|
19
|
+
mass: 0.7
|
|
20
|
+
};
|
|
21
|
+
var DEFAULT_THRESHOLD = 0.9;
|
|
22
|
+
const _worklet_12457781125002_init_data = {
|
|
23
|
+
code: "function sweptWidth_chunkSVS726BWJs1(offset,travel,trackLength){return travel>0?offset/travel*trackLength:0;}",
|
|
24
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
25
|
+
sourceMap: "{\"version\":3,\"names\":[\"sweptWidth_chunkSVS726BWJs1\",\"offset\",\"travel\",\"trackLength\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AAiCA,SAAAA,2BAAkCA,CAAEC,MAAA,CAAAC,MAAa,CAAAC,WAAA,EAE/C,MAAO,CAAAD,MAAM,CAAG,CAAC,CAAGD,MAAM,CAAGC,MAAM,CAAGC,WAAW,CAAG,CAAC,CACvD\",\"ignoreList\":[]}"
|
|
26
|
+
};
|
|
27
|
+
const sweptWidth = function sweptWidth_chunkSVS726BWJs1Factory({
|
|
28
|
+
_worklet_12457781125002_init_data
|
|
29
|
+
}) {
|
|
30
|
+
const _e = [new global.Error(), 1, -27];
|
|
31
|
+
const sweptWidth = function (offset, travel, trackLength) {
|
|
32
|
+
return travel > 0 ? offset / travel * trackLength : 0;
|
|
33
|
+
};
|
|
34
|
+
sweptWidth.__closure = {};
|
|
35
|
+
sweptWidth.__workletHash = 12457781125002;
|
|
36
|
+
sweptWidth.__pluginVersion = "0.7.4";
|
|
37
|
+
sweptWidth.__initData = _worklet_12457781125002_init_data;
|
|
38
|
+
sweptWidth.__stackDetails = _e;
|
|
39
|
+
return sweptWidth;
|
|
40
|
+
}({
|
|
41
|
+
_worklet_12457781125002_init_data
|
|
42
|
+
}); // src/components/slide-button/slide-button.context.ts
|
|
43
|
+
var [SlideButtonProvider, useSlideButton] = createSlotContext("SlideButton");
|
|
44
|
+
|
|
45
|
+
// src/components/slide-button/slide-button-fill.tsx
|
|
46
|
+
import { jsx } from "react/jsx-runtime";
|
|
47
|
+
const _worklet_17151133608065_init_data = {
|
|
48
|
+
code: "function chunkSVS726BWJs2(){const{sweptWidth,offset,travel,trackLength}=this.__closure;return{width:sweptWidth(offset.get(),travel,trackLength)};}",
|
|
49
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
50
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkSVS726BWJs2\",\"sweptWidth\",\"offset\",\"travel\",\"trackLength\",\"__closure\",\"width\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AA+CmC,SAAAA,gBAAMA,CAAA,QAAAC,UAAA,CAAAC,MAAA,CAAAC,MAAA,CAAAC,WAAA,OAAAC,SAAA,CAEnC,MAAO,CAAEC,KAAK,CAAEL,UAAU,CAACC,MAAM,CAACK,GAAG,CAAC,CAAC,CAAEJ,MAAM,CAAEC,WAAW,CAAE,CAAC,CACjE\",\"ignoreList\":[]}"
|
|
51
|
+
};
|
|
52
|
+
var SlideButtonFill = forwardRef(function SlideButtonFill2({
|
|
53
|
+
style,
|
|
54
|
+
...props
|
|
55
|
+
}, ref) {
|
|
56
|
+
const {
|
|
57
|
+
fillClipStyle,
|
|
58
|
+
fillStyle,
|
|
59
|
+
offset,
|
|
60
|
+
travel,
|
|
61
|
+
trackLength
|
|
62
|
+
} = useSlideButton();
|
|
63
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
64
|
+
const width = useAnimatedStyle(function chunkSVS726BWJs2Factory({
|
|
65
|
+
_worklet_17151133608065_init_data,
|
|
66
|
+
sweptWidth,
|
|
67
|
+
offset,
|
|
68
|
+
travel,
|
|
69
|
+
trackLength
|
|
70
|
+
}) {
|
|
71
|
+
const _e = [new global.Error(), -5, -27];
|
|
72
|
+
const chunkSVS726BWJs2 = function () {
|
|
73
|
+
return {
|
|
74
|
+
width: sweptWidth(offset.get(), travel, trackLength)
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
chunkSVS726BWJs2.__closure = {
|
|
78
|
+
sweptWidth,
|
|
79
|
+
offset,
|
|
80
|
+
travel,
|
|
81
|
+
trackLength
|
|
82
|
+
};
|
|
83
|
+
chunkSVS726BWJs2.__workletHash = 17151133608065;
|
|
84
|
+
chunkSVS726BWJs2.__pluginVersion = "0.7.4";
|
|
85
|
+
chunkSVS726BWJs2.__initData = _worklet_17151133608065_init_data;
|
|
86
|
+
chunkSVS726BWJs2.__stackDetails = _e;
|
|
87
|
+
return chunkSVS726BWJs2;
|
|
88
|
+
}({
|
|
89
|
+
_worklet_17151133608065_init_data,
|
|
90
|
+
sweptWidth,
|
|
91
|
+
offset,
|
|
92
|
+
travel,
|
|
93
|
+
trackLength
|
|
94
|
+
}), [travel, trackLength]);
|
|
95
|
+
return /* @__PURE__ */jsx(View, {
|
|
96
|
+
pointerEvents: "box-none",
|
|
97
|
+
style: fillClipStyle,
|
|
98
|
+
children: /* @__PURE__ */jsx(Animated.View, {
|
|
99
|
+
ref,
|
|
100
|
+
...rest,
|
|
101
|
+
style: [fillStyle, width, styleProps, style]
|
|
102
|
+
})
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
SlideButtonFill.displayName = "XAUI.SlideButton.Fill";
|
|
106
|
+
|
|
107
|
+
// src/components/slide-button/slide-button-icon.tsx
|
|
108
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
109
|
+
function SlideButtonIcon({
|
|
110
|
+
size,
|
|
111
|
+
color,
|
|
112
|
+
...rest
|
|
113
|
+
}) {
|
|
114
|
+
const {
|
|
115
|
+
icon
|
|
116
|
+
} = useSlideButton();
|
|
117
|
+
return /* @__PURE__ */jsx2(Icon, {
|
|
118
|
+
size: size ?? icon.size,
|
|
119
|
+
color: color ?? icon.color,
|
|
120
|
+
...rest
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
SlideButtonIcon.displayName = "XAUI.SlideButton.Icon";
|
|
124
|
+
|
|
125
|
+
// src/components/slide-button/slide-button-label.tsx
|
|
126
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
127
|
+
import { StyleSheet, Text } from "react-native";
|
|
128
|
+
import Animated2, { useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
|
|
129
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
130
|
+
var CLIP = StyleSheet.create({
|
|
131
|
+
window: {
|
|
132
|
+
position: "absolute",
|
|
133
|
+
top: 0,
|
|
134
|
+
bottom: 0,
|
|
135
|
+
start: 0,
|
|
136
|
+
overflow: "hidden",
|
|
137
|
+
justifyContent: "center"
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
const _worklet_1683432508864_init_data = {
|
|
141
|
+
code: "function chunkSVS726BWJs3(){const{sweptWidth,offset,travel,trackLength}=this.__closure;return{width:sweptWidth(offset.get(),travel,trackLength)};}",
|
|
142
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
143
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkSVS726BWJs3\",\"sweptWidth\",\"offset\",\"travel\",\"trackLength\",\"__closure\",\"width\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AA0FmC,SAAAA,gBAAMA,CAAA,QAAAC,UAAA,CAAAC,MAAA,CAAAC,MAAA,CAAAC,WAAA,OAAAC,SAAA,CAEnC,MAAO,CAAEC,KAAK,CAAEL,UAAU,CAACC,MAAM,CAACK,GAAG,CAAC,CAAC,CAAEJ,MAAM,CAAEC,WAAW,CAAE,CAAC,CACjE\",\"ignoreList\":[]}"
|
|
144
|
+
};
|
|
145
|
+
var SlideButtonLabel = forwardRef2(function SlideButtonLabel2({
|
|
146
|
+
children,
|
|
147
|
+
style,
|
|
148
|
+
...props
|
|
149
|
+
}, ref) {
|
|
150
|
+
const {
|
|
151
|
+
labelStyle,
|
|
152
|
+
labelSweptStyle,
|
|
153
|
+
offset,
|
|
154
|
+
travel,
|
|
155
|
+
trackLength
|
|
156
|
+
} = useSlideButton();
|
|
157
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
158
|
+
const clip = useAnimatedStyle2(function chunkSVS726BWJs3Factory({
|
|
159
|
+
_worklet_1683432508864_init_data,
|
|
160
|
+
sweptWidth,
|
|
161
|
+
offset,
|
|
162
|
+
travel,
|
|
163
|
+
trackLength
|
|
164
|
+
}) {
|
|
165
|
+
const _e = [new global.Error(), -5, -27];
|
|
166
|
+
const chunkSVS726BWJs3 = function () {
|
|
167
|
+
return {
|
|
168
|
+
width: sweptWidth(offset.get(), travel, trackLength)
|
|
169
|
+
};
|
|
170
|
+
};
|
|
171
|
+
chunkSVS726BWJs3.__closure = {
|
|
172
|
+
sweptWidth,
|
|
173
|
+
offset,
|
|
174
|
+
travel,
|
|
175
|
+
trackLength
|
|
176
|
+
};
|
|
177
|
+
chunkSVS726BWJs3.__workletHash = 1683432508864;
|
|
178
|
+
chunkSVS726BWJs3.__pluginVersion = "0.7.4";
|
|
179
|
+
chunkSVS726BWJs3.__initData = _worklet_1683432508864_init_data;
|
|
180
|
+
chunkSVS726BWJs3.__stackDetails = _e;
|
|
181
|
+
return chunkSVS726BWJs3;
|
|
182
|
+
}({
|
|
183
|
+
_worklet_1683432508864_init_data,
|
|
184
|
+
sweptWidth,
|
|
185
|
+
offset,
|
|
186
|
+
travel,
|
|
187
|
+
trackLength
|
|
188
|
+
}), [travel, trackLength]);
|
|
189
|
+
return /* @__PURE__ */jsxs(Fragment, {
|
|
190
|
+
children: [/* @__PURE__ */jsx3(Text, {
|
|
191
|
+
ref,
|
|
192
|
+
numberOfLines: 1,
|
|
193
|
+
...rest,
|
|
194
|
+
style: [labelStyle, styleProps, style],
|
|
195
|
+
children
|
|
196
|
+
}), /* @__PURE__ */jsx3(Animated2.View, {
|
|
197
|
+
pointerEvents: "none",
|
|
198
|
+
style: [CLIP.window, clip],
|
|
199
|
+
children: /* @__PURE__ */jsx3(Text, {
|
|
200
|
+
numberOfLines: 1,
|
|
201
|
+
...rest,
|
|
202
|
+
accessibilityElementsHidden: true,
|
|
203
|
+
importantForAccessibility: "no-hide-descendants",
|
|
204
|
+
style: [labelSweptStyle, styleProps, style],
|
|
205
|
+
children
|
|
206
|
+
})
|
|
207
|
+
})]
|
|
208
|
+
});
|
|
209
|
+
});
|
|
210
|
+
SlideButtonLabel.displayName = "XAUI.SlideButton.Label";
|
|
211
|
+
|
|
212
|
+
// src/components/slide-button/slide-button-thumb.tsx
|
|
213
|
+
import { I18nManager, View as View2 } from "react-native";
|
|
214
|
+
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
215
|
+
import Animated3, { runOnJS, useAnimatedStyle as useAnimatedStyle3, useSharedValue, withSpring } from "react-native-reanimated";
|
|
216
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
217
|
+
const _worklet_9340506782582_init_data = {
|
|
218
|
+
code: "function chunkSVS726BWJs4(){const{pressed,withSpring,THUMB_SPRING,travel,offset,threshold,runOnJS,confirm}=this.__closure;pressed.set(withSpring(0,THUMB_SPRING));const reached=travel>0&&offset.get()/travel>=threshold;offset.set(withSpring(reached?travel:0,THUMB_SPRING));if(reached)runOnJS(confirm)();}",
|
|
219
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
220
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkSVS726BWJs4\",\"pressed\",\"withSpring\",\"THUMB_SPRING\",\"travel\",\"offset\",\"threshold\",\"runOnJS\",\"confirm\",\"__closure\",\"set\",\"reached\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AA4JgB,SAAAA,gBAAMA,CAAA,QAAAC,OAAA,CAAAC,UAAA,CAAAC,YAAA,CAAAC,MAAA,CAAAC,MAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,OAAA,OAAAC,SAAA,CAClBR,OAAO,CAACS,GAAG,CAACR,UAAU,CAAC,CAAC,CAAEC,YAAY,CAAC,CAAC,CACxC,KAAM,CAAAQ,OAAO,CAAGP,MAAM,CAAG,CAAC,EAAIC,MAAM,CAACO,GAAG,CAAC,CAAC,CAAGR,MAAM,EAAIE,SAAS,CAChED,MAAM,CAACK,GAAG,CAACR,UAAU,CAACS,OAAO,CAAGP,MAAM,CAAG,CAAC,CAAED,YAAY,CAAC,CAAC,CAC1D,GAAIQ,OAAO,CAAEJ,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC,CACjC\",\"ignoreList\":[]}"
|
|
221
|
+
};
|
|
222
|
+
const _worklet_7926266880267_init_data = {
|
|
223
|
+
code: "function chunkSVS726BWJs5(event){const{start,direction,offset,travel}=this.__closure;const next=start.get()+direction*event.translationX;offset.set(Math.min(Math.max(next,0),travel));}",
|
|
224
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
225
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkSVS726BWJs5\",\"event\",\"start\",\"direction\",\"offset\",\"travel\",\"__closure\",\"next\",\"get\",\"translationX\",\"set\",\"Math\",\"min\",\"max\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AAyJe,SAAAA,gBAAUA,CAAAC,KAAA,QAAAC,KAAA,CAAAC,SAAA,CAAAC,MAAA,CAAAC,MAAA,OAAAC,SAAA,CACrB,KAAM,CAAAC,IAAI,CAAGL,KAAK,CAACM,GAAG,CAAC,CAAC,CAAGL,SAAS,CAAGF,KAAK,CAACQ,YAAY,CACzDL,MAAM,CAACM,GAAG,CAACC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACN,IAAI,CAAE,CAAC,CAAC,CAAEF,MAAM,CAAC,CAAC,CACjD\",\"ignoreList\":[]}"
|
|
226
|
+
};
|
|
227
|
+
const _worklet_2510596241439_init_data = {
|
|
228
|
+
code: "function chunkSVS726BWJs6(){const{start,offset,pressed,withSpring,THUMB_SPRING}=this.__closure;start.set(offset.get());pressed.set(withSpring(1,THUMB_SPRING));}",
|
|
229
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
230
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkSVS726BWJs6\",\"start\",\"offset\",\"pressed\",\"withSpring\",\"THUMB_SPRING\",\"__closure\",\"set\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AAsJyE,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,CAAAC,MAAA,CAAAC,OAAA,CAAAC,UAAA,CAAAC,YAAA,OAAAC,SAAA,CAC3EL,KAAK,CAACM,GAAG,CAACL,MAAM,CAACM,GAAG,CAAC,CAAC,CAAC,CACvBL,OAAO,CAACI,GAAG,CAACH,UAAU,CAAC,CAAC,CAAEC,YAAY,CAAC,CAAC,CAC1C\",\"ignoreList\":[]}"
|
|
231
|
+
};
|
|
232
|
+
const _worklet_9163364155613_init_data = {
|
|
233
|
+
code: "function chunkSVS726BWJs7(){const{direction,offset,pressed,THUMB_PRESSED_SCALE}=this.__closure;return{transform:[{translateX:direction*offset.get()},{scale:1+pressed.get()*(THUMB_PRESSED_SCALE-1)}]};}",
|
|
234
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js",
|
|
235
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkSVS726BWJs7\",\"direction\",\"offset\",\"pressed\",\"THUMB_PRESSED_SCALE\",\"__closure\",\"transform\",\"translateX\",\"get\",\"scale\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-SVS726BW.js\"],\"mappings\":\"AAkKqC,SAAAA,gBAAMA,CAAA,QAAAC,SAAA,CAAAC,MAAA,CAAAC,OAAA,CAAAC,mBAAA,OAAAC,SAAA,CAEvC,MAAO,CACLC,SAAS,CAAE,CACT,CAAEC,UAAU,CAAEN,SAAS,CAAGC,MAAM,CAACM,GAAG,CAAC,CAAE,CAAC,CACxC,CAAEC,KAAK,CAAE,CAAC,CAAGN,OAAO,CAACK,GAAG,CAAC,CAAC,EAAIJ,mBAAmB,CAAG,CAAC,CAAE,CAAC,CAE5D,CAAC,CACH\",\"ignoreList\":[]}"
|
|
236
|
+
};
|
|
237
|
+
function SlideButtonThumb({
|
|
238
|
+
children,
|
|
239
|
+
style,
|
|
240
|
+
...props
|
|
241
|
+
}) {
|
|
242
|
+
const {
|
|
243
|
+
thumbStyle,
|
|
244
|
+
glyphStyle,
|
|
245
|
+
offset,
|
|
246
|
+
travel,
|
|
247
|
+
threshold,
|
|
248
|
+
isDisabled,
|
|
249
|
+
isConfirmed,
|
|
250
|
+
confirm
|
|
251
|
+
} = useSlideButton();
|
|
252
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
253
|
+
const pressed = useSharedValue(0);
|
|
254
|
+
const start = useSharedValue(0);
|
|
255
|
+
const direction = I18nManager.isRTL ? -1 : 1;
|
|
256
|
+
const pan = Gesture.Pan().enabled(!isDisabled && !isConfirmed).onBegin(function chunkSVS726BWJs6Factory({
|
|
257
|
+
_worklet_2510596241439_init_data,
|
|
258
|
+
start,
|
|
259
|
+
offset,
|
|
260
|
+
pressed,
|
|
261
|
+
withSpring,
|
|
262
|
+
THUMB_SPRING
|
|
263
|
+
}) {
|
|
264
|
+
const _e = [new global.Error(), -6, -27];
|
|
265
|
+
const chunkSVS726BWJs6 = function () {
|
|
266
|
+
start.set(offset.get());
|
|
267
|
+
pressed.set(withSpring(1, THUMB_SPRING));
|
|
268
|
+
};
|
|
269
|
+
chunkSVS726BWJs6.__closure = {
|
|
270
|
+
start,
|
|
271
|
+
offset,
|
|
272
|
+
pressed,
|
|
273
|
+
withSpring,
|
|
274
|
+
THUMB_SPRING
|
|
275
|
+
};
|
|
276
|
+
chunkSVS726BWJs6.__workletHash = 2510596241439;
|
|
277
|
+
chunkSVS726BWJs6.__pluginVersion = "0.7.4";
|
|
278
|
+
chunkSVS726BWJs6.__initData = _worklet_2510596241439_init_data;
|
|
279
|
+
chunkSVS726BWJs6.__stackDetails = _e;
|
|
280
|
+
return chunkSVS726BWJs6;
|
|
281
|
+
}({
|
|
282
|
+
_worklet_2510596241439_init_data,
|
|
283
|
+
start,
|
|
284
|
+
offset,
|
|
285
|
+
pressed,
|
|
286
|
+
withSpring,
|
|
287
|
+
THUMB_SPRING
|
|
288
|
+
})).onUpdate(function chunkSVS726BWJs5Factory({
|
|
289
|
+
_worklet_7926266880267_init_data,
|
|
290
|
+
start,
|
|
291
|
+
direction,
|
|
292
|
+
offset,
|
|
293
|
+
travel
|
|
294
|
+
}) {
|
|
295
|
+
const _e = [new global.Error(), -5, -27];
|
|
296
|
+
const chunkSVS726BWJs5 = function (event) {
|
|
297
|
+
const next = start.get() + direction * event.translationX;
|
|
298
|
+
offset.set(Math.min(Math.max(next, 0), travel));
|
|
299
|
+
};
|
|
300
|
+
chunkSVS726BWJs5.__closure = {
|
|
301
|
+
start,
|
|
302
|
+
direction,
|
|
303
|
+
offset,
|
|
304
|
+
travel
|
|
305
|
+
};
|
|
306
|
+
chunkSVS726BWJs5.__workletHash = 7926266880267;
|
|
307
|
+
chunkSVS726BWJs5.__pluginVersion = "0.7.4";
|
|
308
|
+
chunkSVS726BWJs5.__initData = _worklet_7926266880267_init_data;
|
|
309
|
+
chunkSVS726BWJs5.__stackDetails = _e;
|
|
310
|
+
return chunkSVS726BWJs5;
|
|
311
|
+
}({
|
|
312
|
+
_worklet_7926266880267_init_data,
|
|
313
|
+
start,
|
|
314
|
+
direction,
|
|
315
|
+
offset,
|
|
316
|
+
travel
|
|
317
|
+
})).onFinalize(function chunkSVS726BWJs4Factory({
|
|
318
|
+
_worklet_9340506782582_init_data,
|
|
319
|
+
pressed,
|
|
320
|
+
withSpring,
|
|
321
|
+
THUMB_SPRING,
|
|
322
|
+
travel,
|
|
323
|
+
offset,
|
|
324
|
+
threshold,
|
|
325
|
+
runOnJS,
|
|
326
|
+
confirm
|
|
327
|
+
}) {
|
|
328
|
+
const _e = [new global.Error(), -9, -27];
|
|
329
|
+
const chunkSVS726BWJs4 = function () {
|
|
330
|
+
pressed.set(withSpring(0, THUMB_SPRING));
|
|
331
|
+
const reached = travel > 0 && offset.get() / travel >= threshold;
|
|
332
|
+
offset.set(withSpring(reached ? travel : 0, THUMB_SPRING));
|
|
333
|
+
if (reached) runOnJS(confirm)();
|
|
334
|
+
};
|
|
335
|
+
chunkSVS726BWJs4.__closure = {
|
|
336
|
+
pressed,
|
|
337
|
+
withSpring,
|
|
338
|
+
THUMB_SPRING,
|
|
339
|
+
travel,
|
|
340
|
+
offset,
|
|
341
|
+
threshold,
|
|
342
|
+
runOnJS,
|
|
343
|
+
confirm
|
|
344
|
+
};
|
|
345
|
+
chunkSVS726BWJs4.__workletHash = 9340506782582;
|
|
346
|
+
chunkSVS726BWJs4.__pluginVersion = "0.7.4";
|
|
347
|
+
chunkSVS726BWJs4.__initData = _worklet_9340506782582_init_data;
|
|
348
|
+
chunkSVS726BWJs4.__stackDetails = _e;
|
|
349
|
+
return chunkSVS726BWJs4;
|
|
350
|
+
}({
|
|
351
|
+
_worklet_9340506782582_init_data,
|
|
352
|
+
pressed,
|
|
353
|
+
withSpring,
|
|
354
|
+
THUMB_SPRING,
|
|
355
|
+
travel,
|
|
356
|
+
offset,
|
|
357
|
+
threshold,
|
|
358
|
+
runOnJS,
|
|
359
|
+
confirm
|
|
360
|
+
}));
|
|
361
|
+
const animated = useAnimatedStyle3(function chunkSVS726BWJs7Factory({
|
|
362
|
+
_worklet_9163364155613_init_data,
|
|
363
|
+
direction,
|
|
364
|
+
offset,
|
|
365
|
+
pressed,
|
|
366
|
+
THUMB_PRESSED_SCALE
|
|
367
|
+
}) {
|
|
368
|
+
const _e = [new global.Error(), -5, -27];
|
|
369
|
+
const chunkSVS726BWJs7 = function () {
|
|
370
|
+
return {
|
|
371
|
+
transform: [{
|
|
372
|
+
translateX: direction * offset.get()
|
|
373
|
+
}, {
|
|
374
|
+
scale: 1 + pressed.get() * (THUMB_PRESSED_SCALE - 1)
|
|
375
|
+
}]
|
|
376
|
+
};
|
|
377
|
+
};
|
|
378
|
+
chunkSVS726BWJs7.__closure = {
|
|
379
|
+
direction,
|
|
380
|
+
offset,
|
|
381
|
+
pressed,
|
|
382
|
+
THUMB_PRESSED_SCALE
|
|
383
|
+
};
|
|
384
|
+
chunkSVS726BWJs7.__workletHash = 9163364155613;
|
|
385
|
+
chunkSVS726BWJs7.__pluginVersion = "0.7.4";
|
|
386
|
+
chunkSVS726BWJs7.__initData = _worklet_9163364155613_init_data;
|
|
387
|
+
chunkSVS726BWJs7.__stackDetails = _e;
|
|
388
|
+
return chunkSVS726BWJs7;
|
|
389
|
+
}({
|
|
390
|
+
_worklet_9163364155613_init_data,
|
|
391
|
+
direction,
|
|
392
|
+
offset,
|
|
393
|
+
pressed,
|
|
394
|
+
THUMB_PRESSED_SCALE
|
|
395
|
+
}), [direction]);
|
|
396
|
+
return /* @__PURE__ */jsx4(GestureDetector, {
|
|
397
|
+
gesture: pan,
|
|
398
|
+
children: /* @__PURE__ */jsx4(Animated3.View, {
|
|
399
|
+
...rest,
|
|
400
|
+
style: [thumbStyle, animated, styleProps, style],
|
|
401
|
+
children: children ?? /* @__PURE__ */jsx4(View2, {
|
|
402
|
+
style: glyphStyle
|
|
403
|
+
})
|
|
404
|
+
})
|
|
405
|
+
});
|
|
406
|
+
}
|
|
407
|
+
SlideButtonThumb.displayName = "XAUI.SlideButton.Thumb";
|
|
408
|
+
|
|
409
|
+
// src/components/slide-button/slide-button.tsx
|
|
410
|
+
import { forwardRef as forwardRef3, useCallback, useEffect, useMemo, useState } from "react";
|
|
411
|
+
import { StyleSheet as StyleSheet2, View as View3 } from "react-native";
|
|
412
|
+
import { useSharedValue as useSharedValue2, withSpring as withSpring2 } from "react-native-reanimated";
|
|
413
|
+
|
|
414
|
+
// src/components/slide-button/slide-button.recipe.ts
|
|
415
|
+
var SLOTS = ["root", "fillClip", "fill", "label", "labelSwept", "thumb", "glyph"];
|
|
416
|
+
var VARIANT_TOKENS = {
|
|
417
|
+
primary: {
|
|
418
|
+
bg: "accentSoft",
|
|
419
|
+
fg: "accentSoftForeground",
|
|
420
|
+
bgSelected: "accent",
|
|
421
|
+
fgSelected: "accentForeground"
|
|
422
|
+
},
|
|
423
|
+
secondary: {
|
|
424
|
+
bg: "default",
|
|
425
|
+
fg: "defaultForeground"
|
|
426
|
+
},
|
|
427
|
+
tertiary: {
|
|
428
|
+
border: "border",
|
|
429
|
+
fg: "foreground"
|
|
430
|
+
},
|
|
431
|
+
ghost: {
|
|
432
|
+
fg: "foreground"
|
|
433
|
+
},
|
|
434
|
+
success: {
|
|
435
|
+
bg: "successSoft",
|
|
436
|
+
fg: "successSoftForeground",
|
|
437
|
+
bgSelected: "success",
|
|
438
|
+
fgSelected: "successForeground"
|
|
439
|
+
},
|
|
440
|
+
"success-soft": {
|
|
441
|
+
bg: "successSoft",
|
|
442
|
+
fg: "success"
|
|
443
|
+
},
|
|
444
|
+
warning: {
|
|
445
|
+
bg: "warningSoft",
|
|
446
|
+
fg: "warningSoftForeground",
|
|
447
|
+
bgSelected: "warning",
|
|
448
|
+
fgSelected: "warningForeground"
|
|
449
|
+
},
|
|
450
|
+
"warning-soft": {
|
|
451
|
+
bg: "warningSoft",
|
|
452
|
+
fg: "warning"
|
|
453
|
+
},
|
|
454
|
+
danger: {
|
|
455
|
+
bg: "dangerSoft",
|
|
456
|
+
fg: "dangerSoftForeground",
|
|
457
|
+
bgSelected: "danger",
|
|
458
|
+
fgSelected: "dangerForeground"
|
|
459
|
+
},
|
|
460
|
+
"danger-soft": {
|
|
461
|
+
bg: "dangerSoft",
|
|
462
|
+
fg: "danger"
|
|
463
|
+
}
|
|
464
|
+
};
|
|
465
|
+
var FILL_ALPHA = 0.2;
|
|
466
|
+
var THUMB_RATIO = 1.5;
|
|
467
|
+
var NO_SHADOW = {
|
|
468
|
+
shadowColor: "#000000",
|
|
469
|
+
shadowOffset: {
|
|
470
|
+
width: 0,
|
|
471
|
+
height: 0
|
|
472
|
+
},
|
|
473
|
+
shadowOpacity: 0,
|
|
474
|
+
shadowRadius: 0,
|
|
475
|
+
elevation: 0
|
|
476
|
+
};
|
|
477
|
+
var SIZES = {
|
|
478
|
+
sm: {
|
|
479
|
+
height: "sm",
|
|
480
|
+
inset: 3,
|
|
481
|
+
glyph: 14,
|
|
482
|
+
label: "sm"
|
|
483
|
+
},
|
|
484
|
+
md: {
|
|
485
|
+
height: "md",
|
|
486
|
+
inset: 4,
|
|
487
|
+
glyph: 16,
|
|
488
|
+
label: "md"
|
|
489
|
+
},
|
|
490
|
+
lg: {
|
|
491
|
+
height: "lg",
|
|
492
|
+
inset: 4,
|
|
493
|
+
glyph: 20,
|
|
494
|
+
label: "lg"
|
|
495
|
+
}
|
|
496
|
+
};
|
|
497
|
+
function sizeAxis(step) {
|
|
498
|
+
return theme => {
|
|
499
|
+
const height = theme.controlHeights[step.height];
|
|
500
|
+
const handleHeight = height - step.inset * 2;
|
|
501
|
+
return {
|
|
502
|
+
root: {
|
|
503
|
+
height
|
|
504
|
+
},
|
|
505
|
+
// Centred across the whole pill, not laid out beside the handle — the handle slides
|
|
506
|
+
// over it, so there is no gap to keep. Symmetric `start`/`end` insets (R13, never
|
|
507
|
+
// `left`/`right`) just keep a long label off the pill's rounded ends.
|
|
508
|
+
label: {
|
|
509
|
+
start: theme.spacing(4),
|
|
510
|
+
end: theme.spacing(4),
|
|
511
|
+
fontSize: theme.fontSizes[step.label],
|
|
512
|
+
lineHeight: theme.lineHeights[step.label]
|
|
513
|
+
},
|
|
514
|
+
// The same type at the same inset. No `end`: this copy is laid out inside a clip
|
|
515
|
+
// whose width is the trail's, and an `end` would measure against *that*, re-centring
|
|
516
|
+
// the text in a box that keeps narrowing. The slot gives it a width off the measured
|
|
517
|
+
// pill instead, so both copies sit on exactly the same glyphs.
|
|
518
|
+
labelSwept: {
|
|
519
|
+
start: theme.spacing(4),
|
|
520
|
+
fontSize: theme.fontSizes[step.label],
|
|
521
|
+
lineHeight: theme.lineHeights[step.label]
|
|
522
|
+
},
|
|
523
|
+
// A horizontal stadium: wider than tall, its corners a half-height so the ends stay
|
|
524
|
+
// round at any width. `start` is its resting inset; the pan translates it from there.
|
|
525
|
+
thumb: {
|
|
526
|
+
width: Math.round(handleHeight * THUMB_RATIO),
|
|
527
|
+
height: handleHeight,
|
|
528
|
+
borderRadius: handleHeight / 2,
|
|
529
|
+
start: step.inset
|
|
530
|
+
},
|
|
531
|
+
glyph: {
|
|
532
|
+
width: step.glyph,
|
|
533
|
+
height: step.glyph
|
|
534
|
+
}
|
|
535
|
+
};
|
|
536
|
+
};
|
|
537
|
+
}
|
|
538
|
+
var slideButtonRecipe = createRecipe({
|
|
539
|
+
slots: SLOTS,
|
|
540
|
+
base: theme => ({
|
|
541
|
+
// A fixed-height bar holding absolutely-positioned children — the fill, the label and
|
|
542
|
+
// its clipped copy, the thumb — so none of them pushes the others around as it moves.
|
|
543
|
+
//
|
|
544
|
+
// **It does not clip.** The trail needs clipping and gets it from `fillClip`, one layer
|
|
545
|
+
// in; putting `overflow: 'hidden'` up here instead costs the handle its shadow. That
|
|
546
|
+
// shadow is offset a point down over a three-point blur, and the handle sits four
|
|
547
|
+
// points off the floor — so the lower half reaches the pill's edge exactly, and the
|
|
548
|
+
// clip cut it flat there and curved it away at the leading cap while leaving the top
|
|
549
|
+
// untouched. A shadow soft above and sheared below does not read as a clipped shadow;
|
|
550
|
+
// it reads as a handle sunk into a groove, which is what it looked like.
|
|
551
|
+
root: {
|
|
552
|
+
width: "100%",
|
|
553
|
+
justifyContent: "center",
|
|
554
|
+
borderCurve: "continuous",
|
|
555
|
+
borderRadius: theme.radius.full,
|
|
556
|
+
borderWidth: 0
|
|
557
|
+
},
|
|
558
|
+
/**
|
|
559
|
+
* The window the trail is read through, and the whole reason it has one.
|
|
560
|
+
*
|
|
561
|
+
* The pill is `radius.full`, which on a 48-tall bar resolves to a 24-point cap. The
|
|
562
|
+
* trail's own `full` is clamped to half of whichever side is shorter — half its
|
|
563
|
+
* *width* for the first 48 points of the drag — so it draws a squarer corner inside a
|
|
564
|
+
* rounder one and bulges past the leading edge. No radius fixes that, because the
|
|
565
|
+
* clamp applies whatever is asked for: the trail has to be cut to the pill's shape.
|
|
566
|
+
*
|
|
567
|
+
* Cutting it here rather than on the root is what keeps the cut off the handle.
|
|
568
|
+
*/
|
|
569
|
+
fillClip: {
|
|
570
|
+
position: "absolute",
|
|
571
|
+
top: 0,
|
|
572
|
+
bottom: 0,
|
|
573
|
+
start: 0,
|
|
574
|
+
end: 0,
|
|
575
|
+
overflow: "hidden",
|
|
576
|
+
borderCurve: "continuous",
|
|
577
|
+
borderRadius: theme.radius.full
|
|
578
|
+
},
|
|
579
|
+
// Zero width at rest — the width is the swept fraction of the pill, set by the slot,
|
|
580
|
+
// so there is nothing to draw until the drag has actually started. The radius is the
|
|
581
|
+
// pill's, so the trail matches the leading cap once it is wide enough to render it;
|
|
582
|
+
// `fillClip` covers the widths where it cannot. The colour is the variant's,
|
|
583
|
+
// set in `paint`.
|
|
584
|
+
fill: {
|
|
585
|
+
position: "absolute",
|
|
586
|
+
top: 0,
|
|
587
|
+
bottom: 0,
|
|
588
|
+
start: 0,
|
|
589
|
+
borderRadius: theme.radius.full
|
|
590
|
+
},
|
|
591
|
+
label: {
|
|
592
|
+
position: "absolute",
|
|
593
|
+
textAlign: "center",
|
|
594
|
+
fontFamily: theme.fontFamilies.body,
|
|
595
|
+
fontWeight: theme.fontWeights.medium
|
|
596
|
+
},
|
|
597
|
+
/**
|
|
598
|
+
* The label again, for the ground the trail has already covered.
|
|
599
|
+
*
|
|
600
|
+
* One label cannot serve both: on the four inverted variants the pill goes from a soft
|
|
601
|
+
* slice to the vivid one, and the polarity of a readable text colour flips with it —
|
|
602
|
+
* measured, a label painted for the soft pill reads 1.2–1.5:1 once the trail is under
|
|
603
|
+
* it, in light and in dark alike. Fading the label out would answer legibility by
|
|
604
|
+
* removing the instruction, which is the wrong trade on the control whose whole job is
|
|
605
|
+
* to say what the slide will do. So it is drawn twice and the top copy is clipped to
|
|
606
|
+
* the trail: each half of a straddling word sits on the ground it was painted for, and
|
|
607
|
+
* the switch happens exactly at the trail's edge rather than at some threshold.
|
|
608
|
+
*/
|
|
609
|
+
labelSwept: {
|
|
610
|
+
position: "absolute",
|
|
611
|
+
textAlign: "center",
|
|
612
|
+
fontFamily: theme.fontFamilies.body,
|
|
613
|
+
fontWeight: theme.fontWeights.medium
|
|
614
|
+
},
|
|
615
|
+
/**
|
|
616
|
+
* The handle: the surface colour, lifted off the pill by a shadow — the same treatment
|
|
617
|
+
* the `Slider`'s knob takes, and for the same reason, so the chevron on it never has
|
|
618
|
+
* to fight the pill for contrast.
|
|
619
|
+
*/
|
|
620
|
+
thumb: {
|
|
621
|
+
position: "absolute",
|
|
622
|
+
alignItems: "center",
|
|
623
|
+
justifyContent: "center",
|
|
624
|
+
backgroundColor: theme.colors.background,
|
|
625
|
+
...theme.shadows.surface
|
|
626
|
+
},
|
|
627
|
+
/**
|
|
628
|
+
* The built-in chevron, drawn from two borders a quarter turn round — a control whose
|
|
629
|
+
* whole affordance is "drag me this way" cannot be written without one, and a peer
|
|
630
|
+
* dependency for a single arrow is the bargain the `CloseButton`'s cross also refuses.
|
|
631
|
+
* The lit edges are `top` and `end`, so under RTL it flips to point the other way on
|
|
632
|
+
* its own — the direction the handle travels either way. `children` replace it.
|
|
633
|
+
*/
|
|
634
|
+
glyph: {
|
|
635
|
+
borderColor: theme.colors.foreground,
|
|
636
|
+
borderTopWidth: 2,
|
|
637
|
+
borderEndWidth: 2,
|
|
638
|
+
transform: [{
|
|
639
|
+
rotate: "45deg"
|
|
640
|
+
}]
|
|
641
|
+
}
|
|
642
|
+
}),
|
|
643
|
+
variantTokens: VARIANT_TOKENS,
|
|
644
|
+
paint: (theme, colors) => ({
|
|
645
|
+
root: {
|
|
646
|
+
backgroundColor: colors.bg,
|
|
647
|
+
borderColor: colors.border,
|
|
648
|
+
borderWidth: colors.border ? theme.borderWidth.default : 0
|
|
649
|
+
},
|
|
650
|
+
label: {
|
|
651
|
+
color: colors.fg
|
|
652
|
+
},
|
|
653
|
+
// A variant with no vivid slice sweeps a wash, which the resting label already reads
|
|
654
|
+
// against — so it falls back to the same colour and the two copies are one label.
|
|
655
|
+
labelSwept: {
|
|
656
|
+
color: colors.fgSelected ?? colors.fg
|
|
657
|
+
},
|
|
658
|
+
// The vivid slice where the variant named one, so the slide *arrives* at the intent
|
|
659
|
+
// rather than opening on it. Everything else keeps a wash of the same foreground the
|
|
660
|
+
// label uses, which reads against every pill without a token of its own. Either way a
|
|
661
|
+
// raw `color` moves the trail, because both roles go through the tint pass.
|
|
662
|
+
fill: {
|
|
663
|
+
backgroundColor: colors.bgSelected ?? (colors.fg ? alpha(colors.fg, FILL_ALPHA) : void 0)
|
|
664
|
+
}
|
|
665
|
+
}),
|
|
666
|
+
variants: {
|
|
667
|
+
size: {
|
|
668
|
+
sm: sizeAxis(SIZES.sm),
|
|
669
|
+
md: sizeAxis(SIZES.md),
|
|
670
|
+
lg: sizeAxis(SIZES.lg)
|
|
671
|
+
},
|
|
672
|
+
/** After `size`, so a caller's `radius` wins over the pill's `full`. */
|
|
673
|
+
radius: radiusAxis("root", "fillClip", "fill")
|
|
674
|
+
},
|
|
675
|
+
states: {
|
|
676
|
+
disabled: theme => ({
|
|
677
|
+
root: {
|
|
678
|
+
opacity: theme.opacity.disabled
|
|
679
|
+
},
|
|
680
|
+
// The handle also puts its shadow down. Opacity fades the pill until its edges are
|
|
681
|
+
// most of the way to the page, but it fades the shadow too — and a shadow at half
|
|
682
|
+
// strength is still the strongest edge left in the picture, sitting a point below a
|
|
683
|
+
// handle whose own outline has gone. What reads then is not a faded control, it is a
|
|
684
|
+
// handle pressed into a dent. Nothing about a disabled control should look lifted
|
|
685
|
+
// anyway, so the lift goes rather than being dimmed with everything else.
|
|
686
|
+
thumb: NO_SHADOW
|
|
687
|
+
})
|
|
688
|
+
},
|
|
689
|
+
defaultVariants: {
|
|
690
|
+
variant: "secondary",
|
|
691
|
+
size: "md"
|
|
692
|
+
}
|
|
693
|
+
});
|
|
694
|
+
|
|
695
|
+
// src/components/slide-button/slide-button.tsx
|
|
696
|
+
import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
697
|
+
var SlideButtonRoot = forwardRef3(function SlideButton({
|
|
698
|
+
children,
|
|
699
|
+
variant,
|
|
700
|
+
size,
|
|
701
|
+
radius,
|
|
702
|
+
color,
|
|
703
|
+
threshold = DEFAULT_THRESHOLD,
|
|
704
|
+
isConfirmed: controlledConfirmed,
|
|
705
|
+
defaultConfirmed = false,
|
|
706
|
+
onConfirm,
|
|
707
|
+
isDisabled = false,
|
|
708
|
+
accessibilityRole = "button",
|
|
709
|
+
accessibilityState,
|
|
710
|
+
style,
|
|
711
|
+
onLayout,
|
|
712
|
+
...props
|
|
713
|
+
}, ref) {
|
|
714
|
+
const theme = useXAUITheme();
|
|
715
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
716
|
+
const [trackLength, setTrackLength] = useState(0);
|
|
717
|
+
const offset = useSharedValue2(0);
|
|
718
|
+
const reach = Math.min(Math.max(threshold, 0), 1);
|
|
719
|
+
const [confirmed, setConfirmed] = useControllableState({
|
|
720
|
+
value: controlledConfirmed,
|
|
721
|
+
defaultValue: defaultConfirmed
|
|
722
|
+
});
|
|
723
|
+
const selection = {
|
|
724
|
+
variant,
|
|
725
|
+
size,
|
|
726
|
+
radius
|
|
727
|
+
};
|
|
728
|
+
const states = {
|
|
729
|
+
disabled: isDisabled
|
|
730
|
+
};
|
|
731
|
+
const styles = slideButtonRecipe.resolve({
|
|
732
|
+
theme,
|
|
733
|
+
selection,
|
|
734
|
+
states
|
|
735
|
+
});
|
|
736
|
+
const tint = color ? slideButtonRecipe.tint({
|
|
737
|
+
theme,
|
|
738
|
+
color,
|
|
739
|
+
selection,
|
|
740
|
+
states
|
|
741
|
+
}) : void 0;
|
|
742
|
+
const thumb = StyleSheet2.flatten([styles.thumb]);
|
|
743
|
+
const thumbSize = typeof thumb.width === "number" ? thumb.width : 0;
|
|
744
|
+
const inset = typeof thumb.start === "number" ? thumb.start : 0;
|
|
745
|
+
const travel = Math.max(trackLength - thumbSize - inset * 2, 0);
|
|
746
|
+
const confirm = useCallback(() => {
|
|
747
|
+
setConfirmed(true);
|
|
748
|
+
onConfirm?.();
|
|
749
|
+
}, [onConfirm, setConfirmed]);
|
|
750
|
+
useEffect(() => {
|
|
751
|
+
offset.set(withSpring2(confirmed ? travel : 0, THUMB_SPRING));
|
|
752
|
+
}, [confirmed, travel, offset]);
|
|
753
|
+
const measure = useCallback(event => {
|
|
754
|
+
onLayout?.(event);
|
|
755
|
+
setTrackLength(event.nativeEvent.layout.width);
|
|
756
|
+
}, [onLayout]);
|
|
757
|
+
const context = useMemo(() => {
|
|
758
|
+
const glyph = StyleSheet2.flatten([styles.glyph, tint?.glyph]);
|
|
759
|
+
const labelInset = StyleSheet2.flatten([styles.label]).start;
|
|
760
|
+
const sweptWidth2 = Math.max(trackLength - (typeof labelInset === "number" ? labelInset : 0) * 2, 0);
|
|
761
|
+
return {
|
|
762
|
+
fillClipStyle: styles.fillClip,
|
|
763
|
+
fillStyle: tint ? [styles.fill, tint.fill] : styles.fill,
|
|
764
|
+
labelStyle: tint ? [styles.label, tint.label] : styles.label,
|
|
765
|
+
labelSweptStyle: [styles.labelSwept, tint?.labelSwept, {
|
|
766
|
+
width: sweptWidth2
|
|
767
|
+
}],
|
|
768
|
+
thumbStyle: styles.thumb,
|
|
769
|
+
glyphStyle: tint ? [styles.glyph, tint.glyph] : styles.glyph,
|
|
770
|
+
icon: {
|
|
771
|
+
size: typeof glyph.width === "number" ? glyph.width : void 0,
|
|
772
|
+
// The chevron is on the surface-coloured handle, so its colour is the theme's
|
|
773
|
+
// foreground and not the variant's — `color` (R7) stays on the pill.
|
|
774
|
+
color: theme.colors.foreground
|
|
775
|
+
},
|
|
776
|
+
offset,
|
|
777
|
+
travel,
|
|
778
|
+
thumbSize,
|
|
779
|
+
threshold: reach,
|
|
780
|
+
isDisabled,
|
|
781
|
+
isConfirmed: confirmed,
|
|
782
|
+
confirm,
|
|
783
|
+
trackLength
|
|
784
|
+
};
|
|
785
|
+
}, [styles, tint, theme.colors.foreground, offset, travel, thumbSize, reach, isDisabled, confirmed, confirm, trackLength]);
|
|
786
|
+
const text = childrenToString(children);
|
|
787
|
+
return /* @__PURE__ */jsx5(SlideButtonProvider, {
|
|
788
|
+
value: context,
|
|
789
|
+
children: /* @__PURE__ */jsx5(View3, {
|
|
790
|
+
ref,
|
|
791
|
+
accessibilityRole,
|
|
792
|
+
accessibilityState: {
|
|
793
|
+
disabled: isDisabled,
|
|
794
|
+
...accessibilityState
|
|
795
|
+
},
|
|
796
|
+
accessibilityActions: [{
|
|
797
|
+
name: "activate"
|
|
798
|
+
}],
|
|
799
|
+
onAccessibilityAction: event => {
|
|
800
|
+
if (event.nativeEvent.actionName === "activate" && !isDisabled) confirm();
|
|
801
|
+
},
|
|
802
|
+
...rest,
|
|
803
|
+
onLayout: measure,
|
|
804
|
+
style: [styles.root, tint?.root, styleProps, style],
|
|
805
|
+
children: text !== null ? /* @__PURE__ */jsxs2(Fragment2, {
|
|
806
|
+
children: [/* @__PURE__ */jsx5(SlideButtonFill, {}), /* @__PURE__ */jsx5(SlideButtonLabel, {
|
|
807
|
+
children: text
|
|
808
|
+
}), /* @__PURE__ */jsx5(SlideButtonThumb, {})]
|
|
809
|
+
}) : children
|
|
810
|
+
})
|
|
811
|
+
});
|
|
812
|
+
});
|
|
813
|
+
SlideButtonRoot.displayName = "XAUI.SlideButton.Root";
|
|
814
|
+
|
|
815
|
+
// src/components/slide-button/index.ts
|
|
816
|
+
var SlideButton2 = Object.assign(SlideButtonRoot, {
|
|
817
|
+
Fill: SlideButtonFill,
|
|
818
|
+
Label: SlideButtonLabel,
|
|
819
|
+
Thumb: SlideButtonThumb,
|
|
820
|
+
Icon: SlideButtonIcon
|
|
821
|
+
});
|
|
822
|
+
export { useSlideButton, SlideButtonFill, SlideButtonIcon, SlideButtonLabel, SlideButtonThumb, slideButtonRecipe, SlideButtonRoot, SlideButton2 as SlideButton };
|