@tamagui/animations-react-native 1.14.1 → 1.14.2
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 +326 -1
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/cjs/index.js +19 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/polyfill.js +4 -1
- package/dist/cjs/polyfill.js.map +1 -1
- package/dist/esm/createAnimations.js +302 -1
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.mjs +302 -1
- package/dist/esm/createAnimations.mjs.map +2 -2
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +2 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/polyfill.js +3 -1
- package/dist/esm/polyfill.js.map +1 -1
- package/dist/esm/polyfill.mjs +3 -1
- package/dist/esm/polyfill.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -1,2 +1,327 @@
|
|
|
1
|
-
"use strict";
|
|
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 createAnimations_exports = {};
|
|
20
|
+
__export(createAnimations_exports, {
|
|
21
|
+
AnimatedText: () => AnimatedText,
|
|
22
|
+
AnimatedView: () => AnimatedView,
|
|
23
|
+
createAnimations: () => createAnimations,
|
|
24
|
+
useAnimatedNumber: () => useAnimatedNumber,
|
|
25
|
+
useAnimatedNumberReaction: () => useAnimatedNumberReaction,
|
|
26
|
+
useAnimatedNumberStyle: () => useAnimatedNumberStyle
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(createAnimations_exports);
|
|
29
|
+
var import_use_presence = require("@tamagui/use-presence");
|
|
30
|
+
var import_web = require("@tamagui/web");
|
|
31
|
+
var import_react = require("react");
|
|
32
|
+
var import_react_native = require("react-native");
|
|
33
|
+
const animatedStyleKey = {
|
|
34
|
+
transform: true,
|
|
35
|
+
opacity: true
|
|
36
|
+
};
|
|
37
|
+
const AnimatedView = import_react_native.Animated.View;
|
|
38
|
+
const AnimatedText = import_react_native.Animated.Text;
|
|
39
|
+
function useAnimatedNumber(initial) {
|
|
40
|
+
const state = (0, import_web.useSafeRef)(
|
|
41
|
+
null
|
|
42
|
+
);
|
|
43
|
+
if (!state.current) {
|
|
44
|
+
state.current = {
|
|
45
|
+
composite: null,
|
|
46
|
+
val: new import_react_native.Animated.Value(initial),
|
|
47
|
+
strategy: { type: "spring" }
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
return {
|
|
51
|
+
getInstance() {
|
|
52
|
+
return state.current.val;
|
|
53
|
+
},
|
|
54
|
+
getValue() {
|
|
55
|
+
return state.current.val["_value"];
|
|
56
|
+
},
|
|
57
|
+
stop() {
|
|
58
|
+
var _a;
|
|
59
|
+
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
60
|
+
state.current.composite = null;
|
|
61
|
+
},
|
|
62
|
+
setValue(next, { type, ...config } = { type: "spring" }) {
|
|
63
|
+
var _a, _b;
|
|
64
|
+
const val = state.current.val;
|
|
65
|
+
if (type === "direct") {
|
|
66
|
+
val.setValue(next);
|
|
67
|
+
} else if (type === "spring") {
|
|
68
|
+
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
69
|
+
const composite = import_react_native.Animated.spring(val, {
|
|
70
|
+
...config,
|
|
71
|
+
toValue: next,
|
|
72
|
+
useNativeDriver: !import_web.isWeb
|
|
73
|
+
});
|
|
74
|
+
composite.start();
|
|
75
|
+
state.current.composite = composite;
|
|
76
|
+
} else {
|
|
77
|
+
(_b = state.current.composite) == null ? void 0 : _b.stop();
|
|
78
|
+
const composite = import_react_native.Animated.timing(val, {
|
|
79
|
+
...config,
|
|
80
|
+
toValue: next,
|
|
81
|
+
useNativeDriver: !import_web.isWeb
|
|
82
|
+
});
|
|
83
|
+
composite.start();
|
|
84
|
+
state.current.composite = composite;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function useAnimatedNumberReaction({
|
|
90
|
+
value
|
|
91
|
+
}, onValue) {
|
|
92
|
+
const onChange = (0, import_web.useEvent)((current) => {
|
|
93
|
+
onValue(current.value);
|
|
94
|
+
});
|
|
95
|
+
(0, import_react.useEffect)(() => {
|
|
96
|
+
const id = value.getInstance().addListener(onChange);
|
|
97
|
+
return () => {
|
|
98
|
+
value.getInstance().removeListener(id);
|
|
99
|
+
};
|
|
100
|
+
}, [value, onChange]);
|
|
101
|
+
}
|
|
102
|
+
function useAnimatedNumberStyle(value, getStyle) {
|
|
103
|
+
return getStyle(value.getInstance());
|
|
104
|
+
}
|
|
105
|
+
function createAnimations(animations) {
|
|
106
|
+
AnimatedView["displayName"] = "AnimatedView";
|
|
107
|
+
AnimatedText["displayName"] = "AnimatedText";
|
|
108
|
+
return {
|
|
109
|
+
isReactNative: true,
|
|
110
|
+
animations,
|
|
111
|
+
View: AnimatedView,
|
|
112
|
+
Text: AnimatedText,
|
|
113
|
+
useAnimatedNumber,
|
|
114
|
+
useAnimatedNumberReaction,
|
|
115
|
+
useAnimatedNumberStyle,
|
|
116
|
+
usePresence: import_use_presence.usePresence,
|
|
117
|
+
useAnimations: ({ props, onDidAnimate, style, state, presence }) => {
|
|
118
|
+
const isExiting = (presence == null ? void 0 : presence[0]) === false;
|
|
119
|
+
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
120
|
+
const mergedStyles = style;
|
|
121
|
+
const animateStyles = (0, import_web.useSafeRef)({});
|
|
122
|
+
const animatedTranforms = (0, import_web.useSafeRef)([]);
|
|
123
|
+
const animationsState = (0, import_web.useSafeRef)(
|
|
124
|
+
/* @__PURE__ */ new WeakMap()
|
|
125
|
+
);
|
|
126
|
+
const args = [
|
|
127
|
+
JSON.stringify(mergedStyles),
|
|
128
|
+
JSON.stringify(state),
|
|
129
|
+
isExiting,
|
|
130
|
+
!!onDidAnimate
|
|
131
|
+
];
|
|
132
|
+
const res = (0, import_react.useMemo)(() => {
|
|
133
|
+
var _a;
|
|
134
|
+
const runners = [];
|
|
135
|
+
const completions = [];
|
|
136
|
+
const nonAnimatedStyle = {};
|
|
137
|
+
for (const key in mergedStyles) {
|
|
138
|
+
const val = mergedStyles[key];
|
|
139
|
+
if (!animatedStyleKey[key]) {
|
|
140
|
+
nonAnimatedStyle[key] = val;
|
|
141
|
+
continue;
|
|
142
|
+
}
|
|
143
|
+
if (key !== "transform") {
|
|
144
|
+
animateStyles.current[key] = update(key, animateStyles.current[key], val);
|
|
145
|
+
continue;
|
|
146
|
+
}
|
|
147
|
+
if (!val)
|
|
148
|
+
continue;
|
|
149
|
+
for (const [index, transform] of val.entries()) {
|
|
150
|
+
if (!transform)
|
|
151
|
+
continue;
|
|
152
|
+
const tkey = Object.keys(transform)[0];
|
|
153
|
+
const currentTransform = (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey];
|
|
154
|
+
animatedTranforms.current[index] = {
|
|
155
|
+
[tkey]: update(tkey, currentTransform, transform[tkey])
|
|
156
|
+
};
|
|
157
|
+
animatedTranforms.current = [...animatedTranforms.current];
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
const animatedStyle = {
|
|
161
|
+
...Object.fromEntries(
|
|
162
|
+
Object.entries(animateStyles.current).map(([k, v]) => {
|
|
163
|
+
var _a2;
|
|
164
|
+
return [
|
|
165
|
+
k,
|
|
166
|
+
((_a2 = animationsState.current.get(v)) == null ? void 0 : _a2.interopolation) || v
|
|
167
|
+
];
|
|
168
|
+
})
|
|
169
|
+
),
|
|
170
|
+
transform: animatedTranforms.current.map((r) => {
|
|
171
|
+
var _a2;
|
|
172
|
+
const key = Object.keys(r)[0];
|
|
173
|
+
const val = ((_a2 = animationsState.current.get(r[key])) == null ? void 0 : _a2.interopolation) || r[key];
|
|
174
|
+
return { [key]: val };
|
|
175
|
+
})
|
|
176
|
+
};
|
|
177
|
+
return {
|
|
178
|
+
runners,
|
|
179
|
+
completions,
|
|
180
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
181
|
+
};
|
|
182
|
+
function update(key, animated, valIn) {
|
|
183
|
+
const [val, type] = getValue(valIn);
|
|
184
|
+
const value = animated || new import_react_native.Animated.Value(val);
|
|
185
|
+
let interpolateArgs;
|
|
186
|
+
if (type) {
|
|
187
|
+
const curInterpolation = animationsState.current.get(value);
|
|
188
|
+
interpolateArgs = getInterpolated(
|
|
189
|
+
(curInterpolation == null ? void 0 : curInterpolation.current) ?? value["_value"],
|
|
190
|
+
val,
|
|
191
|
+
type
|
|
192
|
+
);
|
|
193
|
+
animationsState.current.set(value, {
|
|
194
|
+
interopolation: value.interpolate(interpolateArgs),
|
|
195
|
+
current: val
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
if (value) {
|
|
199
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
200
|
+
let resolve;
|
|
201
|
+
const promise = new Promise((res2) => {
|
|
202
|
+
resolve = res2;
|
|
203
|
+
});
|
|
204
|
+
completions.push(promise);
|
|
205
|
+
runners.push(() => {
|
|
206
|
+
value.stopAnimation();
|
|
207
|
+
function getAnimation() {
|
|
208
|
+
return import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
209
|
+
toValue: val,
|
|
210
|
+
useNativeDriver: !import_web.isWeb,
|
|
211
|
+
...animationConfig
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
const animation = animationConfig.delay ? import_react_native.Animated.sequence([
|
|
215
|
+
import_react_native.Animated.delay(animationConfig.delay),
|
|
216
|
+
getAnimation()
|
|
217
|
+
]) : getAnimation();
|
|
218
|
+
animation.start(({ finished }) => {
|
|
219
|
+
if (finished) {
|
|
220
|
+
resolve();
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
if (process.env.NODE_ENV === "development") {
|
|
226
|
+
if (props["debug"]) {
|
|
227
|
+
console.log(" \u{1F4A0} animate", key, `from ${value["_value"]} to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
return value;
|
|
231
|
+
}
|
|
232
|
+
}, args);
|
|
233
|
+
(0, import_web.useIsomorphicLayoutEffect)(() => {
|
|
234
|
+
res.runners.forEach((r) => r());
|
|
235
|
+
let cancel = false;
|
|
236
|
+
Promise.all(res.completions).then(() => {
|
|
237
|
+
if (cancel)
|
|
238
|
+
return;
|
|
239
|
+
onDidAnimate == null ? void 0 : onDidAnimate();
|
|
240
|
+
if (isExiting) {
|
|
241
|
+
sendExitComplete == null ? void 0 : sendExitComplete();
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
return () => {
|
|
245
|
+
cancel = true;
|
|
246
|
+
};
|
|
247
|
+
}, args);
|
|
248
|
+
if (process.env.NODE_ENV === "development") {
|
|
249
|
+
if (props["debug"] === "verbose") {
|
|
250
|
+
console.log(`Returning animated`, res);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
return res;
|
|
254
|
+
}
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
function getInterpolated(current, next, postfix = "deg") {
|
|
258
|
+
if (next === current) {
|
|
259
|
+
current = next - 1e-9;
|
|
260
|
+
}
|
|
261
|
+
const inputRange = [current, next];
|
|
262
|
+
const outputRange = [`${current}${postfix}`, `${next}${postfix}`];
|
|
263
|
+
if (next < current) {
|
|
264
|
+
inputRange.reverse();
|
|
265
|
+
outputRange.reverse();
|
|
266
|
+
}
|
|
267
|
+
return {
|
|
268
|
+
inputRange,
|
|
269
|
+
outputRange
|
|
270
|
+
};
|
|
271
|
+
}
|
|
272
|
+
function getAnimationConfig(key, animations, animation) {
|
|
273
|
+
var _a, _b;
|
|
274
|
+
if (typeof animation === "string") {
|
|
275
|
+
return animations[animation];
|
|
276
|
+
}
|
|
277
|
+
let type = "";
|
|
278
|
+
let extraConf;
|
|
279
|
+
const shortKey = transformShorthands[key];
|
|
280
|
+
if (Array.isArray(animation)) {
|
|
281
|
+
type = animation[0];
|
|
282
|
+
const conf = ((_a = animation[1]) == null ? void 0 : _a[key]) ?? ((_b = animation[1]) == null ? void 0 : _b[shortKey]);
|
|
283
|
+
if (conf) {
|
|
284
|
+
if (typeof conf === "string") {
|
|
285
|
+
type = conf;
|
|
286
|
+
} else {
|
|
287
|
+
type = conf.type || type;
|
|
288
|
+
extraConf = conf;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
} else {
|
|
292
|
+
const val = (animation == null ? void 0 : animation[key]) ?? (animation == null ? void 0 : animation[shortKey]);
|
|
293
|
+
type = val == null ? void 0 : val.type;
|
|
294
|
+
extraConf = val;
|
|
295
|
+
}
|
|
296
|
+
const found = animations[type];
|
|
297
|
+
if (!found) {
|
|
298
|
+
throw new Error(`No animation of type "${type}" for key "${key}"`);
|
|
299
|
+
}
|
|
300
|
+
return {
|
|
301
|
+
...found,
|
|
302
|
+
...extraConf
|
|
303
|
+
};
|
|
304
|
+
}
|
|
305
|
+
const transformShorthands = {
|
|
306
|
+
x: "translateX",
|
|
307
|
+
y: "translateY",
|
|
308
|
+
translateX: "x",
|
|
309
|
+
translateY: "y"
|
|
310
|
+
};
|
|
311
|
+
function getValue(input) {
|
|
312
|
+
if (typeof input !== "string") {
|
|
313
|
+
return [input];
|
|
314
|
+
}
|
|
315
|
+
const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? [];
|
|
316
|
+
return [+number, after];
|
|
317
|
+
}
|
|
318
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
319
|
+
0 && (module.exports = {
|
|
320
|
+
AnimatedText,
|
|
321
|
+
AnimatedView,
|
|
322
|
+
createAnimations,
|
|
323
|
+
useAnimatedNumber,
|
|
324
|
+
useAnimatedNumberReaction,
|
|
325
|
+
useAnimatedNumberStyle
|
|
326
|
+
});
|
|
2
327
|
//# sourceMappingURL=createAnimations.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
4
|
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport const AnimatedView = Animated.View\nexport const AnimatedText = Animated.Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\n null as any as {\n val: Animated.Value\n composite: Animated.CompositeAnimation | null\n strategy: AnimatedNumberStrategy\n }\n )\n if (!state.current) {\n state.current = {\n composite: null,\n val: new Animated.Value(initial),\n strategy: { type: 'spring' },\n }\n }\n\n return {\n getInstance() {\n return state.current.val\n },\n getValue() {\n return state.current.val['_value']\n },\n stop() {\n state.current.composite?.stop()\n state.current.composite = null\n },\n setValue(next: number, { type, ...config } = { type: 'spring' }) {\n const val = state.current.val\n if (type === 'direct') {\n val.setValue(next)\n } else if (type === 'spring') {\n state.current.composite?.stop()\n const composite = Animated.spring(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n } else {\n state.current.composite?.stop()\n const composite = Animated.timing(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n }\n },\n }\n}\n\nexport function useAnimatedNumberReaction(\n {\n value,\n }: {\n value: UniversalAnimatedNumber<Animated.Value>\n },\n onValue: (current: number) => void\n) {\n const onChange = useEvent((current) => {\n onValue(current.value)\n })\n\n useEffect(() => {\n const id = value.getInstance().addListener(onChange)\n return () => {\n value.getInstance().removeListener(id)\n }\n }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends AnimationsConfig>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n const animationsState = useSafeRef(\n new WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >()\n )\n\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n\n let resolve\n const promise = new Promise<void>((res) => {\n resolve = res\n })\n completions.push(promise)\n\n runners.push(() => {\n value.stopAnimation()\n\n function getAnimation() {\n return Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n })\n }\n\n const animation = animationConfig.delay\n ? Animated.sequence([\n Animated.delay(animationConfig.delay),\n getAnimation(),\n ])\n : getAnimation()\n\n animation.start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug'] === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n const shortKey = transformShorthands[key]\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1]?.[key] ?? animation[1]?.[shortKey]\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] ?? animation?.[shortKey]\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 }\n}\n\n// try both combos\nconst transformShorthands = {\n x: 'translateX',\n y: 'translateY',\n translateX: 'x',\n translateY: 'y',\n}\n\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_a", "res"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,20 @@
|
|
|
1
|
-
"use strict";
|
|
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 __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
+
var src_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(src_exports);
|
|
18
|
+
var import_polyfill = require("./polyfill");
|
|
19
|
+
__reExport(src_exports, require("./createAnimations"), module.exports);
|
|
2
20
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sBAAO;AAEP,wBAAc,+BAFd;",
|
|
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": "
|
|
5
|
+
"mappings": ";AACA,IAAI,OAAO,0BAA0B,aAAa;AAChD,aAAW,uBAAuB,IAAI;AACxC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|