@tamagui/animations-react-native 2.7.6 → 3.0.0-beta.637.1
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.cjs +562 -510
- package/dist/cjs/createAnimations.native.cjs +695 -0
- package/dist/cjs/createAnimations.native.js +638 -589
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +22 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/polyfill.cjs +3 -2
- package/dist/cjs/polyfill.native.cjs +6 -0
- package/dist/cjs/polyfill.native.js +3 -1
- package/dist/cjs/polyfill.native.js.map +1 -1
- package/dist/esm/createAnimations.mjs +541 -481
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +617 -561
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.mjs +2 -2
- 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/package.json +9 -8
- package/src/createAnimations.tsx +146 -24
- package/types/createAnimations.d.ts.map +2 -2
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
var __create = Object.create;
|
|
4
5
|
var __defProp = Object.defineProperty;
|
|
5
6
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -7,41 +8,34 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
7
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
10
|
var __export = (target, all) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
14
15
|
};
|
|
15
16
|
var __copyProps = (to, from, except, desc) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
23
24
|
};
|
|
24
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
30
|
-
value: mod,
|
|
31
|
-
enumerable: true
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
32
28
|
}) : target, mod));
|
|
33
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
34
|
-
value: true
|
|
35
|
-
}), mod);
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
36
30
|
var createAnimations_exports = {};
|
|
37
31
|
__export(createAnimations_exports, {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
32
|
+
AnimatedText: () => AnimatedText,
|
|
33
|
+
AnimatedView: () => AnimatedView,
|
|
34
|
+
createAnimations: () => createAnimations,
|
|
35
|
+
useAnimatedNumber: () => useAnimatedNumber,
|
|
36
|
+
useAnimatedNumberReaction: () => useAnimatedNumberReaction,
|
|
37
|
+
useAnimatedNumberStyle: () => useAnimatedNumberStyle,
|
|
38
|
+
useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
|
|
45
39
|
});
|
|
46
40
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
47
41
|
var import_animation_helpers = require("@tamagui/animation-helpers");
|
|
@@ -51,598 +45,653 @@ var import_web = require("@tamagui/web");
|
|
|
51
45
|
var import_react = __toESM(require("react"), 1);
|
|
52
46
|
var import_react_native = require("react-native");
|
|
53
47
|
function _type_of(obj) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
48
|
+
"@swc/helpers - typeof";
|
|
49
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
57
50
|
}
|
|
58
51
|
var isFabric = !import_constants.isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
|
|
59
|
-
var resolveDynamicValue = function
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
var resolveDynamicValue = function(value, isDark) {
|
|
53
|
+
if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
|
|
54
|
+
var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
|
|
55
|
+
return dynamicValue;
|
|
56
|
+
}
|
|
57
|
+
return value;
|
|
65
58
|
};
|
|
66
59
|
var animatedStyleKey = {
|
|
67
|
-
|
|
68
|
-
|
|
60
|
+
transform: true,
|
|
61
|
+
opacity: true
|
|
69
62
|
};
|
|
70
63
|
var colorStyleKey = {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
64
|
+
backgroundColor: true,
|
|
65
|
+
color: true,
|
|
66
|
+
borderColor: true,
|
|
67
|
+
borderLeftColor: true,
|
|
68
|
+
borderRightColor: true,
|
|
69
|
+
borderTopColor: true,
|
|
70
|
+
borderBottomColor: true
|
|
78
71
|
};
|
|
79
72
|
var layoutStyleKey = {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
73
|
+
height: true,
|
|
74
|
+
width: true,
|
|
75
|
+
minHeight: true,
|
|
76
|
+
maxHeight: true,
|
|
77
|
+
minWidth: true,
|
|
78
|
+
maxWidth: true
|
|
86
79
|
};
|
|
87
80
|
function hasAnimatedLayoutKey(style, isDark, animateOnly) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
81
|
+
for (var key in layoutStyleKey) {
|
|
82
|
+
if (animateOnly && !animateOnly.includes(key)) continue;
|
|
83
|
+
if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
|
|
84
|
+
}
|
|
85
|
+
return false;
|
|
93
86
|
}
|
|
94
87
|
function isAnimatableColor(value) {
|
|
95
|
-
|
|
96
|
-
if (value === "") return false;
|
|
97
|
-
if (value.includes("var(") || value.includes("calc(")) return false;
|
|
98
|
-
return true;
|
|
88
|
+
return typeof value === "string" && (0, import_react_native.processColor)(value) != null;
|
|
99
89
|
}
|
|
100
90
|
var costlyToAnimateStyleKey = {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
91
|
+
borderRadius: true,
|
|
92
|
+
borderTopLeftRadius: true,
|
|
93
|
+
borderTopRightRadius: true,
|
|
94
|
+
borderBottomLeftRadius: true,
|
|
95
|
+
borderBottomRightRadius: true,
|
|
96
|
+
borderWidth: true,
|
|
97
|
+
borderLeftWidth: true,
|
|
98
|
+
borderRightWidth: true,
|
|
99
|
+
borderTopWidth: true,
|
|
100
|
+
borderBottomWidth: true,
|
|
101
|
+
...colorStyleKey
|
|
112
102
|
};
|
|
113
103
|
var AnimatedView = import_react_native.Animated.View;
|
|
114
104
|
var AnimatedText = import_react_native.Animated.Text;
|
|
115
105
|
function useAnimatedNumber(initial) {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
var composite1 = import_react_native.Animated.timing(val, {
|
|
169
|
-
...config,
|
|
170
|
-
toValue: next,
|
|
171
|
-
useNativeDriver: isFabric
|
|
172
|
-
});
|
|
173
|
-
composite1.start(handleFinish);
|
|
174
|
-
state.current.composite = composite1;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
};
|
|
106
|
+
var state = import_react.default.useRef(null);
|
|
107
|
+
if (!state.current) {
|
|
108
|
+
state.current = {
|
|
109
|
+
composite: null,
|
|
110
|
+
val: new import_react_native.Animated.Value(initial),
|
|
111
|
+
strategy: { type: "spring" }
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
return {
|
|
115
|
+
getInstance() {
|
|
116
|
+
return state.current.val;
|
|
117
|
+
},
|
|
118
|
+
getValue() {
|
|
119
|
+
return state.current.val["_value"];
|
|
120
|
+
},
|
|
121
|
+
stop() {
|
|
122
|
+
var _state_current_composite;
|
|
123
|
+
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
124
|
+
state.current.composite = null;
|
|
125
|
+
},
|
|
126
|
+
setValue(next) {
|
|
127
|
+
var { type, ...config } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
|
|
128
|
+
var val = state.current.val;
|
|
129
|
+
var handleFinish = onFinish ? function(param) {
|
|
130
|
+
var { finished } = param;
|
|
131
|
+
return finished ? onFinish() : null;
|
|
132
|
+
} : void 0;
|
|
133
|
+
if (type === "direct") {
|
|
134
|
+
val.setValue(next);
|
|
135
|
+
} else if (type === "spring") {
|
|
136
|
+
var _state_current_composite;
|
|
137
|
+
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
138
|
+
var composite = import_react_native.Animated.spring(val, {
|
|
139
|
+
...config,
|
|
140
|
+
toValue: next,
|
|
141
|
+
useNativeDriver: isFabric
|
|
142
|
+
});
|
|
143
|
+
composite.start(handleFinish);
|
|
144
|
+
state.current.composite = composite;
|
|
145
|
+
} else {
|
|
146
|
+
var _state_current_composite1;
|
|
147
|
+
(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
|
|
148
|
+
var composite1 = import_react_native.Animated.timing(val, {
|
|
149
|
+
...config,
|
|
150
|
+
toValue: next,
|
|
151
|
+
useNativeDriver: isFabric
|
|
152
|
+
});
|
|
153
|
+
composite1.start(handleFinish);
|
|
154
|
+
state.current.composite = composite1;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
};
|
|
178
158
|
}
|
|
179
|
-
var useAnimatedNumberReaction = function
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
};
|
|
191
|
-
}, [value, onChange]);
|
|
159
|
+
var useAnimatedNumberReaction = function(param, onValue) {
|
|
160
|
+
var { value } = param;
|
|
161
|
+
var onChange = (0, import_web.useEvent)(function(current) {
|
|
162
|
+
onValue(current.value);
|
|
163
|
+
});
|
|
164
|
+
import_react.default.useEffect(function() {
|
|
165
|
+
var id = value.getInstance().addListener(onChange);
|
|
166
|
+
return function() {
|
|
167
|
+
value.getInstance().removeListener(id);
|
|
168
|
+
};
|
|
169
|
+
}, [value, onChange]);
|
|
192
170
|
};
|
|
193
|
-
var useAnimatedNumberStyle = function
|
|
194
|
-
|
|
171
|
+
var useAnimatedNumberStyle = function(value, getStyle) {
|
|
172
|
+
var instance = value.getInstance();
|
|
173
|
+
var animatedStyle = getStyle(instance);
|
|
174
|
+
var usesAnimatedNode = hasAnimatedNode(animatedStyle);
|
|
175
|
+
var [current, setCurrent] = import_react.default.useState(value.getValue());
|
|
176
|
+
import_react.default.useEffect(function() {
|
|
177
|
+
if (usesAnimatedNode) return;
|
|
178
|
+
var id = instance.addListener(function(param) {
|
|
179
|
+
var { value: next } = param;
|
|
180
|
+
setCurrent(next);
|
|
181
|
+
});
|
|
182
|
+
return function() {
|
|
183
|
+
instance.removeListener(id);
|
|
184
|
+
};
|
|
185
|
+
}, [instance, usesAnimatedNode]);
|
|
186
|
+
return usesAnimatedNode ? animatedStyle : getStyle(current);
|
|
195
187
|
};
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
188
|
+
function hasAnimatedNode(value) {
|
|
189
|
+
if (!value || (typeof value === "undefined" ? "undefined" : _type_of(value)) !== "object") return false;
|
|
190
|
+
if (typeof value.__getValue === "function") return true;
|
|
191
|
+
if (Array.isArray(value)) return value.some(hasAnimatedNode);
|
|
192
|
+
return Object.values(value).some(hasAnimatedNode);
|
|
193
|
+
}
|
|
194
|
+
var useAnimatedNumbersStyle = function(vals, getStyle) {
|
|
195
|
+
return getStyle(...vals.map(function(v) {
|
|
196
|
+
return v.getInstance();
|
|
197
|
+
}));
|
|
200
198
|
};
|
|
201
199
|
function createAnimations(animations, options) {
|
|
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
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
200
|
+
var _options_useNativeDriver;
|
|
201
|
+
var nativeDriver = (_options_useNativeDriver = options === null || options === void 0 ? void 0 : options.useNativeDriver) !== null && _options_useNativeDriver !== void 0 ? _options_useNativeDriver : isFabric;
|
|
202
|
+
return {
|
|
203
|
+
isReactNative: true,
|
|
204
|
+
inputStyle: "value",
|
|
205
|
+
outputStyle: "inline",
|
|
206
|
+
avoidReRenders: true,
|
|
207
|
+
animations,
|
|
208
|
+
needsCustomComponent: true,
|
|
209
|
+
View: AnimatedView,
|
|
210
|
+
Text: AnimatedText,
|
|
211
|
+
useAnimatedNumber,
|
|
212
|
+
useAnimatedNumberReaction,
|
|
213
|
+
useAnimatedNumberStyle,
|
|
214
|
+
useAnimatedNumbersStyle,
|
|
215
|
+
usePresence: import_use_presence.usePresence,
|
|
216
|
+
ResetPresence: import_use_presence.ResetPresence,
|
|
217
|
+
useAnimations: function(param) {
|
|
218
|
+
var { props, onTransition, style, componentState, presence, stateRef, useStyleEmitter } = param;
|
|
219
|
+
var _themeState_name;
|
|
220
|
+
var isDisabled = import_constants.isWeb && componentState.unmounted === true;
|
|
221
|
+
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
222
|
+
var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
|
|
223
|
+
var onTransitionRef = import_react.default.useRef(onTransition);
|
|
224
|
+
onTransitionRef.current = onTransition;
|
|
225
|
+
var emit = function(phase, cause, finished) {
|
|
226
|
+
var _onTransitionRef_current;
|
|
227
|
+
(_onTransitionRef_current = onTransitionRef.current) === null || _onTransitionRef_current === void 0 ? void 0 : _onTransitionRef_current.call(onTransitionRef, phase === "end" ? {
|
|
228
|
+
phase,
|
|
229
|
+
cause,
|
|
230
|
+
finished
|
|
231
|
+
} : {
|
|
232
|
+
phase,
|
|
233
|
+
cause
|
|
234
|
+
});
|
|
235
|
+
};
|
|
236
|
+
var [, themeState] = (0, import_web.useThemeWithState)({});
|
|
237
|
+
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"));
|
|
238
|
+
var animateStyles = import_react.default.useRef({});
|
|
239
|
+
var animatedTranforms = import_react.default.useRef([]);
|
|
240
|
+
var animationsState = import_react.default.useRef(/* @__PURE__ */ new WeakMap());
|
|
241
|
+
var pseudoActiveRef = import_react.default.useRef(false);
|
|
242
|
+
var exitCycleIdRef = import_react.default.useRef(0);
|
|
243
|
+
var exitCompletedRef = import_react.default.useRef(false);
|
|
244
|
+
var wasExitingRef = import_react.default.useRef(false);
|
|
245
|
+
var enterStartedRef = import_react.default.useRef(false);
|
|
246
|
+
var exitStartedRef = import_react.default.useRef(false);
|
|
247
|
+
var updateInFlightRef = import_react.default.useRef(false);
|
|
248
|
+
var updateCycleIdRef = import_react.default.useRef(0);
|
|
249
|
+
var prevStyleSigRef = import_react.default.useRef(null);
|
|
250
|
+
var justStartedExiting = isExiting && !wasExitingRef.current;
|
|
251
|
+
var justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
252
|
+
if (justStartedExiting) {
|
|
253
|
+
exitCycleIdRef.current++;
|
|
254
|
+
exitCompletedRef.current = false;
|
|
255
|
+
}
|
|
256
|
+
if (justStoppedExiting) {
|
|
257
|
+
exitCycleIdRef.current++;
|
|
258
|
+
}
|
|
259
|
+
var animateOnly = props.animateOnly || [];
|
|
260
|
+
var hasTransitionOnly = !!props.animateOnly;
|
|
261
|
+
var isEntering = !!componentState.unmounted;
|
|
262
|
+
var wasEnteringRef = import_react.default.useRef(isEntering);
|
|
263
|
+
var justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
264
|
+
import_react.default.useEffect(function() {
|
|
265
|
+
wasEnteringRef.current = isEntering;
|
|
266
|
+
});
|
|
267
|
+
var args = [
|
|
268
|
+
JSON.stringify(style),
|
|
269
|
+
componentState,
|
|
270
|
+
isExiting,
|
|
271
|
+
!!onTransition,
|
|
272
|
+
isDark,
|
|
273
|
+
justFinishedEntering,
|
|
274
|
+
hasTransitionOnly
|
|
275
|
+
];
|
|
276
|
+
var res = import_react.default.useMemo(function() {
|
|
277
|
+
var runners = [];
|
|
278
|
+
var completions = [];
|
|
279
|
+
var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
|
|
280
|
+
var nonAnimatedStyle = {};
|
|
281
|
+
var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, hasTransitionOnly ? animateOnly : void 0);
|
|
282
|
+
var seenAnimateKeys = /* @__PURE__ */ new Set();
|
|
283
|
+
var sawTransform = false;
|
|
284
|
+
var transformCount = 0;
|
|
285
|
+
for (var key in style) {
|
|
286
|
+
var rawVal = style[key];
|
|
287
|
+
var val = resolveDynamicValue(rawVal, isDark);
|
|
288
|
+
if (val === void 0) continue;
|
|
289
|
+
if (isDisabled) {
|
|
290
|
+
continue;
|
|
291
|
+
}
|
|
292
|
+
if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
|
|
293
|
+
nonAnimatedStyle[key] = val;
|
|
294
|
+
continue;
|
|
295
|
+
}
|
|
296
|
+
if (hasTransitionOnly && !animateOnly.includes(key)) {
|
|
297
|
+
nonAnimatedStyle[key] = val;
|
|
298
|
+
continue;
|
|
299
|
+
}
|
|
300
|
+
if (layoutStyleKey[key] && typeof val !== "number") {
|
|
301
|
+
nonAnimatedStyle[key] = val;
|
|
302
|
+
continue;
|
|
303
|
+
}
|
|
304
|
+
if (colorStyleKey[key] && !isAnimatableColor(val)) {
|
|
305
|
+
nonAnimatedStyle[key] = val;
|
|
306
|
+
continue;
|
|
307
|
+
}
|
|
308
|
+
if (key !== "transform") {
|
|
309
|
+
animateStyles.current[key] = update(key, animateStyles.current[key], val);
|
|
310
|
+
seenAnimateKeys.add(key);
|
|
311
|
+
continue;
|
|
312
|
+
}
|
|
313
|
+
if (!val) continue;
|
|
314
|
+
if (typeof val === "string") {
|
|
315
|
+
console.warn(`Warning: Tamagui can't animate string transforms yet!`);
|
|
316
|
+
continue;
|
|
317
|
+
}
|
|
318
|
+
sawTransform = true;
|
|
319
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
320
|
+
try {
|
|
321
|
+
for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
322
|
+
var transform = _step.value;
|
|
323
|
+
var _animatedTranforms_current_index;
|
|
324
|
+
if (!transform) continue;
|
|
325
|
+
var index = transformCount++;
|
|
326
|
+
var tkey = Object.keys(transform)[0];
|
|
327
|
+
var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
328
|
+
animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
|
|
329
|
+
animatedTranforms.current = [...animatedTranforms.current];
|
|
330
|
+
}
|
|
331
|
+
} catch (err) {
|
|
332
|
+
_didIteratorError = true;
|
|
333
|
+
_iteratorError = err;
|
|
334
|
+
} finally {
|
|
335
|
+
try {
|
|
336
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
337
|
+
_iterator.return();
|
|
338
|
+
}
|
|
339
|
+
} finally {
|
|
340
|
+
if (_didIteratorError) {
|
|
341
|
+
throw _iteratorError;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
|
|
347
|
+
for (var k in animateStyles.current) {
|
|
348
|
+
if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
|
|
349
|
+
}
|
|
350
|
+
if (!sawTransform) {
|
|
351
|
+
if (animatedTranforms.current.length) animatedTranforms.current = [];
|
|
352
|
+
} else if (animatedTranforms.current.length > transformCount) {
|
|
353
|
+
animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
var animatedTransformStyle = animatedTranforms.current.length > 0 ? { transform: animatedTranforms.current.map(function(r) {
|
|
357
|
+
var _animationsState_current_get;
|
|
358
|
+
var key2 = Object.keys(r)[0];
|
|
359
|
+
var val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
|
|
360
|
+
return { [key2]: val2 };
|
|
361
|
+
}) } : {};
|
|
362
|
+
var animatedStyle = {
|
|
363
|
+
...Object.fromEntries(Object.entries(animateStyles.current).map(function(param2) {
|
|
364
|
+
var [k2, v] = param2;
|
|
365
|
+
var _animationsState_current_get;
|
|
366
|
+
return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
|
|
367
|
+
})),
|
|
368
|
+
...animatedTransformStyle
|
|
369
|
+
};
|
|
370
|
+
return {
|
|
371
|
+
runners,
|
|
372
|
+
completions,
|
|
373
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
374
|
+
};
|
|
375
|
+
function update(key2, animated, valIn) {
|
|
376
|
+
var isColorStyleKey = colorStyleKey[key2];
|
|
377
|
+
var [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
|
|
378
|
+
var animateToValue = val2;
|
|
379
|
+
var value = animated || new import_react_native.Animated.Value(val2);
|
|
380
|
+
var curInterpolation = animationsState.current.get(value);
|
|
381
|
+
var interpolateArgs;
|
|
382
|
+
if (type) {
|
|
383
|
+
var _curInterpolation_current;
|
|
384
|
+
interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], val2, type);
|
|
385
|
+
animationsState.current.set(value, {
|
|
386
|
+
interpolation: value.interpolate(interpolateArgs),
|
|
387
|
+
current: val2
|
|
388
|
+
});
|
|
389
|
+
}
|
|
390
|
+
if (isColorStyleKey) {
|
|
391
|
+
animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
|
|
392
|
+
interpolateArgs = getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue);
|
|
393
|
+
animationsState.current.set(value, {
|
|
394
|
+
current: valIn,
|
|
395
|
+
interpolation: value.interpolate(interpolateArgs),
|
|
396
|
+
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
397
|
+
});
|
|
398
|
+
}
|
|
399
|
+
if (value) {
|
|
400
|
+
var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState);
|
|
401
|
+
var resolve;
|
|
402
|
+
var promise = new Promise(function(res2) {
|
|
403
|
+
resolve = res2;
|
|
404
|
+
});
|
|
405
|
+
completions.push(promise);
|
|
406
|
+
runners.push(function() {
|
|
407
|
+
value.stopAnimation();
|
|
408
|
+
function getAnimation() {
|
|
409
|
+
return import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
410
|
+
toValue: animateToValue,
|
|
411
|
+
...animationConfig,
|
|
412
|
+
useNativeDriver: useNativeDriverForNode
|
|
413
|
+
});
|
|
414
|
+
}
|
|
415
|
+
var animation = animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
|
|
416
|
+
animation.start(function(param2) {
|
|
417
|
+
var { finished } = param2;
|
|
418
|
+
if (finished || isExiting) {
|
|
419
|
+
resolve();
|
|
420
|
+
}
|
|
421
|
+
});
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
if (process.env.NODE_ENV === "development") {
|
|
425
|
+
if (props["debug"] === "verbose") {
|
|
426
|
+
console.info(" 💠 animate", key2, `from (${value["_value"]}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs);
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
return value;
|
|
430
|
+
}
|
|
431
|
+
}, args);
|
|
432
|
+
import_react.default.useEffect(function() {
|
|
433
|
+
wasExitingRef.current = isExiting;
|
|
434
|
+
});
|
|
435
|
+
(0, import_constants.useIsomorphicLayoutEffect)(function() {
|
|
436
|
+
if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
|
|
437
|
+
exitStartedRef.current = false;
|
|
438
|
+
emit("end", "exit", false);
|
|
439
|
+
}
|
|
440
|
+
}, [justStoppedExiting]);
|
|
441
|
+
(0, import_constants.useIsomorphicLayoutEffect)(function() {
|
|
442
|
+
res.runners.forEach(function(r) {
|
|
443
|
+
return r();
|
|
444
|
+
});
|
|
445
|
+
var cycleId = exitCycleIdRef.current;
|
|
446
|
+
var cause = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "update";
|
|
447
|
+
if (cause === "exit") {
|
|
448
|
+
if (enterStartedRef.current) {
|
|
449
|
+
enterStartedRef.current = false;
|
|
450
|
+
emit("end", "enter", false);
|
|
451
|
+
}
|
|
452
|
+
if (updateInFlightRef.current) {
|
|
453
|
+
updateInFlightRef.current = false;
|
|
454
|
+
updateCycleIdRef.current++;
|
|
455
|
+
emit("end", "update", false);
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
if (cause === "update") {
|
|
459
|
+
var sig = args[0];
|
|
460
|
+
if (prevStyleSigRef.current === null || prevStyleSigRef.current === sig) {
|
|
461
|
+
prevStyleSigRef.current = sig;
|
|
462
|
+
return;
|
|
463
|
+
}
|
|
464
|
+
prevStyleSigRef.current = sig;
|
|
465
|
+
if (res.completions.length === 0) return;
|
|
466
|
+
if (updateInFlightRef.current) {
|
|
467
|
+
emit("end", "update", false);
|
|
468
|
+
}
|
|
469
|
+
updateInFlightRef.current = true;
|
|
470
|
+
var uid = ++updateCycleIdRef.current;
|
|
471
|
+
emit("start", "update");
|
|
472
|
+
Promise.all(res.completions).then(function() {
|
|
473
|
+
if (uid !== updateCycleIdRef.current) return;
|
|
474
|
+
updateInFlightRef.current = false;
|
|
475
|
+
emit("end", "update", true);
|
|
476
|
+
});
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
479
|
+
prevStyleSigRef.current = args[0];
|
|
480
|
+
if (res.completions.length === 0) {
|
|
481
|
+
emit("start", cause);
|
|
482
|
+
emit("end", cause, true);
|
|
483
|
+
if (isExiting && !exitCompletedRef.current) {
|
|
484
|
+
exitCompletedRef.current = true;
|
|
485
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
486
|
+
}
|
|
487
|
+
return;
|
|
488
|
+
}
|
|
489
|
+
if (cause === "enter" && !enterStartedRef.current) {
|
|
490
|
+
enterStartedRef.current = true;
|
|
491
|
+
emit("start", "enter");
|
|
492
|
+
}
|
|
493
|
+
if (cause === "exit" && !exitStartedRef.current) {
|
|
494
|
+
exitStartedRef.current = true;
|
|
495
|
+
emit("start", "exit");
|
|
496
|
+
}
|
|
497
|
+
Promise.all(res.completions).then(function() {
|
|
498
|
+
if (isExiting && cycleId !== exitCycleIdRef.current) return;
|
|
499
|
+
if (isExiting && exitCompletedRef.current) return;
|
|
500
|
+
if (isExiting) {
|
|
501
|
+
if (exitStartedRef.current) {
|
|
502
|
+
exitStartedRef.current = false;
|
|
503
|
+
emit("end", "exit", true);
|
|
504
|
+
}
|
|
505
|
+
exitCompletedRef.current = true;
|
|
506
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
507
|
+
} else if (enterStartedRef.current) {
|
|
508
|
+
enterStartedRef.current = false;
|
|
509
|
+
emit("end", "enter", true);
|
|
510
|
+
}
|
|
511
|
+
});
|
|
512
|
+
}, args);
|
|
513
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, _effectiveTransition, pseudoActive) {
|
|
514
|
+
pseudoActiveRef.current = pseudoActive === true;
|
|
515
|
+
var runners = [];
|
|
516
|
+
var seenAnimateKeys = /* @__PURE__ */ new Set();
|
|
517
|
+
var transformCount = 0;
|
|
518
|
+
var animatedShapeChanged = false;
|
|
519
|
+
var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some(function(key2) {
|
|
520
|
+
return layoutStyleKey[key2];
|
|
521
|
+
});
|
|
522
|
+
for (var key in nextStyle) {
|
|
523
|
+
var rawVal = nextStyle[key];
|
|
524
|
+
var val = resolveDynamicValue(rawVal, isDark);
|
|
525
|
+
if (val === void 0) continue;
|
|
526
|
+
if (key === "transform" && Array.isArray(val)) {
|
|
527
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
528
|
+
try {
|
|
529
|
+
for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
530
|
+
var transform = _step.value;
|
|
531
|
+
var _animatedTranforms_current_index;
|
|
532
|
+
if (!transform) continue;
|
|
533
|
+
var index = transformCount++;
|
|
534
|
+
var tkey = Object.keys(transform)[0];
|
|
535
|
+
var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
536
|
+
if (!currentTransform) animatedShapeChanged = true;
|
|
537
|
+
animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
|
|
538
|
+
}
|
|
539
|
+
} catch (err) {
|
|
540
|
+
_didIteratorError = true;
|
|
541
|
+
_iteratorError = err;
|
|
542
|
+
} finally {
|
|
543
|
+
try {
|
|
544
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
545
|
+
_iterator.return();
|
|
546
|
+
}
|
|
547
|
+
} finally {
|
|
548
|
+
if (_didIteratorError) {
|
|
549
|
+
throw _iteratorError;
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
|
|
554
|
+
if (layoutStyleKey[key] && typeof val !== "number") continue;
|
|
555
|
+
if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
|
|
556
|
+
if (!animateStyles.current[key]) animatedShapeChanged = true;
|
|
557
|
+
animateStyles.current[key] = update(key, animateStyles.current[key], val);
|
|
558
|
+
seenAnimateKeys.add(key);
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
for (var key1 in animateStyles.current) {
|
|
562
|
+
if (!seenAnimateKeys.has(key1)) {
|
|
563
|
+
delete animateStyles.current[key1];
|
|
564
|
+
animatedShapeChanged = true;
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
if (animatedTranforms.current.length > transformCount) {
|
|
568
|
+
animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
|
|
569
|
+
animatedShapeChanged = true;
|
|
570
|
+
}
|
|
571
|
+
runners.forEach(function(r) {
|
|
572
|
+
return r();
|
|
573
|
+
});
|
|
574
|
+
if (animatedShapeChanged && stateRef.current.nextState) {
|
|
575
|
+
var _stateRef_current_baseSetStateShallow, _stateRef_current;
|
|
576
|
+
(_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);
|
|
577
|
+
}
|
|
578
|
+
function update(key2, animated, valIn) {
|
|
579
|
+
var isColor = colorStyleKey[key2];
|
|
580
|
+
var [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
|
|
581
|
+
var animateToValue = numVal;
|
|
582
|
+
var value = animated || new import_react_native.Animated.Value(numVal);
|
|
583
|
+
var curInterpolation = animationsState.current.get(value);
|
|
584
|
+
if (type) {
|
|
585
|
+
var _curInterpolation_current;
|
|
586
|
+
animationsState.current.set(value, {
|
|
587
|
+
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)),
|
|
588
|
+
current: numVal
|
|
589
|
+
});
|
|
590
|
+
}
|
|
591
|
+
if (isColor) {
|
|
592
|
+
animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
|
|
593
|
+
animationsState.current.set(value, {
|
|
594
|
+
current: valIn,
|
|
595
|
+
interpolation: value.interpolate(getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue)),
|
|
596
|
+
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
597
|
+
});
|
|
598
|
+
}
|
|
599
|
+
var animationConfig = getAnimationConfig(key2, animations, props.transition, "default");
|
|
600
|
+
runners.push(function() {
|
|
601
|
+
value.stopAnimation();
|
|
602
|
+
var anim = import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
603
|
+
toValue: animateToValue,
|
|
604
|
+
...animationConfig,
|
|
605
|
+
useNativeDriver: useNativeDriverForNode
|
|
606
|
+
});
|
|
607
|
+
(animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), anim]) : anim).start();
|
|
608
|
+
});
|
|
609
|
+
return value;
|
|
610
|
+
}
|
|
611
|
+
});
|
|
612
|
+
if (process.env.NODE_ENV === "development") {
|
|
613
|
+
if (props["debug"] === "verbose") {
|
|
614
|
+
console.info(`Animated`, {
|
|
615
|
+
response: res,
|
|
616
|
+
inputStyle: style,
|
|
617
|
+
isExiting
|
|
618
|
+
});
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
return res;
|
|
622
|
+
}
|
|
623
|
+
};
|
|
574
624
|
}
|
|
575
625
|
function getColorInterpolated(currentColor, nextColor, animateToValue) {
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
626
|
+
var inputRange = [0, 1];
|
|
627
|
+
var outputRange = [currentColor ? currentColor : nextColor, nextColor];
|
|
628
|
+
if (animateToValue === 0) {
|
|
629
|
+
outputRange.reverse();
|
|
630
|
+
}
|
|
631
|
+
return {
|
|
632
|
+
inputRange,
|
|
633
|
+
outputRange
|
|
634
|
+
};
|
|
585
635
|
}
|
|
586
636
|
function getInterpolated(current, next) {
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
637
|
+
var postfix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "deg";
|
|
638
|
+
if (next === current) {
|
|
639
|
+
current = next - 1e-9;
|
|
640
|
+
}
|
|
641
|
+
var inputRange = [current, next];
|
|
642
|
+
var outputRange = [`${current}${postfix}`, `${next}${postfix}`];
|
|
643
|
+
if (next < current) {
|
|
644
|
+
inputRange.reverse();
|
|
645
|
+
outputRange.reverse();
|
|
646
|
+
}
|
|
647
|
+
return {
|
|
648
|
+
inputRange,
|
|
649
|
+
outputRange
|
|
650
|
+
};
|
|
601
651
|
}
|
|
602
652
|
function getAnimationConfig(key, animations, transition) {
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
...extraConf
|
|
631
|
-
};
|
|
653
|
+
var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
|
|
654
|
+
var normalized = (0, import_animation_helpers.normalizeTransition)(transition);
|
|
655
|
+
var shortKey = transformShorthands[key];
|
|
656
|
+
var _normalized_properties_key;
|
|
657
|
+
var propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey];
|
|
658
|
+
var animationType = null;
|
|
659
|
+
var extraConf = {};
|
|
660
|
+
if (typeof propAnimation === "string") {
|
|
661
|
+
animationType = propAnimation;
|
|
662
|
+
} else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
|
|
663
|
+
animationType = propAnimation.type || (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
664
|
+
extraConf = propAnimation;
|
|
665
|
+
} else {
|
|
666
|
+
animationType = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
667
|
+
}
|
|
668
|
+
if (normalized.delay && !extraConf.delay) {
|
|
669
|
+
extraConf = {
|
|
670
|
+
...extraConf,
|
|
671
|
+
delay: normalized.delay
|
|
672
|
+
};
|
|
673
|
+
}
|
|
674
|
+
var found = animationType ? animations[animationType] : {};
|
|
675
|
+
return {
|
|
676
|
+
...found,
|
|
677
|
+
...normalized.config,
|
|
678
|
+
...extraConf
|
|
679
|
+
};
|
|
632
680
|
}
|
|
633
681
|
var transformShorthands = {
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
682
|
+
x: "translateX",
|
|
683
|
+
y: "translateY",
|
|
684
|
+
translateX: "x",
|
|
685
|
+
translateY: "y"
|
|
638
686
|
};
|
|
639
687
|
function getValue(input) {
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
688
|
+
var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
689
|
+
if (typeof input !== "string") {
|
|
690
|
+
return [input];
|
|
691
|
+
}
|
|
692
|
+
var _input_match;
|
|
693
|
+
var [_, number, after] = (_input_match = input.match(/(-?(?:\d+\.?\d*|\.\d+))(deg|%|px)?/)) !== null && _input_match !== void 0 ? _input_match : [];
|
|
694
|
+
return [+number, after];
|
|
647
695
|
}
|
|
696
|
+
|
|
648
697
|
//# sourceMappingURL=createAnimations.native.js.map
|