@tamagui/animations-reanimated 1.0.1-beta.18 → 1.0.1-beta.181
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.js +114 -89
- package/dist/cjs/createAnimations.js.map +3 -3
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/polyfill.js +1 -0
- package/dist/cjs/polyfill.js.map +1 -1
- package/dist/cjs/useAnimatedNumber.js +33 -0
- package/dist/cjs/useAnimatedNumber.js.map +7 -0
- package/dist/esm/createAnimations.js +111 -72
- package/dist/esm/createAnimations.js.map +3 -3
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/polyfill.js +0 -0
- package/dist/esm/polyfill.js.map +0 -0
- package/dist/esm/useAnimatedNumber.js +11 -0
- package/dist/esm/useAnimatedNumber.js.map +7 -0
- package/dist/jsx/createAnimations.js +120 -81
- package/dist/jsx/createAnimations.js.map +7 -0
- package/dist/jsx/index.js +2 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/polyfill.js +1 -0
- package/dist/jsx/polyfill.js.map +7 -0
- package/dist/jsx/useAnimatedNumber.js +11 -0
- package/dist/jsx/useAnimatedNumber.js.map +7 -0
- package/package.json +9 -6
- package/src/createAnimations.tsx +419 -0
- package/src/index.tsx +4 -0
- package/src/polyfill.ts +4 -0
- package/src/useAnimatedNumber.tsx +73 -0
- package/types/index.d.ts +1 -0
- package/types/useAnimatedNumber.d.ts +2 -0
- package/types/createAnimations.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/polyfill.d.ts.map +0 -1
|
@@ -1,27 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
8
|
var __export = (target, all) => {
|
|
26
9
|
for (var name in all)
|
|
27
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -34,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
34
17
|
}
|
|
35
18
|
return to;
|
|
36
19
|
};
|
|
37
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
38
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
39
25
|
var createAnimations_exports = {};
|
|
40
26
|
__export(createAnimations_exports, {
|
|
@@ -42,8 +28,15 @@ __export(createAnimations_exports, {
|
|
|
42
28
|
});
|
|
43
29
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
44
30
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
31
|
+
var import_core = require("@tamagui/core");
|
|
45
32
|
var import_react = require("react");
|
|
33
|
+
var import_react_native = require("react-native");
|
|
46
34
|
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
|
|
35
|
+
var import_useAnimatedNumber = require("./useAnimatedNumber");
|
|
36
|
+
const animatedStyleKey = {
|
|
37
|
+
transform: true,
|
|
38
|
+
opacity: true
|
|
39
|
+
};
|
|
47
40
|
function createAnimations(animations) {
|
|
48
41
|
const AnimatedView = import_react_native_reanimated.default.View;
|
|
49
42
|
const AnimatedText = import_react_native_reanimated.default.Text;
|
|
@@ -54,136 +47,170 @@ function createAnimations(animations) {
|
|
|
54
47
|
animations,
|
|
55
48
|
View: AnimatedView,
|
|
56
49
|
Text: AnimatedText,
|
|
50
|
+
NumberView: import_react_native.Animated.View,
|
|
51
|
+
useAnimatedNumber: import_useAnimatedNumber.useAnimatedNumber,
|
|
52
|
+
useAnimatedNumberReaction: import_useAnimatedNumber.useAnimatedNumberReaction,
|
|
53
|
+
useAnimatedNumberStyle: import_useAnimatedNumber.useAnimatedNumberStyle,
|
|
57
54
|
useAnimations: (props, helpers) => {
|
|
58
55
|
var _a, _b;
|
|
59
56
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
60
|
-
const [
|
|
61
|
-
const presence = (0, import_react.useContext)(import_animate_presence.
|
|
57
|
+
const [isPresent, sendExitComplete] = (0, import_animate_presence.usePresence)();
|
|
58
|
+
const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
|
|
62
59
|
const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (_a = staticConfig.variantsParsed) == null ? void 0 : _a[presence.exitVariant]) == null ? void 0 : _b.true) || pseudos.exitStyle : pseudos.exitStyle;
|
|
63
|
-
const reanimatedOnDidAnimated = (0,
|
|
64
|
-
onDidAnimate == null ? void 0 : onDidAnimate(...
|
|
65
|
-
}
|
|
60
|
+
const reanimatedOnDidAnimated = (0, import_core.useEvent)((...args) => {
|
|
61
|
+
onDidAnimate == null ? void 0 : onDidAnimate(...args);
|
|
62
|
+
});
|
|
63
|
+
const isExiting = isPresent === false;
|
|
64
|
+
const isEntering = !state.mounted;
|
|
66
65
|
const all = getStyle({
|
|
66
|
+
isExiting,
|
|
67
67
|
isEntering,
|
|
68
68
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
69
69
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
70
70
|
});
|
|
71
71
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
};
|
|
76
|
-
for (const key of Object.keys(all)) {
|
|
77
|
-
if (animatedStyleKey[key]) {
|
|
78
|
-
animatedStyles[key] = all[key];
|
|
72
|
+
for (const key2 of Object.keys(all)) {
|
|
73
|
+
if (animatedStyleKey[key2]) {
|
|
74
|
+
animatedStyles[key2] = all[key2];
|
|
79
75
|
} else {
|
|
80
|
-
nonAnimatedStyle[
|
|
76
|
+
nonAnimatedStyle[key2] = all[key2];
|
|
81
77
|
}
|
|
82
78
|
}
|
|
83
|
-
const
|
|
84
|
-
|
|
79
|
+
const animatedString = JSON.stringify(animatedStyles);
|
|
80
|
+
const key = animatedString + JSON.stringify([
|
|
85
81
|
state.mounted,
|
|
86
82
|
state.hover,
|
|
87
83
|
state.press,
|
|
88
84
|
state.pressIn,
|
|
89
85
|
state.focus,
|
|
90
86
|
delay,
|
|
91
|
-
|
|
87
|
+
isPresent,
|
|
92
88
|
onDidAnimate,
|
|
93
|
-
reanimatedOnDidAnimated,
|
|
94
89
|
presence == null ? void 0 : presence.exitVariant,
|
|
95
90
|
presence == null ? void 0 : presence.enterVariant
|
|
96
|
-
];
|
|
91
|
+
]);
|
|
92
|
+
const callback = (isExiting2, exitingStyleProps, key2, value) => {
|
|
93
|
+
"worklet";
|
|
94
|
+
return (completed, current) => {
|
|
95
|
+
"worklet";
|
|
96
|
+
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key2, completed, current, {
|
|
97
|
+
attemptedValue: value
|
|
98
|
+
});
|
|
99
|
+
if (isExiting2) {
|
|
100
|
+
exitingStyleProps[key2] = false;
|
|
101
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
102
|
+
if (!areStylesExiting) {
|
|
103
|
+
if (sendExitComplete) {
|
|
104
|
+
(0, import_react_native_reanimated.runOnJS)(sendExitComplete)();
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
};
|
|
97
110
|
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
98
|
-
|
|
111
|
+
"worklet";
|
|
112
|
+
const style = JSON.parse(animatedString);
|
|
99
113
|
const final = {
|
|
100
114
|
transform: []
|
|
101
115
|
};
|
|
102
|
-
const
|
|
116
|
+
const isExiting2 = isPresent === false;
|
|
103
117
|
const exitingStyleProps = {};
|
|
104
118
|
if (exitStyle) {
|
|
105
|
-
for (const
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
const value = style[key];
|
|
111
|
-
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
112
|
-
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
113
|
-
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
114
|
-
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
115
|
-
attemptedValue: value
|
|
116
|
-
});
|
|
117
|
-
if (isExiting) {
|
|
118
|
-
exitingStyleProps[key] = false;
|
|
119
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
120
|
-
if (!areStylesExiting) {
|
|
121
|
-
if (safeToUnmount) {
|
|
122
|
-
(0, import_react_native_reanimated.runOnJS)(safeToUnmount)();
|
|
123
|
-
}
|
|
119
|
+
for (const key2 in exitStyle) {
|
|
120
|
+
if (key2 === "transform") {
|
|
121
|
+
for (const attr of exitStyle[key2]) {
|
|
122
|
+
const tkey = Object.keys(attr)[0];
|
|
123
|
+
exitingStyleProps[tkey] = true;
|
|
124
124
|
}
|
|
125
|
+
} else {
|
|
126
|
+
exitingStyleProps[key2] = true;
|
|
125
127
|
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
for (const key2 in style) {
|
|
131
|
+
const value = style[key2];
|
|
132
|
+
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
133
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(
|
|
134
|
+
key2,
|
|
135
|
+
animationConfig,
|
|
136
|
+
props.animateOnly
|
|
137
|
+
);
|
|
138
|
+
const { delayMs = null } = animationDelay(key2, animationConfig, delay);
|
|
139
|
+
if (!animation) {
|
|
140
|
+
console.warn("No animation for", key2, "in", style);
|
|
141
|
+
continue;
|
|
142
|
+
}
|
|
143
|
+
if (!config) {
|
|
144
|
+
console.warn("No animation config for", key2, "in", style);
|
|
145
|
+
continue;
|
|
146
|
+
}
|
|
147
|
+
if (key2 === "transform") {
|
|
129
148
|
if (!Array.isArray(value)) {
|
|
130
149
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
131
150
|
continue;
|
|
132
151
|
}
|
|
133
152
|
for (const transformObject of value) {
|
|
134
|
-
const
|
|
135
|
-
const transformValue = transformObject[
|
|
136
|
-
let finalValue2 = animation(
|
|
153
|
+
const key3 = Object.keys(transformObject)[0];
|
|
154
|
+
const transformValue = transformObject[key3];
|
|
155
|
+
let finalValue2 = animation(
|
|
156
|
+
transformValue,
|
|
157
|
+
config,
|
|
158
|
+
callback(isExiting2, exitingStyleProps, key3, value)
|
|
159
|
+
);
|
|
137
160
|
if (shouldRepeat) {
|
|
138
161
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
139
162
|
}
|
|
140
163
|
final["transform"].push({
|
|
141
|
-
[
|
|
164
|
+
[key3]: finalValue2
|
|
142
165
|
});
|
|
143
166
|
}
|
|
144
167
|
continue;
|
|
145
168
|
}
|
|
146
169
|
if (typeof value === "object") {
|
|
147
|
-
final[
|
|
170
|
+
final[key2] = {};
|
|
148
171
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
149
|
-
let finalValue2 = animation(
|
|
172
|
+
let finalValue2 = animation(
|
|
173
|
+
value,
|
|
174
|
+
config,
|
|
175
|
+
callback(isExiting2, exitingStyleProps, key2, value)
|
|
176
|
+
);
|
|
150
177
|
if (shouldRepeat) {
|
|
151
178
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
152
179
|
}
|
|
153
180
|
if (delayMs != null) {
|
|
154
|
-
final[
|
|
181
|
+
final[key2][innerStyleKey] = (0, import_react_native_reanimated.withDelay)(delayMs, finalValue2);
|
|
155
182
|
} else {
|
|
156
|
-
final[
|
|
183
|
+
final[key2][innerStyleKey] = finalValue2;
|
|
157
184
|
}
|
|
158
185
|
}
|
|
159
186
|
continue;
|
|
160
187
|
}
|
|
161
|
-
let finalValue = animation(
|
|
188
|
+
let finalValue = animation(
|
|
189
|
+
value,
|
|
190
|
+
config,
|
|
191
|
+
callback(isExiting2, exitingStyleProps, key2, value)
|
|
192
|
+
);
|
|
162
193
|
if (shouldRepeat) {
|
|
163
194
|
finalValue = (0, import_react_native_reanimated.withRepeat)(finalValue, repeatCount, repeatReverse);
|
|
164
195
|
}
|
|
165
196
|
if (delayMs != null && typeof delayMs === "number") {
|
|
166
|
-
final[
|
|
197
|
+
final[key2] = (0, import_react_native_reanimated.withDelay)(delayMs, finalValue);
|
|
167
198
|
} else {
|
|
168
|
-
final[
|
|
199
|
+
final[key2] = finalValue;
|
|
169
200
|
}
|
|
170
201
|
}
|
|
171
|
-
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
172
|
-
console.log("animation style", final);
|
|
173
|
-
}
|
|
174
202
|
return final;
|
|
175
|
-
},
|
|
203
|
+
}, [key]);
|
|
176
204
|
return (0, import_react.useMemo)(() => {
|
|
177
205
|
return {
|
|
178
206
|
style: [nonAnimatedStyle, animatedStyle]
|
|
179
207
|
};
|
|
180
|
-
},
|
|
208
|
+
}, [key]);
|
|
181
209
|
}
|
|
182
210
|
};
|
|
183
211
|
}
|
|
184
|
-
__name(createAnimations, "createAnimations");
|
|
185
212
|
function getAnimationConfig(key, animations, animation) {
|
|
186
|
-
|
|
213
|
+
"worklet";
|
|
187
214
|
if (typeof animation === "string") {
|
|
188
215
|
return animations[animation];
|
|
189
216
|
}
|
|
@@ -191,7 +218,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
191
218
|
let extraConf;
|
|
192
219
|
if (Array.isArray(animation)) {
|
|
193
220
|
type = animation[0];
|
|
194
|
-
const conf =
|
|
221
|
+
const conf = animation[1] && animation[1][key];
|
|
195
222
|
if (conf) {
|
|
196
223
|
if (typeof conf === "string") {
|
|
197
224
|
type = conf;
|
|
@@ -209,11 +236,12 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
209
236
|
if (!found) {
|
|
210
237
|
throw new Error(`No animation of type "${type}" for key "${key}"`);
|
|
211
238
|
}
|
|
212
|
-
return
|
|
239
|
+
return {
|
|
240
|
+
...found,
|
|
241
|
+
...extraConf,
|
|
213
242
|
type: found.type
|
|
214
|
-
}
|
|
243
|
+
};
|
|
215
244
|
}
|
|
216
|
-
__name(getAnimationConfig, "getAnimationConfig");
|
|
217
245
|
function animationDelay(key, animation, defaultDelay) {
|
|
218
246
|
"worklet";
|
|
219
247
|
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
@@ -225,8 +253,7 @@ function animationDelay(key, animation, defaultDelay) {
|
|
|
225
253
|
delayMs: animation[key].delayMs
|
|
226
254
|
};
|
|
227
255
|
}
|
|
228
|
-
|
|
229
|
-
const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
256
|
+
const isColor = (styleKey) => {
|
|
230
257
|
"worklet";
|
|
231
258
|
return [
|
|
232
259
|
"backgroundColor",
|
|
@@ -239,14 +266,14 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
239
266
|
"borderTopColor",
|
|
240
267
|
"color"
|
|
241
268
|
].includes(styleKey);
|
|
242
|
-
}
|
|
269
|
+
};
|
|
243
270
|
function getAnimation(key, animationConfig, animateOnly) {
|
|
244
271
|
"worklet";
|
|
245
272
|
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
246
273
|
return {};
|
|
247
274
|
}
|
|
248
275
|
let repeatCount = 0;
|
|
249
|
-
|
|
276
|
+
const repeatReverse = animationConfig.repeatReverse || false;
|
|
250
277
|
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
251
278
|
if (isColor(key) || key === "opacity") {
|
|
252
279
|
animationType = "timing";
|
|
@@ -271,7 +298,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
271
298
|
deceleration: 2
|
|
272
299
|
};
|
|
273
300
|
} else {
|
|
274
|
-
console.warn("no type of animation?", animationType);
|
|
275
301
|
animation = import_react_native_reanimated.withSpring;
|
|
276
302
|
}
|
|
277
303
|
return {
|
|
@@ -282,7 +308,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
282
308
|
shouldRepeat: !!repeatCount
|
|
283
309
|
};
|
|
284
310
|
}
|
|
285
|
-
__name(getAnimation, "getAnimation");
|
|
286
311
|
// Annotate the CommonJS export names for ESM import in node:
|
|
287
312
|
0 && (module.exports = {
|
|
288
313
|
createAnimations
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimatePresenceContext, useEntering } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationKeys, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useEffect, useMemo } from 'react'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n// | ({ type: 'transition' } & TransitionProps)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isEntering, safeToUnmount] = useEntering()\n const presence = useContext(AnimatePresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const all = getStyle({\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n const animatedStyleKey = {\n transform: true,\n opacity: true,\n }\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isEntering,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n const animatedStyle = useAnimatedStyle(() => {\n const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isEntering === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key of Object.keys(exitStyle)) {\n exitingStyleProps[key] = true\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation) as any\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {\n runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (safeToUnmount) {\n runOnJS(safeToUnmount)()\n }\n }\n }\n }\n\n let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(transformValue, config, callback)\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(value, config, callback)\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(value, config, callback)\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('animation style', final)\n }\n\n return final\n }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1]?.[key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n let repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: any\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n console.warn('no type of animation?', animationType)\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/core'\nimport { useContext, useMemo } from 'react'\n// until we fix Sheet\nimport { Animated as RNAnimated } from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nimport {\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n} from './useAnimatedNumber'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n\n // temp\n // @ts-ignore\n NumberView: RNAnimated.View,\n\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>((...args) => {\n onDidAnimate?.(...args)\n })\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const animatedString = JSON.stringify(animatedStyles)\n const key =\n animatedString +\n JSON.stringify([\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ])\n\n const callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any\n ) => {\n 'worklet'\n return (completed: boolean | undefined, current: any) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n\n // getting issues with native unless this :/\n const style = JSON.parse(animatedString)\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n // eslint-disable-next-line no-console\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n // eslint-disable-next-line no-console\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n // eslint-disable-next-line no-console\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n return final\n }, [key])\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key])\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\n 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n const repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Animated", "RNAnimated", "key", "isExiting", "finalValue"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -16,4 +17,5 @@ var src_exports = {};
|
|
|
16
17
|
module.exports = __toCommonJS(src_exports);
|
|
17
18
|
var import_polyfill = require("./polyfill");
|
|
18
19
|
__reExport(src_exports, require("./createAnimations"), module.exports);
|
|
20
|
+
__reExport(src_exports, require("./useAnimatedNumber"), module.exports);
|
|
19
21
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\nexport * from './useAnimatedNumber'\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sBAAO;AAEP,wBAAc,+BAFd;AAGA,wBAAc,gCAHd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/polyfill.js
CHANGED
package/dist/cjs/polyfill.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/polyfill.ts"],
|
|
4
4
|
"sourcesContent": ["// for SSR\nif (typeof requestAnimationFrame === 'undefined') {\n globalThis['requestAnimationFrame'] = setImmediate\n}\n"],
|
|
5
|
-
"mappings": "AACA,IAAI,OAAO,0BAA0B,aAAa;AAChD,aAAW,2BAA2B;AACxC;",
|
|
5
|
+
"mappings": ";AACA,IAAI,OAAO,0BAA0B,aAAa;AAChD,aAAW,2BAA2B;AACxC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useAnimatedNumber_exports = {};
|
|
20
|
+
__export(useAnimatedNumber_exports, {
|
|
21
|
+
useAnimatedNumber: () => import_animations_react_native.useAnimatedNumber,
|
|
22
|
+
useAnimatedNumberReaction: () => import_animations_react_native.useAnimatedNumberReaction,
|
|
23
|
+
useAnimatedNumberStyle: () => import_animations_react_native.useAnimatedNumberStyle
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(useAnimatedNumber_exports);
|
|
26
|
+
var import_animations_react_native = require("@tamagui/animations-react-native");
|
|
27
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
28
|
+
0 && (module.exports = {
|
|
29
|
+
useAnimatedNumber,
|
|
30
|
+
useAnimatedNumberReaction,
|
|
31
|
+
useAnimatedNumberStyle
|
|
32
|
+
});
|
|
33
|
+
//# sourceMappingURL=useAnimatedNumber.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useAnimatedNumber.tsx"],
|
|
4
|
+
"sourcesContent": ["// there's some bug with reanimated likely related to worklets\n// for now to not regress, we require react-native Animated alongside\nexport {\n useAnimatedNumber,\n useAnimatedNumberStyle,\n useAnimatedNumberReaction,\n} from '@tamagui/animations-react-native'\n\n// import { UniversalAnimatedNumber } from '@tamagui/core'\n// import {\n// SharedValue,\n// cancelAnimation,\n// useAnimatedReaction,\n// useAnimatedStyle,\n// useSharedValue,\n// withSpring,\n// withTiming,\n// } from 'react-native-reanimated'\n\n// type ReanimatedAnimatedNumber = SharedValue<number>\n\n// export function useAnimatedNumber(\n// initial: number\n// ): UniversalAnimatedNumber<ReanimatedAnimatedNumber> {\n// const val = useSharedValue(initial)\n// return {\n// getInstance() {\n// return val\n// },\n// getValue() {\n// return val.value\n// },\n// stop() {\n// cancelAnimation(val)\n// },\n// setValue(next: number, config = { type: 'spring' }) {\n// if (config.type === 'direct') {\n// val.value = next\n// } else if (config.type === 'spring') {\n// val.value = withSpring(next, config)\n// } else {\n// val.value = withTiming(next, config)\n// }\n// },\n// }\n// }\n\n// export function useAnimatedNumberReaction(\n// value: UniversalAnimatedNumber<ReanimatedAnimatedNumber>,\n// cb: (current: number) => void\n// ) {\n// useAnimatedReaction(\n// () => {\n// 'worklet'\n// return value.getValue()\n// },\n// (result, prev) => {\n// 'worklet'\n// if (result !== prev) cb(result)\n// },\n// [value]\n// )\n// }\n\n// export function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<ReanimatedAnimatedNumber>>(\n// value: V,\n// getStyle: (value: number) => any\n// ) {\n// return useAnimatedStyle(() => {\n// 'worklet'\n// return getStyle(value.getValue())\n// })\n// }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qCAIO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|