@tamagui/animations-reanimated 1.0.1-beta.69 → 1.0.1-beta.72
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 +49 -25
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +50 -26
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +50 -26
- 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
|
@@ -57,13 +57,16 @@ function createAnimations(animations) {
|
|
|
57
57
|
useAnimations: (props, helpers) => {
|
|
58
58
|
var _a, _b;
|
|
59
59
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
60
|
-
const [
|
|
61
|
-
const presence = (0, import_react.useContext)(import_animate_presence.
|
|
60
|
+
const [isPresent, sendExitComplete] = (0, import_animate_presence.usePresence)();
|
|
61
|
+
const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
|
|
62
62
|
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
63
|
const reanimatedOnDidAnimated = (0, import_react.useCallback)((...args2) => {
|
|
64
64
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
65
65
|
}, [onDidAnimate]);
|
|
66
|
+
const isExiting = isPresent === false;
|
|
67
|
+
const isEntering = !state.mounted;
|
|
66
68
|
const all = getStyle({
|
|
69
|
+
isExiting,
|
|
67
70
|
isEntering,
|
|
68
71
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
69
72
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
@@ -88,43 +91,64 @@ function createAnimations(animations) {
|
|
|
88
91
|
state.pressIn,
|
|
89
92
|
state.focus,
|
|
90
93
|
delay,
|
|
91
|
-
|
|
94
|
+
isPresent,
|
|
92
95
|
onDidAnimate,
|
|
93
96
|
reanimatedOnDidAnimated,
|
|
94
97
|
presence == null ? void 0 : presence.exitVariant,
|
|
95
98
|
presence == null ? void 0 : presence.enterVariant
|
|
96
99
|
];
|
|
100
|
+
const callback = /* @__PURE__ */ __name((isExiting2, exitingStyleProps, key, value) => {
|
|
101
|
+
"worklet";
|
|
102
|
+
const callback2 = /* @__PURE__ */ __name((completed, current) => {
|
|
103
|
+
"worklet";
|
|
104
|
+
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, current, {
|
|
105
|
+
attemptedValue: value
|
|
106
|
+
});
|
|
107
|
+
if (isExiting2) {
|
|
108
|
+
exitingStyleProps[key] = false;
|
|
109
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
110
|
+
if (!areStylesExiting) {
|
|
111
|
+
if (sendExitComplete) {
|
|
112
|
+
(0, import_react_native_reanimated.runOnJS)(sendExitComplete)();
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}, "callback");
|
|
117
|
+
return callback2;
|
|
118
|
+
}, "callback");
|
|
97
119
|
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
120
|
+
"worklet";
|
|
98
121
|
const style = animatedStyles;
|
|
99
122
|
const final = {
|
|
100
123
|
transform: []
|
|
101
124
|
};
|
|
102
|
-
const
|
|
125
|
+
const isExiting2 = isPresent === false;
|
|
103
126
|
const exitingStyleProps = {};
|
|
104
127
|
if (exitStyle) {
|
|
105
|
-
for (const key
|
|
106
|
-
|
|
128
|
+
for (const key in exitStyle) {
|
|
129
|
+
if (key === "transform") {
|
|
130
|
+
for (const attr of exitStyle[key]) {
|
|
131
|
+
const tkey = Object.keys(attr)[0];
|
|
132
|
+
exitingStyleProps[tkey] = true;
|
|
133
|
+
}
|
|
134
|
+
} else {
|
|
135
|
+
exitingStyleProps[key] = true;
|
|
136
|
+
}
|
|
107
137
|
}
|
|
108
138
|
}
|
|
109
139
|
for (const key in style) {
|
|
110
140
|
const value = style[key];
|
|
111
141
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
112
142
|
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
143
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
144
|
+
if (!animation) {
|
|
145
|
+
console.warn("No animation for", key, "in", style);
|
|
146
|
+
continue;
|
|
147
|
+
}
|
|
148
|
+
if (!config) {
|
|
149
|
+
console.warn("No animation config for", key, "in", style);
|
|
150
|
+
continue;
|
|
151
|
+
}
|
|
128
152
|
if (key === "transform") {
|
|
129
153
|
if (!Array.isArray(value)) {
|
|
130
154
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -133,7 +157,7 @@ function createAnimations(animations) {
|
|
|
133
157
|
for (const transformObject of value) {
|
|
134
158
|
const key2 = Object.keys(transformObject)[0];
|
|
135
159
|
const transformValue = transformObject[key2];
|
|
136
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
160
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting2, exitingStyleProps, key2, value));
|
|
137
161
|
if (shouldRepeat) {
|
|
138
162
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
139
163
|
}
|
|
@@ -146,7 +170,7 @@ function createAnimations(animations) {
|
|
|
146
170
|
if (typeof value === "object") {
|
|
147
171
|
final[key] = {};
|
|
148
172
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
149
|
-
let finalValue2 = animation(value, config, callback);
|
|
173
|
+
let finalValue2 = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
150
174
|
if (shouldRepeat) {
|
|
151
175
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
152
176
|
}
|
|
@@ -158,7 +182,7 @@ function createAnimations(animations) {
|
|
|
158
182
|
}
|
|
159
183
|
continue;
|
|
160
184
|
}
|
|
161
|
-
let finalValue = animation(value, config, callback);
|
|
185
|
+
let finalValue = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
162
186
|
if (shouldRepeat) {
|
|
163
187
|
finalValue = (0, import_react_native_reanimated.withRepeat)(finalValue, repeatCount, repeatReverse);
|
|
164
188
|
}
|
|
@@ -183,7 +207,7 @@ function createAnimations(animations) {
|
|
|
183
207
|
}
|
|
184
208
|
__name(createAnimations, "createAnimations");
|
|
185
209
|
function getAnimationConfig(key, animations, animation) {
|
|
186
|
-
|
|
210
|
+
"worklet";
|
|
187
211
|
if (typeof animation === "string") {
|
|
188
212
|
return animations[animation];
|
|
189
213
|
}
|
|
@@ -191,7 +215,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
191
215
|
let extraConf;
|
|
192
216
|
if (Array.isArray(animation)) {
|
|
193
217
|
type = animation[0];
|
|
194
|
-
const conf =
|
|
218
|
+
const conf = animation[1] && animation[1][key];
|
|
195
219
|
if (conf) {
|
|
196
220
|
if (typeof conf === "string") {
|
|
197
221
|
type = conf;
|
|
@@ -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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;AAE7C,mBAAiD;AACjD,qCAYO;AAWA,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,uCAAS;AAC9B,QAAM,eAAe,uCAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AAtCvC;AAuCM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,yCAAY;AAClD,YAAM,WAAW,6BAAW,uCAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,0BAA0B,8BAC9B,IAAI,UAAS;AACX,qDAAe,GAAG;AAAA,MACpB,GACA,CAAC,YAAY,CACf;AAEA,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AAED,YAAM,CAAC,gBAAgB,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,YAAM,mBAAmB;AAAA,QACvB,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AACA,iBAAW,OAAO,OAAO,KAAK,GAAG,GAAG;AAClC,YAAI,iBAAiB,MAAM;AACzB,yBAAe,OAAO,IAAI;AAAA,QAC5B,OAAO;AACL,2BAAiB,OAAO,IAAI;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAEA,YAAM,WAAW,wBACf,YACA,mBACA,KACA,UACG;AACH;AACA,cAAM,YAA8B,wBAAC,WAAW,YAAY;AAC1D;AACA,sDAAQ,uBAAuB,EAAE,KAAK,WAAW,SAAS;AAAA,YACxD,gBAAgB;AAAA,UAClB,CAAC;AACD,cAAI,YAAW;AACb,8BAAkB,OAAO;AACzB,kBAAM,mBAAmB,OAAO,OAAO,iBAAiB,EAAE,KAAK,OAAO;AAEtE,gBAAI,CAAC,kBAAkB;AACrB,kBAAI,kBAAkB;AACpB,4DAAQ,gBAAgB,EAAE;AAAA,cAC5B;AAAA,YACF;AAAA,UACF;AAAA,QACF,GAfoC;AAgBpC,eAAO;AAAA,MACT,GAxBiB;AA0BjB,YAAM,gBAAgB,qDAAiB,MAAM;AAC3C;AACA,cAAM,QAAQ;AAEd,cAAM,QAAQ;AAAA,UACZ,WAAW,CAAC;AAAA,QACd;AAEA,cAAM,aAAY,cAAc;AAEhC,cAAM,oBAA6C,CAAC;AACpD,YAAI,WAAW;AACb,qBAAW,OAAO,WAAW;AAC3B,gBAAI,QAAQ,aAAa;AACvB,yBAAW,QAAQ,UAAU,MAAM;AACjC,sBAAM,OAAO,OAAO,KAAK,IAAI,EAAE;AAC/B,kCAAkB,QAAQ;AAAA,cAC5B;AAAA,YACF,OAAO;AACL,gCAAkB,OAAO;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAEA,mBAAW,OAAO,OAAO;AACvB,gBAAM,QAAQ,MAAM;AACpB,gBAAM,kBAAkB,mBAAmB,KAAK,YAAY,MAAM,SAAS;AAC3E,gBAAM,EAAE,WAAW,QAAQ,cAAc,aAAa,kBAAkB,aACtE,KACA,iBACA,MAAM,WACR;AAEA,cAAI,EAAE,UAAU,SAAS,eAAe,KAAK,iBAAiB,KAAK;AAEnE,cAAI,CAAC,WAAW;AACd,oBAAQ,KAAK,oBAAoB,KAAK,MAAM,KAAK;AACjD;AAAA,UACF;AACA,cAAI,CAAC,QAAQ;AACX,oBAAQ,KAAK,2BAA2B,KAAK,MAAM,KAAK;AACxD;AAAA,UACF;AAEA,cAAI,QAAQ,aAAa;AACvB,gBAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,sBAAQ,MAAM,gDAAgD;AAC9D;AAAA,YACF;AAEA,uBAAW,mBAAmB,OAAO;AACnC,oBAAM,OAAM,OAAO,KAAK,eAAe,EAAE;AACzC,oBAAM,iBAAiB,gBAAgB;AACvC,kBAAI,cAAa,UACf,gBACA,QACA,SAAS,YAAW,mBAAmB,MAAK,KAAK,CACnD;AACA,kBAAI,cAAc;AAChB,8BAAa,+CAAW,aAAY,aAAa,aAAa;AAAA,cAChE;AACA,oBAAM,aAAa,KAAK;AAAA,gBACtB,CAAC,OAAM;AAAA,cACT,CAAC;AAAA,YACH;AACA;AAAA,UACF;AAEA,cAAI,OAAO,UAAU,UAAU;AAE7B,kBAAM,OAAO,CAAC;AACd,uBAAW,iBAAiB,OAAO,KAAK,SAAS,CAAC,CAAC,GAAG;AACpD,kBAAI,cAAa,UACf,OACA,QACA,SAAS,YAAW,mBAAmB,KAAK,KAAK,CACnD;AACA,kBAAI,cAAc;AAChB,8BAAa,+CAAW,aAAY,aAAa,aAAa;AAAA,cAChE;AACA,kBAAI,WAAW,MAAM;AACnB,sBAAM,KAAK,iBAAiB,8CAAU,SAAS,WAAU;AAAA,cAC3D,OAAO;AACL,sBAAM,KAAK,iBAAiB;AAAA,cAC9B;AAAA,YACF;AACA;AAAA,UACF;AAEA,cAAI,aAAa,UACf,OACA,QACA,SAAS,YAAW,mBAAmB,KAAK,KAAK,CACnD;AACA,cAAI,cAAc;AAChB,yBAAa,+CAAW,YAAY,aAAa,aAAa;AAAA,UAChE;AACA,cAAI,WAAW,QAAQ,OAAO,YAAY,UAAU;AAClD,kBAAM,OAAO,8CAAU,SAAS,UAAU;AAAA,UAC5C,OAAO;AACL,kBAAM,OAAO;AAAA,UACf;AAAA,QAGF;AAEA,YAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAC5D,kBAAQ,IAAI,mBAAmB,KAAK;AAAA,QACtC;AAEA,eAAO;AAAA,MACT,GAAG,IAAI;AAEP,aAAO,0BAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MACF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;AApNgB;AAsNhB,4BAA4B,KAAa,YAA8B,WAA2B;AAChG;AACA,MAAI,OAAO,cAAc,UAAU;AACjC,WAAO,WAAW;AAAA,EACpB;AACA,MAAI,OAAO;AACX,MAAI;AACJ,MAAI,MAAM,QAAQ,SAAS,GAAG;AAC5B,WAAO,UAAU;AACjB,UAAM,OAAO,UAAU,MAAM,UAAU,GAAG;AAC1C,QAAI,MAAM;AACR,UAAI,OAAO,SAAS,UAAU;AAC5B,eAAO;AAAA,MACT,OAAO;AACL,eAAQ,KAAa,QAAQ;AAC7B,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF,OAAO;AACL,UAAM,MAAM,uCAAY;AACxB,WAAO,2BAAK;AACZ,gBAAY;AAAA,EACd;AACA,QAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,yBAAyB,kBAAkB,MAAM;AAAA,EACnE;AACA,SAAO,gDACF,QACA,YAFE;AAAA,IAGL,MAAM,MAAM;AAAA,EACd;AACF;AAhCS;AAkCT,wBACE,KACA,WACA,cACA;AACA;AACA,MACE,CAAC,aACD,CAAC,UAAU,QACX,UAAU,KAAK,YAAY,UAC3B,UAAU,KAAK,YAAY,MAC3B;AACA,WAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AACA,SAAO;AAAA,IACL,SAAS,UAAU,KAAK;AAAA,EAC1B;AACF;AAnBS;AA8DT,MAAM,UAAU,wBAAC,aAAqB;AACpC;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,SAAS,QAAQ;AACrB,GAbgB;AAehB,sBACE,KACA,iBACA,aACA;AACA;AACA,MAAI,CAAC,mBAAoB,eAAe,CAAC,YAAY,SAAS,GAAG,GAAI;AACnE,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,cAAc;AAClB,MAAI,gBAAgB,gBAAgB,iBAAiB;AACrD,MAAI,gBAAoD,oDAAiB,SAAQ;AAEjF,MAAI,QAAQ,GAAG,KAAK,QAAQ,WAAW;AACrC,oBAAgB;AAAA,EAClB;AAEA,MAAI,YAAY,iBAAiB;AAC/B,kBAAc,gBAAgB,UAAU;AAAA,EAC1C,OAAO;AACL,QAAI,gBAAgB,MAAM;AACxB,oBAAc,gBAAgB,OAAO,KAAK;AAAA,IAC5C;AAAA,EACF;AAEA,MAAI,SAAS;AACb,MAAI;AAEJ,MAAI,kBAAkB,UAAU;AAC9B,gBAAY;AAAA,EACd,WAAW,kBAAkB,UAAU;AACrC,gBAAY;AAAA,EACd,WAAW,kBAAkB,SAAS;AACpC,gBAAY;AACZ,aAAS,UAAU;AAAA,MACjB,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,EACF,OAAO;AACL,YAAQ,KAAK,yBAAyB,aAAa;AACnD,gBAAY;AAAA,EACd;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,CAAC,CAAC;AAAA,EAClB;AACF;AAnDS;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
3
|
+
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
4
4
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import Animated, {
|
|
6
6
|
runOnJS,
|
|
@@ -24,13 +24,16 @@ function createAnimations(animations) {
|
|
|
24
24
|
useAnimations: (props, helpers) => {
|
|
25
25
|
var _a, _b;
|
|
26
26
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [
|
|
28
|
-
const presence = useContext(
|
|
27
|
+
const [isPresent, sendExitComplete] = usePresence();
|
|
28
|
+
const presence = useContext(PresenceContext);
|
|
29
29
|
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
30
|
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
31
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
32
32
|
}, [onDidAnimate]);
|
|
33
|
+
const isExiting = isPresent === false;
|
|
34
|
+
const isEntering = !state.mounted;
|
|
33
35
|
const all = getStyle({
|
|
36
|
+
isExiting,
|
|
34
37
|
isEntering,
|
|
35
38
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
39
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
@@ -55,43 +58,64 @@ function createAnimations(animations) {
|
|
|
55
58
|
state.pressIn,
|
|
56
59
|
state.focus,
|
|
57
60
|
delay,
|
|
58
|
-
|
|
61
|
+
isPresent,
|
|
59
62
|
onDidAnimate,
|
|
60
63
|
reanimatedOnDidAnimated,
|
|
61
64
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
65
|
presence == null ? void 0 : presence.enterVariant
|
|
63
66
|
];
|
|
67
|
+
const callback = /* @__PURE__ */ __name((isExiting2, exitingStyleProps, key, value) => {
|
|
68
|
+
"worklet";
|
|
69
|
+
const callback2 = /* @__PURE__ */ __name((completed, current) => {
|
|
70
|
+
"worklet";
|
|
71
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
72
|
+
attemptedValue: value
|
|
73
|
+
});
|
|
74
|
+
if (isExiting2) {
|
|
75
|
+
exitingStyleProps[key] = false;
|
|
76
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
77
|
+
if (!areStylesExiting) {
|
|
78
|
+
if (sendExitComplete) {
|
|
79
|
+
runOnJS(sendExitComplete)();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}, "callback");
|
|
84
|
+
return callback2;
|
|
85
|
+
}, "callback");
|
|
64
86
|
const animatedStyle = useAnimatedStyle(() => {
|
|
87
|
+
"worklet";
|
|
65
88
|
const style = animatedStyles;
|
|
66
89
|
const final = {
|
|
67
90
|
transform: []
|
|
68
91
|
};
|
|
69
|
-
const
|
|
92
|
+
const isExiting2 = isPresent === false;
|
|
70
93
|
const exitingStyleProps = {};
|
|
71
94
|
if (exitStyle) {
|
|
72
|
-
for (const key
|
|
73
|
-
|
|
95
|
+
for (const key in exitStyle) {
|
|
96
|
+
if (key === "transform") {
|
|
97
|
+
for (const attr of exitStyle[key]) {
|
|
98
|
+
const tkey = Object.keys(attr)[0];
|
|
99
|
+
exitingStyleProps[tkey] = true;
|
|
100
|
+
}
|
|
101
|
+
} else {
|
|
102
|
+
exitingStyleProps[key] = true;
|
|
103
|
+
}
|
|
74
104
|
}
|
|
75
105
|
}
|
|
76
106
|
for (const key in style) {
|
|
77
107
|
const value = style[key];
|
|
78
108
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
109
|
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
110
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
111
|
+
if (!animation) {
|
|
112
|
+
console.warn("No animation for", key, "in", style);
|
|
113
|
+
continue;
|
|
114
|
+
}
|
|
115
|
+
if (!config) {
|
|
116
|
+
console.warn("No animation config for", key, "in", style);
|
|
117
|
+
continue;
|
|
118
|
+
}
|
|
95
119
|
if (key === "transform") {
|
|
96
120
|
if (!Array.isArray(value)) {
|
|
97
121
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -100,7 +124,7 @@ function createAnimations(animations) {
|
|
|
100
124
|
for (const transformObject of value) {
|
|
101
125
|
const key2 = Object.keys(transformObject)[0];
|
|
102
126
|
const transformValue = transformObject[key2];
|
|
103
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
127
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting2, exitingStyleProps, key2, value));
|
|
104
128
|
if (shouldRepeat) {
|
|
105
129
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
130
|
}
|
|
@@ -113,7 +137,7 @@ function createAnimations(animations) {
|
|
|
113
137
|
if (typeof value === "object") {
|
|
114
138
|
final[key] = {};
|
|
115
139
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(value, config, callback);
|
|
140
|
+
let finalValue2 = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
117
141
|
if (shouldRepeat) {
|
|
118
142
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
143
|
}
|
|
@@ -125,7 +149,7 @@ function createAnimations(animations) {
|
|
|
125
149
|
}
|
|
126
150
|
continue;
|
|
127
151
|
}
|
|
128
|
-
let finalValue = animation(value, config, callback);
|
|
152
|
+
let finalValue = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
129
153
|
if (shouldRepeat) {
|
|
130
154
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
155
|
}
|
|
@@ -150,7 +174,7 @@ function createAnimations(animations) {
|
|
|
150
174
|
}
|
|
151
175
|
__name(createAnimations, "createAnimations");
|
|
152
176
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
177
|
+
"worklet";
|
|
154
178
|
if (typeof animation === "string") {
|
|
155
179
|
return animations[animation];
|
|
156
180
|
}
|
|
@@ -158,7 +182,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
182
|
let extraConf;
|
|
159
183
|
if (Array.isArray(animation)) {
|
|
160
184
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
185
|
+
const conf = animation[1] && animation[1][key];
|
|
162
186
|
if (conf) {
|
|
163
187
|
if (typeof conf === "string") {
|
|
164
188
|
type = conf;
|
|
@@ -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": ";;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
3
|
+
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
4
4
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import Animated, {
|
|
6
6
|
runOnJS,
|
|
@@ -24,13 +24,16 @@ function createAnimations(animations) {
|
|
|
24
24
|
useAnimations: (props, helpers) => {
|
|
25
25
|
var _a, _b;
|
|
26
26
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [
|
|
28
|
-
const presence = useContext(
|
|
27
|
+
const [isPresent, sendExitComplete] = usePresence();
|
|
28
|
+
const presence = useContext(PresenceContext);
|
|
29
29
|
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
30
|
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
31
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
32
32
|
}, [onDidAnimate]);
|
|
33
|
+
const isExiting = isPresent === false;
|
|
34
|
+
const isEntering = !state.mounted;
|
|
33
35
|
const all = getStyle({
|
|
36
|
+
isExiting,
|
|
34
37
|
isEntering,
|
|
35
38
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
39
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
@@ -55,43 +58,64 @@ function createAnimations(animations) {
|
|
|
55
58
|
state.pressIn,
|
|
56
59
|
state.focus,
|
|
57
60
|
delay,
|
|
58
|
-
|
|
61
|
+
isPresent,
|
|
59
62
|
onDidAnimate,
|
|
60
63
|
reanimatedOnDidAnimated,
|
|
61
64
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
65
|
presence == null ? void 0 : presence.enterVariant
|
|
63
66
|
];
|
|
67
|
+
const callback = /* @__PURE__ */ __name((isExiting2, exitingStyleProps, key, value) => {
|
|
68
|
+
"worklet";
|
|
69
|
+
const callback2 = /* @__PURE__ */ __name((completed, current) => {
|
|
70
|
+
"worklet";
|
|
71
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
72
|
+
attemptedValue: value
|
|
73
|
+
});
|
|
74
|
+
if (isExiting2) {
|
|
75
|
+
exitingStyleProps[key] = false;
|
|
76
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
77
|
+
if (!areStylesExiting) {
|
|
78
|
+
if (sendExitComplete) {
|
|
79
|
+
runOnJS(sendExitComplete)();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}, "callback");
|
|
84
|
+
return callback2;
|
|
85
|
+
}, "callback");
|
|
64
86
|
const animatedStyle = useAnimatedStyle(() => {
|
|
87
|
+
"worklet";
|
|
65
88
|
const style = animatedStyles;
|
|
66
89
|
const final = {
|
|
67
90
|
transform: []
|
|
68
91
|
};
|
|
69
|
-
const
|
|
92
|
+
const isExiting2 = isPresent === false;
|
|
70
93
|
const exitingStyleProps = {};
|
|
71
94
|
if (exitStyle) {
|
|
72
|
-
for (const key
|
|
73
|
-
|
|
95
|
+
for (const key in exitStyle) {
|
|
96
|
+
if (key === "transform") {
|
|
97
|
+
for (const attr of exitStyle[key]) {
|
|
98
|
+
const tkey = Object.keys(attr)[0];
|
|
99
|
+
exitingStyleProps[tkey] = true;
|
|
100
|
+
}
|
|
101
|
+
} else {
|
|
102
|
+
exitingStyleProps[key] = true;
|
|
103
|
+
}
|
|
74
104
|
}
|
|
75
105
|
}
|
|
76
106
|
for (const key in style) {
|
|
77
107
|
const value = style[key];
|
|
78
108
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
109
|
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
110
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
111
|
+
if (!animation) {
|
|
112
|
+
console.warn("No animation for", key, "in", style);
|
|
113
|
+
continue;
|
|
114
|
+
}
|
|
115
|
+
if (!config) {
|
|
116
|
+
console.warn("No animation config for", key, "in", style);
|
|
117
|
+
continue;
|
|
118
|
+
}
|
|
95
119
|
if (key === "transform") {
|
|
96
120
|
if (!Array.isArray(value)) {
|
|
97
121
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -100,7 +124,7 @@ function createAnimations(animations) {
|
|
|
100
124
|
for (const transformObject of value) {
|
|
101
125
|
const key2 = Object.keys(transformObject)[0];
|
|
102
126
|
const transformValue = transformObject[key2];
|
|
103
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
127
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting2, exitingStyleProps, key2, value));
|
|
104
128
|
if (shouldRepeat) {
|
|
105
129
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
130
|
}
|
|
@@ -113,7 +137,7 @@ function createAnimations(animations) {
|
|
|
113
137
|
if (typeof value === "object") {
|
|
114
138
|
final[key] = {};
|
|
115
139
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(value, config, callback);
|
|
140
|
+
let finalValue2 = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
117
141
|
if (shouldRepeat) {
|
|
118
142
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
143
|
}
|
|
@@ -125,7 +149,7 @@ function createAnimations(animations) {
|
|
|
125
149
|
}
|
|
126
150
|
continue;
|
|
127
151
|
}
|
|
128
|
-
let finalValue = animation(value, config, callback);
|
|
152
|
+
let finalValue = animation(value, config, callback(isExiting2, exitingStyleProps, key, value));
|
|
129
153
|
if (shouldRepeat) {
|
|
130
154
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
155
|
}
|
|
@@ -150,7 +174,7 @@ function createAnimations(animations) {
|
|
|
150
174
|
}
|
|
151
175
|
__name(createAnimations, "createAnimations");
|
|
152
176
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
177
|
+
"worklet";
|
|
154
178
|
if (typeof animation === "string") {
|
|
155
179
|
return animations[animation];
|
|
156
180
|
}
|
|
@@ -158,7 +182,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
182
|
let extraConf;
|
|
159
183
|
if (Array.isArray(animation)) {
|
|
160
184
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
185
|
+
const conf = animation[1] && animation[1][key];
|
|
162
186
|
if (conf) {
|
|
163
187
|
if (typeof conf === "string") {
|
|
164
188
|
type = conf;
|
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.72",
|
|
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.72",
|
|
18
|
+
"@tamagui/core": "^1.0.1-beta.72",
|
|
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.72"
|
|
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
|