@tamagui/animations-react-native 2.7.7 → 3.0.0-0.canary.1791056644527
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/cjs/createAnimations.native.cjs +863 -0
- package/dist/cjs/createAnimations.native.js +814 -597
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/cjs/index.cjs +19 -13
- package/dist/cjs/index.native.cjs +21 -0
- package/dist/cjs/index.native.js +12 -13
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/polyfill.cjs +2 -2
- package/dist/cjs/polyfill.native.cjs +5 -0
- package/dist/cjs/polyfill.native.js +2 -1
- package/dist/cjs/polyfill.native.js.map +1 -1
- package/dist/cjs/types.cjs +16 -0
- package/dist/cjs/types.native.cjs +18 -0
- package/dist/cjs/types.native.js +20 -0
- package/dist/cjs/types.native.js.map +1 -0
- package/dist/esm/createAnimations.native.js +792 -567
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/dist/esm/index.js +6 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +6 -2
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +2 -2
- package/dist/esm/polyfill.mjs +2 -1
- package/dist/esm/polyfill.mjs.map +1 -1
- package/dist/esm/polyfill.native.js +2 -1
- package/dist/esm/polyfill.native.js.map +1 -1
- package/dist/esm/types.mjs +0 -0
- package/dist/esm/types.native.js +0 -0
- package/package.json +17 -11
- package/src/createAnimations.native.tsx +1351 -0
- package/src/index.native.ts +3 -0
- package/src/index.ts +20 -2
- package/src/types.ts +4 -0
- package/types/{createAnimations.d.ts → createAnimations.native.d.ts} +5 -14
- package/types/createAnimations.native.d.ts.map +11 -0
- package/types/index.d.ts +10 -2
- package/types/index.d.ts.map +2 -2
- package/types/index.native.d.ts +4 -0
- package/types/index.native.d.ts.map +11 -0
- package/types/types.d.ts +5 -0
- package/types/types.d.ts.map +11 -0
- package/dist/cjs/createAnimations.cjs +0 -566
- package/dist/esm/createAnimations.mjs +0 -524
- package/dist/esm/createAnimations.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/src/createAnimations.tsx +0 -831
- package/types/createAnimations.d.ts.map +0 -11
|
@@ -1,603 +1,828 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { easingToBezier, forAnimationState, getTransitionForKey, resolveTransition } from "@tamagui/animation-helpers";
|
|
2
2
|
import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
3
3
|
import { ResetPresence, usePresence } from "@tamagui/use-presence";
|
|
4
|
-
import { useEvent
|
|
4
|
+
import { useEvent } from "@tamagui/web";
|
|
5
|
+
import { useThemeWithState } from "@tamagui/web/internal-runtime";
|
|
5
6
|
import React from "react";
|
|
6
|
-
import { Animated } from "react-native";
|
|
7
|
-
function _type_of(obj) {
|
|
8
|
-
"@swc/helpers - typeof";
|
|
7
|
+
import { Animated, Easing, TextInput, processColor } from "react-native";
|
|
9
8
|
|
|
10
|
-
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
11
|
-
}
|
|
12
9
|
var isFabric = !isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
|
|
13
|
-
var resolveDynamicValue = function
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
var resolveDynamicValue = function(value, isDark) {
|
|
11
|
+
if (value && typeof value === "object" && "dynamic" in value) {
|
|
12
|
+
var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
|
|
13
|
+
return dynamicValue;
|
|
14
|
+
}
|
|
15
|
+
return value;
|
|
19
16
|
};
|
|
20
17
|
var animatedStyleKey = {
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
transform: true,
|
|
19
|
+
opacity: true
|
|
23
20
|
};
|
|
24
21
|
var colorStyleKey = {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
backgroundColor: true,
|
|
23
|
+
color: true,
|
|
24
|
+
borderColor: true,
|
|
25
|
+
borderLeftColor: true,
|
|
26
|
+
borderRightColor: true,
|
|
27
|
+
borderTopColor: true,
|
|
28
|
+
borderBottomColor: true
|
|
32
29
|
};
|
|
33
30
|
var layoutStyleKey = {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
height: true,
|
|
32
|
+
width: true,
|
|
33
|
+
minHeight: true,
|
|
34
|
+
maxHeight: true,
|
|
35
|
+
minWidth: true,
|
|
36
|
+
maxWidth: true
|
|
37
|
+
};
|
|
38
|
+
var textMetricStyleKey = {
|
|
39
|
+
fontSize: true,
|
|
40
|
+
lineHeight: true
|
|
41
|
+
};
|
|
42
|
+
var jsDriverStyleKey = {
|
|
43
|
+
...layoutStyleKey,
|
|
44
|
+
...textMetricStyleKey
|
|
40
45
|
};
|
|
41
|
-
function hasAnimatedLayoutKey(style, isDark,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
function hasAnimatedLayoutKey(style, isDark, resolved) {
|
|
47
|
+
for (var key in layoutStyleKey) {
|
|
48
|
+
if (!getTransitionForKey(resolved, key)) continue;
|
|
49
|
+
if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
|
|
50
|
+
}
|
|
51
|
+
return false;
|
|
47
52
|
}
|
|
53
|
+
var getLeadingRatio = function(metrics) {
|
|
54
|
+
var ratio = metrics === null || metrics === void 0 ? void 0 : metrics.lineHeight;
|
|
55
|
+
return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
|
|
56
|
+
};
|
|
57
|
+
var paintsLeadingProduct = function(style, ratio) {
|
|
58
|
+
return ratio !== void 0 && typeof style.fontSize === "number" && typeof style.lineHeight === "number";
|
|
59
|
+
};
|
|
60
|
+
var inheritedFontSizeNode = function(style, ratio, inheritedText) {
|
|
61
|
+
return ratio !== void 0 && typeof style.fontSize !== "number" && (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : void 0;
|
|
62
|
+
};
|
|
48
63
|
function isAnimatableColor(value) {
|
|
49
|
-
|
|
50
|
-
if (value === "") return false;
|
|
51
|
-
if (value.includes("var(") || value.includes("calc(")) return false;
|
|
52
|
-
return true;
|
|
64
|
+
return typeof value === "string" && processColor(value) != null;
|
|
53
65
|
}
|
|
54
66
|
var costlyToAnimateStyleKey = {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
67
|
+
borderRadius: true,
|
|
68
|
+
borderTopLeftRadius: true,
|
|
69
|
+
borderTopRightRadius: true,
|
|
70
|
+
borderBottomLeftRadius: true,
|
|
71
|
+
borderBottomRightRadius: true,
|
|
72
|
+
borderWidth: true,
|
|
73
|
+
borderLeftWidth: true,
|
|
74
|
+
borderRightWidth: true,
|
|
75
|
+
borderTopWidth: true,
|
|
76
|
+
borderBottomWidth: true,
|
|
77
|
+
...colorStyleKey
|
|
66
78
|
};
|
|
67
79
|
var AnimatedView = Animated.View;
|
|
68
80
|
var AnimatedText = Animated.Text;
|
|
81
|
+
var animatedTextInput;
|
|
69
82
|
function useAnimatedNumber(initial) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
});
|
|
127
|
-
composite1.start(handleFinish);
|
|
128
|
-
state.current.composite = composite1;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
};
|
|
83
|
+
var state = React.useRef(null);
|
|
84
|
+
if (!state.current) {
|
|
85
|
+
state.current = {
|
|
86
|
+
composite: null,
|
|
87
|
+
val: new Animated.Value(initial),
|
|
88
|
+
strategy: { type: "spring" }
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
return {
|
|
92
|
+
getInstance() {
|
|
93
|
+
return state.current.val;
|
|
94
|
+
},
|
|
95
|
+
getValue() {
|
|
96
|
+
return state.current.val["_value"];
|
|
97
|
+
},
|
|
98
|
+
stop() {
|
|
99
|
+
var _state_current_composite;
|
|
100
|
+
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
101
|
+
state.current.composite = null;
|
|
102
|
+
},
|
|
103
|
+
setValue(next) {
|
|
104
|
+
var { type, ...config } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
|
|
105
|
+
var val = state.current.val;
|
|
106
|
+
var handleFinish = onFinish ? function(param) {
|
|
107
|
+
var { finished } = param;
|
|
108
|
+
return finished ? onFinish() : null;
|
|
109
|
+
} : void 0;
|
|
110
|
+
if (type === "direct") {
|
|
111
|
+
var _state_current_composite;
|
|
112
|
+
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
113
|
+
state.current.composite = null;
|
|
114
|
+
val.setValue(next);
|
|
115
|
+
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
|
|
116
|
+
} else if (type === "spring") {
|
|
117
|
+
var _state_current_composite1;
|
|
118
|
+
(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
|
|
119
|
+
var composite = Animated.spring(val, {
|
|
120
|
+
...config,
|
|
121
|
+
toValue: next,
|
|
122
|
+
useNativeDriver: isFabric
|
|
123
|
+
});
|
|
124
|
+
composite.start(handleFinish);
|
|
125
|
+
state.current.composite = composite;
|
|
126
|
+
} else {
|
|
127
|
+
var _state_current_composite2;
|
|
128
|
+
(_state_current_composite2 = state.current.composite) === null || _state_current_composite2 === void 0 ? void 0 : _state_current_composite2.stop();
|
|
129
|
+
var composite1 = Animated.timing(val, {
|
|
130
|
+
...config,
|
|
131
|
+
toValue: next,
|
|
132
|
+
useNativeDriver: isFabric
|
|
133
|
+
});
|
|
134
|
+
composite1.start(handleFinish);
|
|
135
|
+
state.current.composite = composite1;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
};
|
|
132
139
|
}
|
|
133
|
-
var useAnimatedNumberReaction = function
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
};
|
|
145
|
-
}, [value, onChange]);
|
|
140
|
+
var useAnimatedNumberReaction = function(param, onValue) {
|
|
141
|
+
var { value } = param;
|
|
142
|
+
var onChange = useEvent(function(current) {
|
|
143
|
+
onValue(current.value);
|
|
144
|
+
});
|
|
145
|
+
React.useEffect(function() {
|
|
146
|
+
var id = value.getInstance().addListener(onChange);
|
|
147
|
+
return function() {
|
|
148
|
+
value.getInstance().removeListener(id);
|
|
149
|
+
};
|
|
150
|
+
}, [value, onChange]);
|
|
146
151
|
};
|
|
147
|
-
var useAnimatedNumberStyle = function
|
|
148
|
-
|
|
152
|
+
var useAnimatedNumberStyle = function(value, getStyle) {
|
|
153
|
+
var instance = value.getInstance();
|
|
154
|
+
var animatedStyle = getStyle(instance);
|
|
155
|
+
var usesAnimatedNode = hasAnimatedNode(animatedStyle);
|
|
156
|
+
var [current, setCurrent] = React.useState(value.getValue());
|
|
157
|
+
React.useEffect(function() {
|
|
158
|
+
if (usesAnimatedNode) return;
|
|
159
|
+
var id = instance.addListener(function(param) {
|
|
160
|
+
var { value: next } = param;
|
|
161
|
+
setCurrent(next);
|
|
162
|
+
});
|
|
163
|
+
return function() {
|
|
164
|
+
instance.removeListener(id);
|
|
165
|
+
};
|
|
166
|
+
}, [instance, usesAnimatedNode]);
|
|
167
|
+
return usesAnimatedNode ? animatedStyle : getStyle(current);
|
|
149
168
|
};
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
169
|
+
function hasAnimatedNode(value) {
|
|
170
|
+
if (!value || typeof value !== "object") return false;
|
|
171
|
+
if (typeof value.__getValue === "function") return true;
|
|
172
|
+
if (Array.isArray(value)) return value.some(hasAnimatedNode);
|
|
173
|
+
return Object.values(value).some(hasAnimatedNode);
|
|
174
|
+
}
|
|
175
|
+
var useAnimatedNumbersStyle = function(vals, getStyle) {
|
|
176
|
+
return getStyle(...vals.map(function(v) {
|
|
177
|
+
return v.getInstance();
|
|
178
|
+
}));
|
|
154
179
|
};
|
|
155
180
|
function createAnimations(animations, options) {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
181
|
+
var _options_useNativeDriver;
|
|
182
|
+
var nativeDriver = (_options_useNativeDriver = options === null || options === void 0 ? void 0 : options.useNativeDriver) !== null && _options_useNativeDriver !== void 0 ? _options_useNativeDriver : isFabric;
|
|
183
|
+
return {
|
|
184
|
+
inputStyle: "value",
|
|
185
|
+
outputStyle: "inline",
|
|
186
|
+
avoidReRenders: true,
|
|
187
|
+
animations,
|
|
188
|
+
needsCustomComponent: true,
|
|
189
|
+
View: AnimatedView,
|
|
190
|
+
Text: AnimatedText,
|
|
191
|
+
useAnimatedNumber,
|
|
192
|
+
useAnimatedNumberReaction,
|
|
193
|
+
useAnimatedNumberStyle,
|
|
194
|
+
useAnimatedNumbersStyle,
|
|
195
|
+
usePresence,
|
|
196
|
+
ResetPresence,
|
|
197
|
+
useTextMetrics: function(param) {
|
|
198
|
+
var { inheritedText, lineHeight } = param;
|
|
199
|
+
var node = (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : null;
|
|
200
|
+
var ratio = typeof lineHeight === "number" ? lineHeight : null;
|
|
201
|
+
var style = React.useMemo(function() {
|
|
202
|
+
return node ? ratio === null ? { fontSize: node } : {
|
|
203
|
+
fontSize: node,
|
|
204
|
+
lineHeight: Animated.multiply(node, ratio)
|
|
205
|
+
} : null;
|
|
206
|
+
}, [node, ratio]);
|
|
207
|
+
var textChannel = inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
|
|
208
|
+
if (!style) return {
|
|
209
|
+
style: null,
|
|
210
|
+
textChannel
|
|
211
|
+
};
|
|
212
|
+
animatedTextInput || (animatedTextInput = Animated.createAnimatedComponent(TextInput));
|
|
213
|
+
return {
|
|
214
|
+
style,
|
|
215
|
+
textChannel,
|
|
216
|
+
Text: AnimatedText,
|
|
217
|
+
TextInput: animatedTextInput
|
|
218
|
+
};
|
|
219
|
+
},
|
|
220
|
+
useAnimations: function(param) {
|
|
221
|
+
var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter, inheritedText } = param;
|
|
222
|
+
var _themeState_name;
|
|
223
|
+
var isDisabled = isWeb && componentState.unmounted === true;
|
|
224
|
+
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
225
|
+
var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
|
|
226
|
+
var onTransitionRef = React.useRef(onTransition);
|
|
227
|
+
onTransitionRef.current = onTransition;
|
|
228
|
+
var emit = function(phase, cause, finished) {
|
|
229
|
+
var _onTransitionRef_current;
|
|
230
|
+
(_onTransitionRef_current = onTransitionRef.current) === null || _onTransitionRef_current === void 0 ? void 0 : _onTransitionRef_current.call(onTransitionRef, phase === "end" ? {
|
|
231
|
+
phase,
|
|
232
|
+
cause,
|
|
233
|
+
finished
|
|
234
|
+
} : {
|
|
235
|
+
phase,
|
|
236
|
+
cause
|
|
237
|
+
});
|
|
238
|
+
};
|
|
239
|
+
var _styleState_effectiveTransition;
|
|
240
|
+
var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
|
|
241
|
+
var [, themeState] = useThemeWithState({});
|
|
242
|
+
var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
|
|
243
|
+
var animateStyles = React.useRef({});
|
|
244
|
+
var leadingRatioValue = React.useRef(null);
|
|
245
|
+
var leadingRatioRef = React.useRef(void 0);
|
|
246
|
+
var paintsDerivedLeading = React.useRef(false);
|
|
247
|
+
var textChannelRef = React.useRef(null);
|
|
248
|
+
leadingRatioRef.current = getLeadingRatio(styleState === null || styleState === void 0 ? void 0 : styleState.nativeTextMetrics);
|
|
249
|
+
var paintedTextRef = React.useRef({});
|
|
250
|
+
var movesTextValue = function(key, target) {
|
|
251
|
+
if (typeof target !== "number") return false;
|
|
252
|
+
var node = animateStyles.current[key];
|
|
253
|
+
var last = node ? node["_value"] : paintedTextRef.current[key];
|
|
254
|
+
return last !== void 0 && last !== target;
|
|
255
|
+
};
|
|
256
|
+
var movesLeadingRatio = function(ratio) {
|
|
257
|
+
if (ratio === void 0) return false;
|
|
258
|
+
var node = leadingRatioValue.current;
|
|
259
|
+
var last = node ? node["_value"] : paintedTextRef.current.ratio;
|
|
260
|
+
return last !== void 0 && last !== ratio;
|
|
261
|
+
};
|
|
262
|
+
var fontSizeNode = React.useRef(null);
|
|
263
|
+
var animatedValueFor = function(key) {
|
|
264
|
+
var painted = animateStyles.current[key];
|
|
265
|
+
if (painted) return painted;
|
|
266
|
+
if (key === "fontSize" && fontSizeNode.current) return fontSizeNode.current;
|
|
267
|
+
if (textMetricStyleKey[key]) return new Animated.Value(paintedTextRef.current[key]);
|
|
268
|
+
return void 0;
|
|
269
|
+
};
|
|
270
|
+
var leadingRatioValueFrom = function() {
|
|
271
|
+
var _leadingRatioValue_current;
|
|
272
|
+
return (_leadingRatioValue_current = leadingRatioValue.current) !== null && _leadingRatioValue_current !== void 0 ? _leadingRatioValue_current : new Animated.Value(paintedTextRef.current.ratio);
|
|
273
|
+
};
|
|
274
|
+
var animatedTranforms = React.useRef([]);
|
|
275
|
+
var animationsState = React.useRef(/* @__PURE__ */ new WeakMap());
|
|
276
|
+
var pseudoActiveRef = React.useRef(false);
|
|
277
|
+
var exitCycleIdRef = React.useRef(0);
|
|
278
|
+
var exitCompletedRef = React.useRef(false);
|
|
279
|
+
var wasExitingRef = React.useRef(false);
|
|
280
|
+
var enterStartedRef = React.useRef(false);
|
|
281
|
+
var exitStartedRef = React.useRef(false);
|
|
282
|
+
var updateInFlightRef = React.useRef(false);
|
|
283
|
+
var updateCycleIdRef = React.useRef(0);
|
|
284
|
+
var prevStyleSigRef = React.useRef(null);
|
|
285
|
+
var justStartedExiting = isExiting && !wasExitingRef.current;
|
|
286
|
+
var justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
287
|
+
if (justStartedExiting) {
|
|
288
|
+
exitCycleIdRef.current++;
|
|
289
|
+
exitCompletedRef.current = false;
|
|
290
|
+
}
|
|
291
|
+
if (justStoppedExiting) {
|
|
292
|
+
exitCycleIdRef.current++;
|
|
293
|
+
}
|
|
294
|
+
var isEntering = !!componentState.unmounted;
|
|
295
|
+
var wasEnteringRef = React.useRef(isEntering);
|
|
296
|
+
var justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
297
|
+
React.useEffect(function() {
|
|
298
|
+
wasEnteringRef.current = isEntering;
|
|
299
|
+
});
|
|
300
|
+
var args = [
|
|
301
|
+
JSON.stringify(style),
|
|
302
|
+
JSON.stringify(effectiveTransition),
|
|
303
|
+
componentState,
|
|
304
|
+
isExiting,
|
|
305
|
+
!!onTransition,
|
|
306
|
+
isDark,
|
|
307
|
+
justFinishedEntering,
|
|
308
|
+
leadingRatioRef.current,
|
|
309
|
+
inheritedText
|
|
310
|
+
];
|
|
311
|
+
var res = React.useMemo(function() {
|
|
312
|
+
var _textChannelRef_current;
|
|
313
|
+
var runners = [];
|
|
314
|
+
var completions = [];
|
|
315
|
+
var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
|
|
316
|
+
var resolved = forAnimationState(resolveTransition(effectiveTransition, { animations }), animationState);
|
|
317
|
+
var nonAnimatedStyle = {};
|
|
318
|
+
var paintedRatio = leadingRatioRef.current;
|
|
319
|
+
var paintsProduct = paintsLeadingProduct(style, paintedRatio);
|
|
320
|
+
var movesFontSize = movesTextValue("fontSize", style.fontSize);
|
|
321
|
+
var movesLeading = paintsProduct ? movesLeadingRatio(paintedRatio) : movesTextValue("lineHeight", style.lineHeight);
|
|
322
|
+
if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
|
|
323
|
+
if (!movesFontSize) delete animateStyles.current.fontSize;
|
|
324
|
+
if (!movesLeading) delete animateStyles.current.lineHeight;
|
|
325
|
+
}
|
|
326
|
+
if (isDisabled || typeof style.fontSize !== "number" || !getTransitionForKey(resolved, "fontSize")) {
|
|
327
|
+
fontSizeNode.current = null;
|
|
328
|
+
} else if (!fontSizeNode.current) {
|
|
329
|
+
fontSizeNode.current = new Animated.Value(style.fontSize);
|
|
330
|
+
}
|
|
331
|
+
var seenAnimateKeys = /* @__PURE__ */ new Set();
|
|
332
|
+
var sawTransform = false;
|
|
333
|
+
var transformCount = 0;
|
|
334
|
+
var derivesLeading = !isDisabled && paintsProduct && (movesFontSize || movesLeading) && (!!getTransitionForKey(resolved, "fontSize") || !!getTransitionForKey(resolved, "lineHeight"));
|
|
335
|
+
var inheritedFontSize = isDisabled ? void 0 : inheritedFontSizeNode(style, paintedRatio, inheritedText);
|
|
336
|
+
var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved) && !movesFontSize && !movesLeading && !inheritedFontSize && !Object.keys(animateStyles.current).some(function(key2) {
|
|
337
|
+
return jsDriverStyleKey[key2];
|
|
338
|
+
});
|
|
339
|
+
for (var key in style) {
|
|
340
|
+
var rawVal = style[key];
|
|
341
|
+
var val = resolveDynamicValue(rawVal, isDark);
|
|
342
|
+
if (val === void 0) continue;
|
|
343
|
+
if (isDisabled) {
|
|
344
|
+
continue;
|
|
345
|
+
}
|
|
346
|
+
if ((derivesLeading || inheritedFontSize) && (key === "fontSize" || key === "lineHeight")) {
|
|
347
|
+
if (key === "fontSize" && derivesLeading && !movesFontSize) {
|
|
348
|
+
nonAnimatedStyle[key] = val;
|
|
349
|
+
}
|
|
350
|
+
continue;
|
|
351
|
+
}
|
|
352
|
+
if (textMetricStyleKey[key] && !(key === "fontSize" ? movesFontSize : movesLeading)) {
|
|
353
|
+
nonAnimatedStyle[key] = val;
|
|
354
|
+
continue;
|
|
355
|
+
}
|
|
356
|
+
if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
|
|
357
|
+
nonAnimatedStyle[key] = val;
|
|
358
|
+
continue;
|
|
359
|
+
}
|
|
360
|
+
if (key !== "transform" && !getTransitionForKey(resolved, key)) {
|
|
361
|
+
nonAnimatedStyle[key] = val;
|
|
362
|
+
continue;
|
|
363
|
+
}
|
|
364
|
+
if (jsDriverStyleKey[key] && typeof val !== "number") {
|
|
365
|
+
nonAnimatedStyle[key] = val;
|
|
366
|
+
continue;
|
|
367
|
+
}
|
|
368
|
+
if (colorStyleKey[key] && !isAnimatableColor(val)) {
|
|
369
|
+
nonAnimatedStyle[key] = val;
|
|
370
|
+
continue;
|
|
371
|
+
}
|
|
372
|
+
if (key !== "transform") {
|
|
373
|
+
animateStyles.current[key] = update(key, animatedValueFor(key), val);
|
|
374
|
+
seenAnimateKeys.add(key);
|
|
375
|
+
continue;
|
|
376
|
+
}
|
|
377
|
+
if (!val) continue;
|
|
378
|
+
if (typeof val === "string") {
|
|
379
|
+
console.warn(`Warning: Tamagui can't animate string transforms yet!`);
|
|
380
|
+
continue;
|
|
381
|
+
}
|
|
382
|
+
sawTransform = true;
|
|
383
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
384
|
+
try {
|
|
385
|
+
for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
386
|
+
var transform = _step.value;
|
|
387
|
+
var _animatedTranforms_current_index;
|
|
388
|
+
if (!transform) continue;
|
|
389
|
+
var index = transformCount++;
|
|
390
|
+
var tkey = Object.keys(transform)[0];
|
|
391
|
+
var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
392
|
+
animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
|
|
393
|
+
animatedTranforms.current = [...animatedTranforms.current];
|
|
394
|
+
}
|
|
395
|
+
} catch (err) {
|
|
396
|
+
_didIteratorError = true;
|
|
397
|
+
_iteratorError = err;
|
|
398
|
+
} finally {
|
|
399
|
+
try {
|
|
400
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
401
|
+
_iterator.return();
|
|
402
|
+
}
|
|
403
|
+
} finally {
|
|
404
|
+
if (_didIteratorError) {
|
|
405
|
+
throw _iteratorError;
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
var ratioFactor = function() {
|
|
411
|
+
if (!movesLeading) {
|
|
412
|
+
leadingRatioValue.current = null;
|
|
413
|
+
return paintedRatio;
|
|
414
|
+
}
|
|
415
|
+
leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), paintedRatio);
|
|
416
|
+
return leadingRatioValue.current;
|
|
417
|
+
};
|
|
418
|
+
var derivedLeading;
|
|
419
|
+
if (derivesLeading) {
|
|
420
|
+
var fontSizeFactor = style.fontSize;
|
|
421
|
+
if (movesFontSize) {
|
|
422
|
+
fontSizeFactor = update("fontSize", animatedValueFor("fontSize"), style.fontSize);
|
|
423
|
+
animateStyles.current.fontSize = fontSizeFactor;
|
|
424
|
+
seenAnimateKeys.add("fontSize");
|
|
425
|
+
}
|
|
426
|
+
derivedLeading = Animated.multiply(fontSizeFactor, ratioFactor());
|
|
427
|
+
} else if (inheritedFontSize) {
|
|
428
|
+
derivedLeading = Animated.multiply(inheritedFontSize, ratioFactor());
|
|
429
|
+
} else if (!isDisabled) {
|
|
430
|
+
leadingRatioValue.current = null;
|
|
431
|
+
}
|
|
432
|
+
paintsDerivedLeading.current = !!derivedLeading;
|
|
433
|
+
var ownFontSizeNode = fontSizeNode.current;
|
|
434
|
+
var textChannel = ownFontSizeNode ? ((_textChannelRef_current = textChannelRef.current) === null || _textChannelRef_current === void 0 ? void 0 : _textChannelRef_current.fontSize) === ownFontSizeNode ? textChannelRef.current : {
|
|
435
|
+
fontSize: ownFontSizeNode,
|
|
436
|
+
driver: "react-native"
|
|
437
|
+
} : typeof style.fontSize === "number" ? null : inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
|
|
438
|
+
textChannelRef.current = textChannel;
|
|
439
|
+
if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
|
|
440
|
+
for (var k in animateStyles.current) {
|
|
441
|
+
if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
|
|
442
|
+
}
|
|
443
|
+
if (!sawTransform) {
|
|
444
|
+
if (animatedTranforms.current.length) animatedTranforms.current = [];
|
|
445
|
+
} else if (animatedTranforms.current.length > transformCount) {
|
|
446
|
+
animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
var animatedTransformStyle = animatedTranforms.current.length > 0 ? { transform: animatedTranforms.current.map(function(r) {
|
|
450
|
+
var _animationsState_current_get;
|
|
451
|
+
var key2 = Object.keys(r)[0];
|
|
452
|
+
var val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
|
|
453
|
+
return { [key2]: val2 };
|
|
454
|
+
}) } : {};
|
|
455
|
+
var animatedStyle = {
|
|
456
|
+
...Object.fromEntries(Object.entries(animateStyles.current).map(function(param2) {
|
|
457
|
+
var [k2, v] = param2;
|
|
458
|
+
var _animationsState_current_get;
|
|
459
|
+
return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
|
|
460
|
+
})),
|
|
461
|
+
...derivedLeading ? { lineHeight: derivedLeading } : null,
|
|
462
|
+
...animatedTransformStyle
|
|
463
|
+
};
|
|
464
|
+
if (!isDisabled) {
|
|
465
|
+
paintedTextRef.current = {
|
|
466
|
+
fontSize: style.fontSize,
|
|
467
|
+
lineHeight: style.lineHeight,
|
|
468
|
+
ratio: paintedRatio
|
|
469
|
+
};
|
|
470
|
+
}
|
|
471
|
+
return {
|
|
472
|
+
runners,
|
|
473
|
+
completions,
|
|
474
|
+
textChannel,
|
|
475
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
476
|
+
};
|
|
477
|
+
function update(key2, animated, valIn) {
|
|
478
|
+
var isColorStyleKey = colorStyleKey[key2];
|
|
479
|
+
var [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
|
|
480
|
+
var animateToValue = val2;
|
|
481
|
+
var value = animated || new Animated.Value(val2);
|
|
482
|
+
var curInterpolation = animationsState.current.get(value);
|
|
483
|
+
var interpolateArgs;
|
|
484
|
+
if (type) {
|
|
485
|
+
var _curInterpolation_current;
|
|
486
|
+
interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], val2, type);
|
|
487
|
+
animationsState.current.set(value, {
|
|
488
|
+
interpolation: value.interpolate(interpolateArgs),
|
|
489
|
+
current: val2
|
|
490
|
+
});
|
|
491
|
+
}
|
|
492
|
+
if (isColorStyleKey) {
|
|
493
|
+
animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
|
|
494
|
+
interpolateArgs = getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue);
|
|
495
|
+
animationsState.current.set(value, {
|
|
496
|
+
current: valIn,
|
|
497
|
+
interpolation: value.interpolate(interpolateArgs),
|
|
498
|
+
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
499
|
+
});
|
|
500
|
+
}
|
|
501
|
+
if (value) {
|
|
502
|
+
var animationConfig = getAnimationConfig(key2, animations, effectiveTransition, animationState);
|
|
503
|
+
var resolve;
|
|
504
|
+
var promise = new Promise(function(res2) {
|
|
505
|
+
resolve = res2;
|
|
506
|
+
});
|
|
507
|
+
completions.push(promise);
|
|
508
|
+
runners.push(function() {
|
|
509
|
+
value.stopAnimation();
|
|
510
|
+
var { type: type2, delay, ...config } = animationConfig;
|
|
511
|
+
var animation = Animated[type2 || "spring"](value, {
|
|
512
|
+
toValue: animateToValue,
|
|
513
|
+
...config,
|
|
514
|
+
useNativeDriver: useNativeDriverForNode
|
|
515
|
+
});
|
|
516
|
+
var animation2 = delay ? Animated.sequence([Animated.delay(delay), animation]) : animation;
|
|
517
|
+
animation2.start(function(param2) {
|
|
518
|
+
var { finished } = param2;
|
|
519
|
+
if (finished || isExiting) {
|
|
520
|
+
resolve();
|
|
521
|
+
}
|
|
522
|
+
});
|
|
523
|
+
});
|
|
524
|
+
}
|
|
525
|
+
if (process.env.NODE_ENV === "development") {
|
|
526
|
+
if (props["debug"] === "verbose") {
|
|
527
|
+
console.info(" 💠 animate", key2, `from (${value["_value"]}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs);
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
return value;
|
|
531
|
+
}
|
|
532
|
+
}, args);
|
|
533
|
+
React.useEffect(function() {
|
|
534
|
+
wasExitingRef.current = isExiting;
|
|
535
|
+
});
|
|
536
|
+
useIsomorphicLayoutEffect(function() {
|
|
537
|
+
if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
|
|
538
|
+
exitStartedRef.current = false;
|
|
539
|
+
emit("end", "exit", false);
|
|
540
|
+
}
|
|
541
|
+
}, [justStoppedExiting]);
|
|
542
|
+
useIsomorphicLayoutEffect(function() {
|
|
543
|
+
res.runners.forEach(function(r) {
|
|
544
|
+
return r();
|
|
545
|
+
});
|
|
546
|
+
var cycleId = exitCycleIdRef.current;
|
|
547
|
+
var cause = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "update";
|
|
548
|
+
if (cause === "exit") {
|
|
549
|
+
if (enterStartedRef.current) {
|
|
550
|
+
enterStartedRef.current = false;
|
|
551
|
+
emit("end", "enter", false);
|
|
552
|
+
}
|
|
553
|
+
if (updateInFlightRef.current) {
|
|
554
|
+
updateInFlightRef.current = false;
|
|
555
|
+
updateCycleIdRef.current++;
|
|
556
|
+
emit("end", "update", false);
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
if (cause === "update") {
|
|
560
|
+
var sig = args[0];
|
|
561
|
+
if (prevStyleSigRef.current === null || prevStyleSigRef.current === sig) {
|
|
562
|
+
prevStyleSigRef.current = sig;
|
|
563
|
+
return;
|
|
564
|
+
}
|
|
565
|
+
prevStyleSigRef.current = sig;
|
|
566
|
+
if (res.completions.length === 0) return;
|
|
567
|
+
if (updateInFlightRef.current) {
|
|
568
|
+
emit("end", "update", false);
|
|
569
|
+
}
|
|
570
|
+
updateInFlightRef.current = true;
|
|
571
|
+
var uid = ++updateCycleIdRef.current;
|
|
572
|
+
emit("start", "update");
|
|
573
|
+
Promise.all(res.completions).then(function() {
|
|
574
|
+
if (uid !== updateCycleIdRef.current) return;
|
|
575
|
+
updateInFlightRef.current = false;
|
|
576
|
+
emit("end", "update", true);
|
|
577
|
+
});
|
|
578
|
+
return;
|
|
579
|
+
}
|
|
580
|
+
prevStyleSigRef.current = args[0];
|
|
581
|
+
if (res.completions.length === 0) {
|
|
582
|
+
emit("start", cause);
|
|
583
|
+
emit("end", cause, true);
|
|
584
|
+
if (isExiting && !exitCompletedRef.current) {
|
|
585
|
+
exitCompletedRef.current = true;
|
|
586
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
587
|
+
}
|
|
588
|
+
return;
|
|
589
|
+
}
|
|
590
|
+
if (cause === "enter" && !enterStartedRef.current) {
|
|
591
|
+
enterStartedRef.current = true;
|
|
592
|
+
emit("start", "enter");
|
|
593
|
+
}
|
|
594
|
+
if (cause === "exit" && !exitStartedRef.current) {
|
|
595
|
+
exitStartedRef.current = true;
|
|
596
|
+
emit("start", "exit");
|
|
597
|
+
}
|
|
598
|
+
Promise.all(res.completions).then(function() {
|
|
599
|
+
if (isExiting && cycleId !== exitCycleIdRef.current) return;
|
|
600
|
+
if (isExiting && exitCompletedRef.current) return;
|
|
601
|
+
if (isExiting) {
|
|
602
|
+
if (exitStartedRef.current) {
|
|
603
|
+
exitStartedRef.current = false;
|
|
604
|
+
emit("end", "exit", true);
|
|
605
|
+
}
|
|
606
|
+
exitCompletedRef.current = true;
|
|
607
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
608
|
+
} else if (enterStartedRef.current) {
|
|
609
|
+
enterStartedRef.current = false;
|
|
610
|
+
emit("end", "enter", true);
|
|
611
|
+
}
|
|
612
|
+
});
|
|
613
|
+
}, args);
|
|
614
|
+
var onEmittedStyle = function(nextStyle, emittedTransition, pseudoActive, nextMetrics) {
|
|
615
|
+
pseudoActiveRef.current = pseudoActive === true;
|
|
616
|
+
var runners = [];
|
|
617
|
+
var seenAnimateKeys = /* @__PURE__ */ new Set();
|
|
618
|
+
var transformCount = 0;
|
|
619
|
+
var animatedShapeChanged = false;
|
|
620
|
+
var emittedResolved = forAnimationState(resolveTransition(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
|
|
621
|
+
var emittedRatio = getLeadingRatio(nextMetrics);
|
|
622
|
+
var emitterPaintsProduct = paintsLeadingProduct(nextStyle, emittedRatio);
|
|
623
|
+
var emitterMovesFontSize = movesTextValue("fontSize", nextStyle.fontSize);
|
|
624
|
+
var emitterMovesLeading = emitterPaintsProduct ? movesLeadingRatio(emittedRatio) : movesTextValue("lineHeight", nextStyle.lineHeight);
|
|
625
|
+
var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !emitterMovesFontSize && !emitterMovesLeading && !inheritedFontSizeNode(nextStyle, emittedRatio, inheritedText) && !Object.keys(animateStyles.current).some(function(key2) {
|
|
626
|
+
return jsDriverStyleKey[key2];
|
|
627
|
+
});
|
|
628
|
+
var emitterDerivesLeading = emitterPaintsProduct && (emitterMovesFontSize || emitterMovesLeading) && (!!getTransitionForKey(emittedResolved, "fontSize") || !!getTransitionForKey(emittedResolved, "lineHeight"));
|
|
629
|
+
for (var key in nextStyle) {
|
|
630
|
+
var rawVal = nextStyle[key];
|
|
631
|
+
var val = resolveDynamicValue(rawVal, isDark);
|
|
632
|
+
if (val === void 0) continue;
|
|
633
|
+
if (emitterDerivesLeading && (key === "fontSize" || key === "lineHeight")) {
|
|
634
|
+
continue;
|
|
635
|
+
}
|
|
636
|
+
if (textMetricStyleKey[key] && !(key === "fontSize" ? emitterMovesFontSize : emitterMovesLeading)) {
|
|
637
|
+
continue;
|
|
638
|
+
}
|
|
639
|
+
if (key === "transform" && Array.isArray(val)) {
|
|
640
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
641
|
+
try {
|
|
642
|
+
for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
643
|
+
var transform = _step.value;
|
|
644
|
+
var _animatedTranforms_current_index;
|
|
645
|
+
if (!transform) continue;
|
|
646
|
+
var index = transformCount++;
|
|
647
|
+
var tkey = Object.keys(transform)[0];
|
|
648
|
+
var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
649
|
+
if (!currentTransform) animatedShapeChanged = true;
|
|
650
|
+
animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
|
|
651
|
+
}
|
|
652
|
+
} catch (err) {
|
|
653
|
+
_didIteratorError = true;
|
|
654
|
+
_iteratorError = err;
|
|
655
|
+
} finally {
|
|
656
|
+
try {
|
|
657
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
658
|
+
_iterator.return();
|
|
659
|
+
}
|
|
660
|
+
} finally {
|
|
661
|
+
if (_didIteratorError) {
|
|
662
|
+
throw _iteratorError;
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || jsDriverStyleKey[key]) {
|
|
667
|
+
if (jsDriverStyleKey[key] && typeof val !== "number") continue;
|
|
668
|
+
if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
|
|
669
|
+
if (!animateStyles.current[key]) animatedShapeChanged = true;
|
|
670
|
+
animateStyles.current[key] = update(key, animatedValueFor(key), val);
|
|
671
|
+
seenAnimateKeys.add(key);
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
if (emitterDerivesLeading) {
|
|
675
|
+
if (emitterMovesFontSize) {
|
|
676
|
+
if (!animateStyles.current.fontSize) animatedShapeChanged = true;
|
|
677
|
+
animateStyles.current.fontSize = update("fontSize", animatedValueFor("fontSize"), nextStyle.fontSize);
|
|
678
|
+
seenAnimateKeys.add("fontSize");
|
|
679
|
+
}
|
|
680
|
+
if (emitterMovesLeading) {
|
|
681
|
+
if (!leadingRatioValue.current) animatedShapeChanged = true;
|
|
682
|
+
leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), emittedRatio);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
if (emitterDerivesLeading !== paintsDerivedLeading.current) {
|
|
686
|
+
animatedShapeChanged = true;
|
|
687
|
+
}
|
|
688
|
+
for (var key1 in animateStyles.current) {
|
|
689
|
+
if (!seenAnimateKeys.has(key1)) {
|
|
690
|
+
delete animateStyles.current[key1];
|
|
691
|
+
animatedShapeChanged = true;
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
if (animatedTranforms.current.length > transformCount) {
|
|
695
|
+
animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
|
|
696
|
+
animatedShapeChanged = true;
|
|
697
|
+
}
|
|
698
|
+
paintedTextRef.current = {
|
|
699
|
+
fontSize: nextStyle.fontSize,
|
|
700
|
+
lineHeight: nextStyle.lineHeight,
|
|
701
|
+
ratio: emittedRatio
|
|
702
|
+
};
|
|
703
|
+
runners.forEach(function(r) {
|
|
704
|
+
return r();
|
|
705
|
+
});
|
|
706
|
+
if (animatedShapeChanged && stateRef.current.nextState) {
|
|
707
|
+
var _stateRef_current_baseSetStateShallow, _stateRef_current;
|
|
708
|
+
(_stateRef_current_baseSetStateShallow = (_stateRef_current = stateRef.current).baseSetStateShallow) === null || _stateRef_current_baseSetStateShallow === void 0 ? void 0 : _stateRef_current_baseSetStateShallow.call(_stateRef_current, stateRef.current.nextState);
|
|
709
|
+
}
|
|
710
|
+
function update(key2, animated, valIn) {
|
|
711
|
+
var isColor = colorStyleKey[key2];
|
|
712
|
+
var [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
|
|
713
|
+
var animateToValue = numVal;
|
|
714
|
+
var value = animated || new Animated.Value(numVal);
|
|
715
|
+
var curInterpolation = animationsState.current.get(value);
|
|
716
|
+
if (type) {
|
|
717
|
+
var _curInterpolation_current;
|
|
718
|
+
animationsState.current.set(value, {
|
|
719
|
+
interpolation: value.interpolate(getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], numVal, type)),
|
|
720
|
+
current: numVal
|
|
721
|
+
});
|
|
722
|
+
}
|
|
723
|
+
if (isColor) {
|
|
724
|
+
animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
|
|
725
|
+
animationsState.current.set(value, {
|
|
726
|
+
current: valIn,
|
|
727
|
+
interpolation: value.interpolate(getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue)),
|
|
728
|
+
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
729
|
+
});
|
|
730
|
+
}
|
|
731
|
+
var animationConfig = getAnimationConfig(key2, animations, emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, "default");
|
|
732
|
+
runners.push(function() {
|
|
733
|
+
value.stopAnimation();
|
|
734
|
+
var { type: type2, delay, ...config } = animationConfig;
|
|
735
|
+
var anim = Animated[type2 || "spring"](value, {
|
|
736
|
+
toValue: animateToValue,
|
|
737
|
+
...config,
|
|
738
|
+
useNativeDriver: useNativeDriverForNode
|
|
739
|
+
});
|
|
740
|
+
(delay ? Animated.sequence([Animated.delay(delay), anim]) : anim).start();
|
|
741
|
+
});
|
|
742
|
+
return value;
|
|
743
|
+
}
|
|
744
|
+
};
|
|
745
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
|
|
746
|
+
if (process.env.NODE_ENV === "development") {
|
|
747
|
+
if (props["debug"] === "verbose") {
|
|
748
|
+
console.info(`Animated`, {
|
|
749
|
+
response: res,
|
|
750
|
+
inputStyle: style,
|
|
751
|
+
isExiting
|
|
752
|
+
});
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
return res;
|
|
756
|
+
}
|
|
757
|
+
};
|
|
528
758
|
}
|
|
529
759
|
function getColorInterpolated(currentColor, nextColor, animateToValue) {
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
760
|
+
var inputRange = [0, 1];
|
|
761
|
+
var outputRange = [currentColor ? currentColor : nextColor, nextColor];
|
|
762
|
+
if (animateToValue === 0) {
|
|
763
|
+
outputRange.reverse();
|
|
764
|
+
}
|
|
765
|
+
return {
|
|
766
|
+
inputRange,
|
|
767
|
+
outputRange
|
|
768
|
+
};
|
|
539
769
|
}
|
|
540
770
|
function getInterpolated(current, next) {
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
771
|
+
var postfix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "deg";
|
|
772
|
+
if (next === current) {
|
|
773
|
+
current = next - 1e-9;
|
|
774
|
+
}
|
|
775
|
+
var inputRange = [current, next];
|
|
776
|
+
var outputRange = [`${current}${postfix}`, `${next}${postfix}`];
|
|
777
|
+
if (next < current) {
|
|
778
|
+
inputRange.reverse();
|
|
779
|
+
outputRange.reverse();
|
|
780
|
+
}
|
|
781
|
+
return {
|
|
782
|
+
inputRange,
|
|
783
|
+
outputRange
|
|
784
|
+
};
|
|
555
785
|
}
|
|
556
|
-
function
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
};
|
|
577
|
-
}
|
|
578
|
-
var found = animationType ? animations[animationType] : {};
|
|
579
|
-
return {
|
|
580
|
-
...found,
|
|
581
|
-
// Apply global spring config overrides (from transition={['bouncy', { stiffness: 1000 }]})
|
|
582
|
-
...normalized.config,
|
|
583
|
-
// Property-specific config takes highest precedence
|
|
584
|
-
...extraConf
|
|
585
|
-
};
|
|
786
|
+
function entryToRN(entry) {
|
|
787
|
+
var extra = entry.timing.kind === "spring" ? entry.timing.extra : void 0;
|
|
788
|
+
if (entry.timing.kind === "spring") {
|
|
789
|
+
return {
|
|
790
|
+
type: "spring",
|
|
791
|
+
stiffness: entry.timing.stiffness,
|
|
792
|
+
damping: entry.timing.damping,
|
|
793
|
+
mass: entry.timing.mass,
|
|
794
|
+
...typeof (extra === null || extra === void 0 ? void 0 : extra.velocity) === "number" ? { velocity: extra.velocity } : null,
|
|
795
|
+
...typeof (extra === null || extra === void 0 ? void 0 : extra.overshootClamping) === "boolean" ? { overshootClamping: extra.overshootClamping } : null,
|
|
796
|
+
...entry.delayMs ? { delay: entry.delayMs } : null
|
|
797
|
+
};
|
|
798
|
+
}
|
|
799
|
+
var bezier = easingToBezier(entry.timing.easing);
|
|
800
|
+
return {
|
|
801
|
+
type: "timing",
|
|
802
|
+
duration: entry.timing.durationMs,
|
|
803
|
+
...bezier ? { easing: Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) } : null,
|
|
804
|
+
...entry.delayMs ? { delay: entry.delayMs } : null
|
|
805
|
+
};
|
|
586
806
|
}
|
|
587
|
-
var
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
translateX: "x",
|
|
591
|
-
translateY: "y"
|
|
807
|
+
var snapConfig = {
|
|
808
|
+
type: "timing",
|
|
809
|
+
duration: 0
|
|
592
810
|
};
|
|
811
|
+
function getAnimationConfig(key, animations, transition) {
|
|
812
|
+
var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
|
|
813
|
+
var resolved = forAnimationState(resolveTransition(transition, { animations }), animationState);
|
|
814
|
+
var entry = getTransitionForKey(resolved, key);
|
|
815
|
+
return entry ? entryToRN(entry) : snapConfig;
|
|
816
|
+
}
|
|
593
817
|
function getValue(input) {
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
818
|
+
var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
819
|
+
if (typeof input !== "string") {
|
|
820
|
+
return [input];
|
|
821
|
+
}
|
|
822
|
+
var _input_match;
|
|
823
|
+
var [_, number, after] = (_input_match = input.match(/(-?(?:\d+\.?\d*|\.\d+))(deg|%|px)?/)) !== null && _input_match !== void 0 ? _input_match : [];
|
|
824
|
+
return [+number, after];
|
|
601
825
|
}
|
|
826
|
+
|
|
602
827
|
export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle, useAnimatedNumbersStyle };
|
|
603
828
|
//# sourceMappingURL=createAnimations.native.js.map
|