@tamagui/animations-reanimated 1.0.1-beta.70 → 1.0.1-beta.73
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 +51 -32
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +52 -34
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +52 -34
- package/package.json +5 -4
- package/src/createAnimations.tsx +75 -29
- package/types/createAnimations.d.ts +0 -0
- package/types/createAnimations.d.ts.map +1 -1
- package/types/index.d.ts +0 -0
- package/types/index.d.ts.map +0 -0
- package/types/polyfill.d.ts +0 -0
- package/types/polyfill.d.ts.map +0 -0
|
@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
24
|
var __export = (target, all) => {
|
|
26
25
|
for (var name in all)
|
|
27
26
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -57,13 +56,16 @@ function createAnimations(animations) {
|
|
|
57
56
|
useAnimations: (props, helpers) => {
|
|
58
57
|
var _a, _b;
|
|
59
58
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
60
|
-
const [
|
|
61
|
-
const presence = (0, import_react.useContext)(import_animate_presence.
|
|
59
|
+
const [isPresent, sendExitComplete] = (0, import_animate_presence.usePresence)();
|
|
60
|
+
const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
|
|
62
61
|
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
62
|
const reanimatedOnDidAnimated = (0, import_react.useCallback)((...args2) => {
|
|
64
63
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
65
64
|
}, [onDidAnimate]);
|
|
65
|
+
const isExiting = isPresent === false;
|
|
66
|
+
const isEntering = !state.mounted;
|
|
66
67
|
const all = getStyle({
|
|
68
|
+
isExiting,
|
|
67
69
|
isEntering,
|
|
68
70
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
69
71
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
@@ -88,43 +90,64 @@ function createAnimations(animations) {
|
|
|
88
90
|
state.pressIn,
|
|
89
91
|
state.focus,
|
|
90
92
|
delay,
|
|
91
|
-
|
|
93
|
+
isPresent,
|
|
92
94
|
onDidAnimate,
|
|
93
95
|
reanimatedOnDidAnimated,
|
|
94
96
|
presence == null ? void 0 : presence.exitVariant,
|
|
95
97
|
presence == null ? void 0 : presence.enterVariant
|
|
96
98
|
];
|
|
99
|
+
const callback = (isExiting2, exitingStyleProps, key, value) => {
|
|
100
|
+
"worklet";
|
|
101
|
+
const callback2 = (completed, current) => {
|
|
102
|
+
"worklet";
|
|
103
|
+
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, current, {
|
|
104
|
+
attemptedValue: value
|
|
105
|
+
});
|
|
106
|
+
if (isExiting2) {
|
|
107
|
+
exitingStyleProps[key] = false;
|
|
108
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
109
|
+
if (!areStylesExiting) {
|
|
110
|
+
if (sendExitComplete) {
|
|
111
|
+
(0, import_react_native_reanimated.runOnJS)(sendExitComplete)();
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
return callback2;
|
|
117
|
+
};
|
|
97
118
|
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
119
|
+
"worklet";
|
|
98
120
|
const style = animatedStyles;
|
|
99
121
|
const final = {
|
|
100
122
|
transform: []
|
|
101
123
|
};
|
|
102
|
-
const
|
|
124
|
+
const isExiting2 = isPresent === false;
|
|
103
125
|
const exitingStyleProps = {};
|
|
104
126
|
if (exitStyle) {
|
|
105
|
-
for (const key
|
|
106
|
-
|
|
127
|
+
for (const key in exitStyle) {
|
|
128
|
+
if (key === "transform") {
|
|
129
|
+
for (const attr of exitStyle[key]) {
|
|
130
|
+
const tkey = Object.keys(attr)[0];
|
|
131
|
+
exitingStyleProps[tkey] = true;
|
|
132
|
+
}
|
|
133
|
+
} else {
|
|
134
|
+
exitingStyleProps[key] = true;
|
|
135
|
+
}
|
|
107
136
|
}
|
|
108
137
|
}
|
|
109
138
|
for (const key in style) {
|
|
110
139
|
const value = style[key];
|
|
111
140
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
112
141
|
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
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}, "callback");
|
|
127
142
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
143
|
+
if (!animation) {
|
|
144
|
+
console.warn("No animation for", key, "in", style);
|
|
145
|
+
continue;
|
|
146
|
+
}
|
|
147
|
+
if (!config) {
|
|
148
|
+
console.warn("No animation config for", key, "in", style);
|
|
149
|
+
continue;
|
|
150
|
+
}
|
|
128
151
|
if (key === "transform") {
|
|
129
152
|
if (!Array.isArray(value)) {
|
|
130
153
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -133,7 +156,7 @@ function createAnimations(animations) {
|
|
|
133
156
|
for (const transformObject of value) {
|
|
134
157
|
const key2 = Object.keys(transformObject)[0];
|
|
135
158
|
const transformValue = transformObject[key2];
|
|
136
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
159
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting2, exitingStyleProps, key2, value));
|
|
137
160
|
if (shouldRepeat) {
|
|
138
161
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
139
162
|
}
|
|
@@ -146,7 +169,7 @@ function createAnimations(animations) {
|
|
|
146
169
|
if (typeof value === "object") {
|
|
147
170
|
final[key] = {};
|
|
148
171
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
149
|
-
let finalValue2 = animation(value, config, callback);
|
|
172
|
+
let finalValue2 = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
150
173
|
if (shouldRepeat) {
|
|
151
174
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
152
175
|
}
|
|
@@ -158,7 +181,7 @@ function createAnimations(animations) {
|
|
|
158
181
|
}
|
|
159
182
|
continue;
|
|
160
183
|
}
|
|
161
|
-
let finalValue = animation(value, config, callback);
|
|
184
|
+
let finalValue = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
162
185
|
if (shouldRepeat) {
|
|
163
186
|
finalValue = (0, import_react_native_reanimated.withRepeat)(finalValue, repeatCount, repeatReverse);
|
|
164
187
|
}
|
|
@@ -181,9 +204,8 @@ function createAnimations(animations) {
|
|
|
181
204
|
}
|
|
182
205
|
};
|
|
183
206
|
}
|
|
184
|
-
__name(createAnimations, "createAnimations");
|
|
185
207
|
function getAnimationConfig(key, animations, animation) {
|
|
186
|
-
|
|
208
|
+
"worklet";
|
|
187
209
|
if (typeof animation === "string") {
|
|
188
210
|
return animations[animation];
|
|
189
211
|
}
|
|
@@ -191,7 +213,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
191
213
|
let extraConf;
|
|
192
214
|
if (Array.isArray(animation)) {
|
|
193
215
|
type = animation[0];
|
|
194
|
-
const conf =
|
|
216
|
+
const conf = animation[1] && animation[1][key];
|
|
195
217
|
if (conf) {
|
|
196
218
|
if (typeof conf === "string") {
|
|
197
219
|
type = conf;
|
|
@@ -213,7 +235,6 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
213
235
|
type: found.type
|
|
214
236
|
});
|
|
215
237
|
}
|
|
216
|
-
__name(getAnimationConfig, "getAnimationConfig");
|
|
217
238
|
function animationDelay(key, animation, defaultDelay) {
|
|
218
239
|
"worklet";
|
|
219
240
|
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
@@ -225,8 +246,7 @@ function animationDelay(key, animation, defaultDelay) {
|
|
|
225
246
|
delayMs: animation[key].delayMs
|
|
226
247
|
};
|
|
227
248
|
}
|
|
228
|
-
|
|
229
|
-
const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
249
|
+
const isColor = (styleKey) => {
|
|
230
250
|
"worklet";
|
|
231
251
|
return [
|
|
232
252
|
"backgroundColor",
|
|
@@ -239,7 +259,7 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
239
259
|
"borderTopColor",
|
|
240
260
|
"color"
|
|
241
261
|
].includes(styleKey);
|
|
242
|
-
}
|
|
262
|
+
};
|
|
243
263
|
function getAnimation(key, animationConfig, animateOnly) {
|
|
244
264
|
"worklet";
|
|
245
265
|
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
@@ -282,7 +302,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
282
302
|
shouldRepeat: !!repeatCount
|
|
283
303
|
};
|
|
284
304
|
}
|
|
285
|
-
__name(getAnimation, "getAnimation");
|
|
286
305
|
// Annotate the CommonJS export names for ESM import in node:
|
|
287
306
|
0 && (module.exports = {
|
|
288
307
|
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, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, 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\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": "
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\nimport Animated, {\n AnimationCallback,\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\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 [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 = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 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 isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\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 const callback: AnimationCallback = (completed, current) => {\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 return callback\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n const style = animatedStyles\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 let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\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(\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 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 '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 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: 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 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import { AnimatePresenceContext, useEntering } from "@tamagui/animate-presence";
|
|
1
|
+
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
4
2
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
3
|
import Animated, {
|
|
6
4
|
runOnJS,
|
|
@@ -24,13 +22,16 @@ function createAnimations(animations) {
|
|
|
24
22
|
useAnimations: (props, helpers) => {
|
|
25
23
|
var _a, _b;
|
|
26
24
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [
|
|
28
|
-
const presence = useContext(
|
|
25
|
+
const [isPresent, sendExitComplete] = usePresence();
|
|
26
|
+
const presence = useContext(PresenceContext);
|
|
29
27
|
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;
|
|
30
28
|
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
29
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
32
30
|
}, [onDidAnimate]);
|
|
31
|
+
const isExiting = isPresent === false;
|
|
32
|
+
const isEntering = !state.mounted;
|
|
33
33
|
const all = getStyle({
|
|
34
|
+
isExiting,
|
|
34
35
|
isEntering,
|
|
35
36
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
37
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
@@ -55,43 +56,64 @@ function createAnimations(animations) {
|
|
|
55
56
|
state.pressIn,
|
|
56
57
|
state.focus,
|
|
57
58
|
delay,
|
|
58
|
-
|
|
59
|
+
isPresent,
|
|
59
60
|
onDidAnimate,
|
|
60
61
|
reanimatedOnDidAnimated,
|
|
61
62
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
63
|
presence == null ? void 0 : presence.enterVariant
|
|
63
64
|
];
|
|
65
|
+
const callback = (isExiting2, exitingStyleProps, key, value) => {
|
|
66
|
+
"worklet";
|
|
67
|
+
const callback2 = (completed, current) => {
|
|
68
|
+
"worklet";
|
|
69
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
70
|
+
attemptedValue: value
|
|
71
|
+
});
|
|
72
|
+
if (isExiting2) {
|
|
73
|
+
exitingStyleProps[key] = false;
|
|
74
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
75
|
+
if (!areStylesExiting) {
|
|
76
|
+
if (sendExitComplete) {
|
|
77
|
+
runOnJS(sendExitComplete)();
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
return callback2;
|
|
83
|
+
};
|
|
64
84
|
const animatedStyle = useAnimatedStyle(() => {
|
|
85
|
+
"worklet";
|
|
65
86
|
const style = animatedStyles;
|
|
66
87
|
const final = {
|
|
67
88
|
transform: []
|
|
68
89
|
};
|
|
69
|
-
const
|
|
90
|
+
const isExiting2 = isPresent === false;
|
|
70
91
|
const exitingStyleProps = {};
|
|
71
92
|
if (exitStyle) {
|
|
72
|
-
for (const key
|
|
73
|
-
|
|
93
|
+
for (const key in exitStyle) {
|
|
94
|
+
if (key === "transform") {
|
|
95
|
+
for (const attr of exitStyle[key]) {
|
|
96
|
+
const tkey = Object.keys(attr)[0];
|
|
97
|
+
exitingStyleProps[tkey] = true;
|
|
98
|
+
}
|
|
99
|
+
} else {
|
|
100
|
+
exitingStyleProps[key] = true;
|
|
101
|
+
}
|
|
74
102
|
}
|
|
75
103
|
}
|
|
76
104
|
for (const key in style) {
|
|
77
105
|
const value = style[key];
|
|
78
106
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
107
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
80
|
-
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
81
|
-
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
82
|
-
attemptedValue: value
|
|
83
|
-
});
|
|
84
|
-
if (isExiting) {
|
|
85
|
-
exitingStyleProps[key] = false;
|
|
86
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
87
|
-
if (!areStylesExiting) {
|
|
88
|
-
if (safeToUnmount) {
|
|
89
|
-
runOnJS(safeToUnmount)();
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}, "callback");
|
|
94
108
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
109
|
+
if (!animation) {
|
|
110
|
+
console.warn("No animation for", key, "in", style);
|
|
111
|
+
continue;
|
|
112
|
+
}
|
|
113
|
+
if (!config) {
|
|
114
|
+
console.warn("No animation config for", key, "in", style);
|
|
115
|
+
continue;
|
|
116
|
+
}
|
|
95
117
|
if (key === "transform") {
|
|
96
118
|
if (!Array.isArray(value)) {
|
|
97
119
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -100,7 +122,7 @@ function createAnimations(animations) {
|
|
|
100
122
|
for (const transformObject of value) {
|
|
101
123
|
const key2 = Object.keys(transformObject)[0];
|
|
102
124
|
const transformValue = transformObject[key2];
|
|
103
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
125
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting2, exitingStyleProps, key2, value));
|
|
104
126
|
if (shouldRepeat) {
|
|
105
127
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
128
|
}
|
|
@@ -113,7 +135,7 @@ function createAnimations(animations) {
|
|
|
113
135
|
if (typeof value === "object") {
|
|
114
136
|
final[key] = {};
|
|
115
137
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(value, config, callback);
|
|
138
|
+
let finalValue2 = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
117
139
|
if (shouldRepeat) {
|
|
118
140
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
141
|
}
|
|
@@ -125,7 +147,7 @@ function createAnimations(animations) {
|
|
|
125
147
|
}
|
|
126
148
|
continue;
|
|
127
149
|
}
|
|
128
|
-
let finalValue = animation(value, config, callback);
|
|
150
|
+
let finalValue = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
129
151
|
if (shouldRepeat) {
|
|
130
152
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
153
|
}
|
|
@@ -148,9 +170,8 @@ function createAnimations(animations) {
|
|
|
148
170
|
}
|
|
149
171
|
};
|
|
150
172
|
}
|
|
151
|
-
__name(createAnimations, "createAnimations");
|
|
152
173
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
174
|
+
"worklet";
|
|
154
175
|
if (typeof animation === "string") {
|
|
155
176
|
return animations[animation];
|
|
156
177
|
}
|
|
@@ -158,7 +179,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
179
|
let extraConf;
|
|
159
180
|
if (Array.isArray(animation)) {
|
|
160
181
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
182
|
+
const conf = animation[1] && animation[1][key];
|
|
162
183
|
if (conf) {
|
|
163
184
|
if (typeof conf === "string") {
|
|
164
185
|
type = conf;
|
|
@@ -182,7 +203,6 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
182
203
|
type: found.type
|
|
183
204
|
};
|
|
184
205
|
}
|
|
185
|
-
__name(getAnimationConfig, "getAnimationConfig");
|
|
186
206
|
function animationDelay(key, animation, defaultDelay) {
|
|
187
207
|
"worklet";
|
|
188
208
|
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
@@ -194,8 +214,7 @@ function animationDelay(key, animation, defaultDelay) {
|
|
|
194
214
|
delayMs: animation[key].delayMs
|
|
195
215
|
};
|
|
196
216
|
}
|
|
197
|
-
|
|
198
|
-
const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
217
|
+
const isColor = (styleKey) => {
|
|
199
218
|
"worklet";
|
|
200
219
|
return [
|
|
201
220
|
"backgroundColor",
|
|
@@ -208,7 +227,7 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
208
227
|
"borderTopColor",
|
|
209
228
|
"color"
|
|
210
229
|
].includes(styleKey);
|
|
211
|
-
}
|
|
230
|
+
};
|
|
212
231
|
function getAnimation(key, animationConfig, animateOnly) {
|
|
213
232
|
"worklet";
|
|
214
233
|
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
@@ -251,7 +270,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
251
270
|
shouldRepeat: !!repeatCount
|
|
252
271
|
};
|
|
253
272
|
}
|
|
254
|
-
__name(getAnimation, "getAnimation");
|
|
255
273
|
export {
|
|
256
274
|
createAnimations
|
|
257
275
|
};
|
|
@@ -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, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, 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\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": "
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\nimport Animated, {\n AnimationCallback,\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\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 [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 = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 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 isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\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 const callback: AnimationCallback = (completed, current) => {\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 return callback\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n const style = animatedStyles\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 let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\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(\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 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 '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 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: 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 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import { AnimatePresenceContext, useEntering } from "@tamagui/animate-presence";
|
|
1
|
+
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
4
2
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
3
|
import Animated, {
|
|
6
4
|
runOnJS,
|
|
@@ -24,13 +22,16 @@ function createAnimations(animations) {
|
|
|
24
22
|
useAnimations: (props, helpers) => {
|
|
25
23
|
var _a, _b;
|
|
26
24
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [
|
|
28
|
-
const presence = useContext(
|
|
25
|
+
const [isPresent, sendExitComplete] = usePresence();
|
|
26
|
+
const presence = useContext(PresenceContext);
|
|
29
27
|
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;
|
|
30
28
|
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
29
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
32
30
|
}, [onDidAnimate]);
|
|
31
|
+
const isExiting = isPresent === false;
|
|
32
|
+
const isEntering = !state.mounted;
|
|
33
33
|
const all = getStyle({
|
|
34
|
+
isExiting,
|
|
34
35
|
isEntering,
|
|
35
36
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
37
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
@@ -55,43 +56,64 @@ function createAnimations(animations) {
|
|
|
55
56
|
state.pressIn,
|
|
56
57
|
state.focus,
|
|
57
58
|
delay,
|
|
58
|
-
|
|
59
|
+
isPresent,
|
|
59
60
|
onDidAnimate,
|
|
60
61
|
reanimatedOnDidAnimated,
|
|
61
62
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
63
|
presence == null ? void 0 : presence.enterVariant
|
|
63
64
|
];
|
|
65
|
+
const callback = (isExiting2, exitingStyleProps, key, value) => {
|
|
66
|
+
"worklet";
|
|
67
|
+
const callback2 = (completed, current) => {
|
|
68
|
+
"worklet";
|
|
69
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
70
|
+
attemptedValue: value
|
|
71
|
+
});
|
|
72
|
+
if (isExiting2) {
|
|
73
|
+
exitingStyleProps[key] = false;
|
|
74
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
75
|
+
if (!areStylesExiting) {
|
|
76
|
+
if (sendExitComplete) {
|
|
77
|
+
runOnJS(sendExitComplete)();
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
return callback2;
|
|
83
|
+
};
|
|
64
84
|
const animatedStyle = useAnimatedStyle(() => {
|
|
85
|
+
"worklet";
|
|
65
86
|
const style = animatedStyles;
|
|
66
87
|
const final = {
|
|
67
88
|
transform: []
|
|
68
89
|
};
|
|
69
|
-
const
|
|
90
|
+
const isExiting2 = isPresent === false;
|
|
70
91
|
const exitingStyleProps = {};
|
|
71
92
|
if (exitStyle) {
|
|
72
|
-
for (const key
|
|
73
|
-
|
|
93
|
+
for (const key in exitStyle) {
|
|
94
|
+
if (key === "transform") {
|
|
95
|
+
for (const attr of exitStyle[key]) {
|
|
96
|
+
const tkey = Object.keys(attr)[0];
|
|
97
|
+
exitingStyleProps[tkey] = true;
|
|
98
|
+
}
|
|
99
|
+
} else {
|
|
100
|
+
exitingStyleProps[key] = true;
|
|
101
|
+
}
|
|
74
102
|
}
|
|
75
103
|
}
|
|
76
104
|
for (const key in style) {
|
|
77
105
|
const value = style[key];
|
|
78
106
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
107
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
80
|
-
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
81
|
-
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
82
|
-
attemptedValue: value
|
|
83
|
-
});
|
|
84
|
-
if (isExiting) {
|
|
85
|
-
exitingStyleProps[key] = false;
|
|
86
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
87
|
-
if (!areStylesExiting) {
|
|
88
|
-
if (safeToUnmount) {
|
|
89
|
-
runOnJS(safeToUnmount)();
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}, "callback");
|
|
94
108
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
109
|
+
if (!animation) {
|
|
110
|
+
console.warn("No animation for", key, "in", style);
|
|
111
|
+
continue;
|
|
112
|
+
}
|
|
113
|
+
if (!config) {
|
|
114
|
+
console.warn("No animation config for", key, "in", style);
|
|
115
|
+
continue;
|
|
116
|
+
}
|
|
95
117
|
if (key === "transform") {
|
|
96
118
|
if (!Array.isArray(value)) {
|
|
97
119
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -100,7 +122,7 @@ function createAnimations(animations) {
|
|
|
100
122
|
for (const transformObject of value) {
|
|
101
123
|
const key2 = Object.keys(transformObject)[0];
|
|
102
124
|
const transformValue = transformObject[key2];
|
|
103
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
125
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting2, exitingStyleProps, key2, value));
|
|
104
126
|
if (shouldRepeat) {
|
|
105
127
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
128
|
}
|
|
@@ -113,7 +135,7 @@ function createAnimations(animations) {
|
|
|
113
135
|
if (typeof value === "object") {
|
|
114
136
|
final[key] = {};
|
|
115
137
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(value, config, callback);
|
|
138
|
+
let finalValue2 = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
117
139
|
if (shouldRepeat) {
|
|
118
140
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
141
|
}
|
|
@@ -125,7 +147,7 @@ function createAnimations(animations) {
|
|
|
125
147
|
}
|
|
126
148
|
continue;
|
|
127
149
|
}
|
|
128
|
-
let finalValue = animation(value, config, callback);
|
|
150
|
+
let finalValue = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
129
151
|
if (shouldRepeat) {
|
|
130
152
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
153
|
}
|
|
@@ -148,9 +170,8 @@ function createAnimations(animations) {
|
|
|
148
170
|
}
|
|
149
171
|
};
|
|
150
172
|
}
|
|
151
|
-
__name(createAnimations, "createAnimations");
|
|
152
173
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
174
|
+
"worklet";
|
|
154
175
|
if (typeof animation === "string") {
|
|
155
176
|
return animations[animation];
|
|
156
177
|
}
|
|
@@ -158,7 +179,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
179
|
let extraConf;
|
|
159
180
|
if (Array.isArray(animation)) {
|
|
160
181
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
182
|
+
const conf = animation[1] && animation[1][key];
|
|
162
183
|
if (conf) {
|
|
163
184
|
if (typeof conf === "string") {
|
|
164
185
|
type = conf;
|
|
@@ -182,7 +203,6 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
182
203
|
type: found.type
|
|
183
204
|
};
|
|
184
205
|
}
|
|
185
|
-
__name(getAnimationConfig, "getAnimationConfig");
|
|
186
206
|
function animationDelay(key, animation, defaultDelay) {
|
|
187
207
|
"worklet";
|
|
188
208
|
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
@@ -194,8 +214,7 @@ function animationDelay(key, animation, defaultDelay) {
|
|
|
194
214
|
delayMs: animation[key].delayMs
|
|
195
215
|
};
|
|
196
216
|
}
|
|
197
|
-
|
|
198
|
-
const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
217
|
+
const isColor = (styleKey) => {
|
|
199
218
|
"worklet";
|
|
200
219
|
return [
|
|
201
220
|
"backgroundColor",
|
|
@@ -208,7 +227,7 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
208
227
|
"borderTopColor",
|
|
209
228
|
"color"
|
|
210
229
|
].includes(styleKey);
|
|
211
|
-
}
|
|
230
|
+
};
|
|
212
231
|
function getAnimation(key, animationConfig, animateOnly) {
|
|
213
232
|
"worklet";
|
|
214
233
|
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
@@ -251,7 +270,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
251
270
|
shouldRepeat: !!repeatCount
|
|
252
271
|
};
|
|
253
272
|
}
|
|
254
|
-
__name(getAnimation, "getAnimation");
|
|
255
273
|
export {
|
|
256
274
|
createAnimations
|
|
257
275
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-reanimated",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.73",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
|
+
"sideEffects": true,
|
|
5
6
|
"license": "MIT",
|
|
6
7
|
"types": "./types/index.d.ts",
|
|
7
8
|
"main": "dist/cjs",
|
|
@@ -13,12 +14,12 @@
|
|
|
13
14
|
"dist"
|
|
14
15
|
],
|
|
15
16
|
"dependencies": {
|
|
16
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
17
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
17
|
+
"@tamagui/animate-presence": "^1.0.1-beta.73",
|
|
18
|
+
"@tamagui/core": "^1.0.1-beta.73",
|
|
18
19
|
"react-native-reanimated": "~2.8.0"
|
|
19
20
|
},
|
|
20
21
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/build": "^1.0.1-beta.73"
|
|
22
23
|
},
|
|
23
24
|
"scripts": {
|
|
24
25
|
"build": "tamagui-build",
|
package/src/createAnimations.tsx
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PresenceContext, usePresence } from '@tamagui/animate-presence'
|
|
2
2
|
import { AnimationDriver, AnimationProp } from '@tamagui/core'
|
|
3
3
|
import { useCallback, useContext, useMemo } from 'react'
|
|
4
4
|
import Animated, {
|
|
5
|
+
AnimationCallback,
|
|
5
6
|
WithDecayConfig,
|
|
6
7
|
WithSpringConfig,
|
|
7
8
|
WithTimingConfig,
|
|
@@ -37,8 +38,8 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
37
38
|
Text: AnimatedText,
|
|
38
39
|
useAnimations: (props, helpers) => {
|
|
39
40
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers
|
|
40
|
-
const [
|
|
41
|
-
const presence = useContext(
|
|
41
|
+
const [isPresent, sendExitComplete] = usePresence()
|
|
42
|
+
const presence = useContext(PresenceContext)
|
|
42
43
|
|
|
43
44
|
const exitStyle = presence?.exitVariant
|
|
44
45
|
? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle
|
|
@@ -51,11 +52,16 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
51
52
|
[onDidAnimate]
|
|
52
53
|
)
|
|
53
54
|
|
|
55
|
+
const isExiting = isPresent === false
|
|
56
|
+
const isEntering = !state.mounted
|
|
57
|
+
|
|
54
58
|
const all = getStyle({
|
|
59
|
+
isExiting,
|
|
55
60
|
isEntering,
|
|
56
61
|
exitVariant: presence?.exitVariant,
|
|
57
62
|
enterVariant: presence?.enterVariant,
|
|
58
63
|
})
|
|
64
|
+
|
|
59
65
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}]
|
|
60
66
|
const animatedStyleKey = {
|
|
61
67
|
transform: true,
|
|
@@ -77,56 +83,83 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
77
83
|
state.pressIn,
|
|
78
84
|
state.focus,
|
|
79
85
|
delay,
|
|
80
|
-
|
|
86
|
+
isPresent,
|
|
81
87
|
onDidAnimate,
|
|
82
88
|
reanimatedOnDidAnimated,
|
|
83
89
|
presence?.exitVariant,
|
|
84
90
|
presence?.enterVariant,
|
|
85
91
|
]
|
|
86
92
|
|
|
93
|
+
const callback = (
|
|
94
|
+
isExiting: boolean,
|
|
95
|
+
exitingStyleProps: Record<string, boolean>,
|
|
96
|
+
key: string,
|
|
97
|
+
value: any
|
|
98
|
+
) => {
|
|
99
|
+
'worklet'
|
|
100
|
+
const callback: AnimationCallback = (completed, current) => {
|
|
101
|
+
'worklet'
|
|
102
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
103
|
+
attemptedValue: value,
|
|
104
|
+
})
|
|
105
|
+
if (isExiting) {
|
|
106
|
+
exitingStyleProps[key] = false
|
|
107
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)
|
|
108
|
+
// if this is true, then we've finished our exit animations
|
|
109
|
+
if (!areStylesExiting) {
|
|
110
|
+
if (sendExitComplete) {
|
|
111
|
+
runOnJS(sendExitComplete)()
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
return callback
|
|
117
|
+
}
|
|
118
|
+
|
|
87
119
|
const animatedStyle = useAnimatedStyle(() => {
|
|
120
|
+
'worklet'
|
|
88
121
|
const style = animatedStyles
|
|
89
122
|
|
|
90
123
|
const final = {
|
|
91
124
|
transform: [] as any[],
|
|
92
125
|
}
|
|
93
126
|
|
|
94
|
-
const isExiting =
|
|
127
|
+
const isExiting = isPresent === false
|
|
95
128
|
|
|
96
129
|
const exitingStyleProps: Record<string, boolean> = {}
|
|
97
130
|
if (exitStyle) {
|
|
98
|
-
for (const key
|
|
99
|
-
|
|
131
|
+
for (const key in exitStyle) {
|
|
132
|
+
if (key === 'transform') {
|
|
133
|
+
for (const attr of exitStyle[key]) {
|
|
134
|
+
const tkey = Object.keys(attr)[0]
|
|
135
|
+
exitingStyleProps[tkey] = true
|
|
136
|
+
}
|
|
137
|
+
} else {
|
|
138
|
+
exitingStyleProps[key] = true
|
|
139
|
+
}
|
|
100
140
|
}
|
|
101
141
|
}
|
|
102
142
|
|
|
103
143
|
for (const key in style) {
|
|
104
144
|
const value = style[key]
|
|
105
|
-
const animationConfig = getAnimationConfig(key, animations, props.animation)
|
|
145
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation)
|
|
106
146
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(
|
|
107
147
|
key,
|
|
108
148
|
animationConfig,
|
|
109
149
|
props.animateOnly
|
|
110
150
|
)
|
|
111
151
|
|
|
112
|
-
const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {
|
|
113
|
-
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
114
|
-
attemptedValue: value,
|
|
115
|
-
})
|
|
116
|
-
if (isExiting) {
|
|
117
|
-
exitingStyleProps[key] = false
|
|
118
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)
|
|
119
|
-
// if this is true, then we've finished our exit animations
|
|
120
|
-
if (!areStylesExiting) {
|
|
121
|
-
if (safeToUnmount) {
|
|
122
|
-
runOnJS(safeToUnmount)()
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
152
|
let { delayMs = null } = animationDelay(key, animationConfig, delay)
|
|
129
153
|
|
|
154
|
+
if (!animation) {
|
|
155
|
+
console.warn('No animation for', key, 'in', style)
|
|
156
|
+
continue
|
|
157
|
+
}
|
|
158
|
+
if (!config) {
|
|
159
|
+
console.warn('No animation config for', key, 'in', style)
|
|
160
|
+
continue
|
|
161
|
+
}
|
|
162
|
+
|
|
130
163
|
if (key === 'transform') {
|
|
131
164
|
if (!Array.isArray(value)) {
|
|
132
165
|
console.error(`Invalid transform value. Needs to be an array.`)
|
|
@@ -136,7 +169,11 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
136
169
|
for (const transformObject of value) {
|
|
137
170
|
const key = Object.keys(transformObject)[0]
|
|
138
171
|
const transformValue = transformObject[key]
|
|
139
|
-
let finalValue = animation(
|
|
172
|
+
let finalValue = animation(
|
|
173
|
+
transformValue,
|
|
174
|
+
config as any,
|
|
175
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
176
|
+
)
|
|
140
177
|
if (shouldRepeat) {
|
|
141
178
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
142
179
|
}
|
|
@@ -151,7 +188,11 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
151
188
|
// shadows
|
|
152
189
|
final[key] = {}
|
|
153
190
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
154
|
-
let finalValue = animation(
|
|
191
|
+
let finalValue = animation(
|
|
192
|
+
value,
|
|
193
|
+
config as any,
|
|
194
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
195
|
+
)
|
|
155
196
|
if (shouldRepeat) {
|
|
156
197
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
157
198
|
}
|
|
@@ -164,7 +205,11 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
164
205
|
continue
|
|
165
206
|
}
|
|
166
207
|
|
|
167
|
-
let finalValue = animation(
|
|
208
|
+
let finalValue = animation(
|
|
209
|
+
value,
|
|
210
|
+
config as any,
|
|
211
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
212
|
+
)
|
|
168
213
|
if (shouldRepeat) {
|
|
169
214
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
170
215
|
}
|
|
@@ -194,6 +239,7 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
194
239
|
}
|
|
195
240
|
|
|
196
241
|
function getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {
|
|
242
|
+
'worklet'
|
|
197
243
|
if (typeof animation === 'string') {
|
|
198
244
|
return animations[animation]
|
|
199
245
|
}
|
|
@@ -201,7 +247,7 @@ function getAnimationConfig(key: string, animations: AnimationsConfig, animation
|
|
|
201
247
|
let extraConf: any
|
|
202
248
|
if (Array.isArray(animation)) {
|
|
203
249
|
type = animation[0] as string
|
|
204
|
-
const conf = animation[1]
|
|
250
|
+
const conf = animation[1] && animation[1][key]
|
|
205
251
|
if (conf) {
|
|
206
252
|
if (typeof conf === 'string') {
|
|
207
253
|
type = conf
|
|
@@ -330,7 +376,7 @@ function getAnimation(
|
|
|
330
376
|
}
|
|
331
377
|
|
|
332
378
|
let config = animationConfig
|
|
333
|
-
let animation:
|
|
379
|
+
let animation: typeof withTiming | typeof withSpring | typeof withDecay
|
|
334
380
|
|
|
335
381
|
if (animationType === 'timing') {
|
|
336
382
|
animation = withTiming
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAiB,MAAM,eAAe,CAAA;AAE9D,OAAiB,EAEf,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAQjB,MAAM,yBAAyB,CAAA;AAEhC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAChB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAAC,GAChG,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAAC,GAChG,CAAC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,CAAA;AAElG,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAoN9F"}
|
package/types/index.d.ts
CHANGED
|
File without changes
|
package/types/index.d.ts.map
CHANGED
|
File without changes
|
package/types/polyfill.d.ts
CHANGED
|
File without changes
|
package/types/polyfill.d.ts.map
CHANGED
|
File without changes
|