@tamagui/animations-react-native 3.0.0-beta.924.1 → 3.0.0

package/dist/cjs/createAnimations.cjs

@@ -1,617 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: () => from[key],
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var createAnimations_exports = {};
-__export(createAnimations_exports, {
-	AnimatedText: () => AnimatedText,
-	AnimatedView: () => AnimatedView,
-	createAnimations: () => createAnimations,
-	useAnimatedNumber: () => useAnimatedNumber,
-	useAnimatedNumberReaction: () => useAnimatedNumberReaction,
-	useAnimatedNumberStyle: () => useAnimatedNumberStyle,
-	useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
-});
-module.exports = __toCommonJS(createAnimations_exports);
-var import_animation_helpers = require("@tamagui/animation-helpers");
-var import_constants = require("@tamagui/constants");
-var import_use_presence = require("@tamagui/use-presence");
-var import_web = require("@tamagui/web");
-var import_internal_runtime = require("@tamagui/web/internal-runtime");
-var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native-web");
-const isFabric = !import_constants.isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
-const resolveDynamicValue = (value, isDark) => {
-	if (value && typeof value === "object" && "dynamic" in value) {
-		const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
-		return dynamicValue;
-	}
-	return value;
-};
-const animatedStyleKey = {
-	transform: true,
-	opacity: true
-};
-const colorStyleKey = {
-	backgroundColor: true,
-	color: true,
-	borderColor: true,
-	borderLeftColor: true,
-	borderRightColor: true,
-	borderTopColor: true,
-	borderBottomColor: true
-};
-const layoutStyleKey = {
-	height: true,
-	width: true,
-	minHeight: true,
-	maxHeight: true,
-	minWidth: true,
-	maxWidth: true
-};
-function hasAnimatedLayoutKey(style, isDark, animateOnly) {
-	for (const key in layoutStyleKey) {
-		if (animateOnly && !animateOnly.includes(key)) continue;
-		if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
-	}
-	return false;
-}
-function isAnimatableColor(value) {
-	return typeof value === "string" && (0, import_react_native.processColor)(value) != null;
-}
-const costlyToAnimateStyleKey = {
-	borderRadius: true,
-	borderTopLeftRadius: true,
-	borderTopRightRadius: true,
-	borderBottomLeftRadius: true,
-	borderBottomRightRadius: true,
-	borderWidth: true,
-	borderLeftWidth: true,
-	borderRightWidth: true,
-	borderTopWidth: true,
-	borderBottomWidth: true,
-	...colorStyleKey
-};
-const AnimatedView = import_react_native.Animated.View;
-const AnimatedText = import_react_native.Animated.Text;
-function useAnimatedNumber(initial) {
-	const state = import_react.default.useRef(null);
-	if (!state.current) {
-		state.current = {
-			composite: null,
-			val: new import_react_native.Animated.Value(initial),
-			strategy: { type: "spring" }
-		};
-	}
-	return {
-		getInstance() {
-			return state.current.val;
-		},
-		getValue() {
-			return state.current.val["_value"];
-		},
-		stop() {
-			state.current.composite?.stop();
-			state.current.composite = null;
-		},
-		setValue(next, { type, ...config } = { type: "spring" }, onFinish) {
-			const val = state.current.val;
-			const handleFinish = onFinish ? ({ finished }) => finished ? onFinish() : null : void 0;
-			if (type === "direct") {
-				val.setValue(next);
-			} else if (type === "spring") {
-				state.current.composite?.stop();
-				const composite = import_react_native.Animated.spring(val, {
-					...config,
-					toValue: next,
-					useNativeDriver: isFabric
-				});
-				composite.start(handleFinish);
-				state.current.composite = composite;
-			} else {
-				state.current.composite?.stop();
-				const composite = import_react_native.Animated.timing(val, {
-					...config,
-					toValue: next,
-					useNativeDriver: isFabric
-				});
-				composite.start(handleFinish);
-				state.current.composite = composite;
-			}
-		}
-	};
-}
-const useAnimatedNumberReaction = ({ value }, onValue) => {
-	const onChange = (0, import_web.useEvent)((current) => {
-		onValue(current.value);
-	});
-	import_react.default.useEffect(() => {
-		const id = value.getInstance().addListener(onChange);
-		return () => {
-			value.getInstance().removeListener(id);
-		};
-	}, [value, onChange]);
-};
-const useAnimatedNumberStyle = (value, getStyle) => {
-	const instance = value.getInstance();
-	const animatedStyle = getStyle(instance);
-	const usesAnimatedNode = hasAnimatedNode(animatedStyle);
-	const [current, setCurrent] = import_react.default.useState(value.getValue());
-	import_react.default.useEffect(() => {
-		if (usesAnimatedNode) return;
-		const id = instance.addListener(({ value: next }) => {
-			setCurrent(next);
-		});
-		return () => {
-			instance.removeListener(id);
-		};
-	}, [instance, usesAnimatedNode]);
-	return usesAnimatedNode ? animatedStyle : getStyle(current);
-};
-function hasAnimatedNode(value) {
-	if (!value || typeof value !== "object") return false;
-	if (typeof value.__getValue === "function") return true;
-	if (Array.isArray(value)) return value.some(hasAnimatedNode);
-	return Object.values(value).some(hasAnimatedNode);
-}
-const useAnimatedNumbersStyle = (vals, getStyle) => {
-	return getStyle(...vals.map((v) => v.getInstance()));
-};
-function createAnimations(animations, options) {
-	const nativeDriver = options?.useNativeDriver ?? isFabric;
-	return {
-		inputStyle: "value",
-		outputStyle: "inline",
-		avoidReRenders: true,
-		animations,
-		needsCustomComponent: true,
-		View: AnimatedView,
-		Text: AnimatedText,
-		useAnimatedNumber,
-		useAnimatedNumberReaction,
-		useAnimatedNumberStyle,
-		useAnimatedNumbersStyle,
-		usePresence: import_use_presence.usePresence,
-		ResetPresence: import_use_presence.ResetPresence,
-		useAnimations: ({ props, onTransition, style, componentState, presence, stateRef, useStyleEmitter }) => {
-			const isDisabled = import_constants.isWeb && componentState.unmounted === true;
-			const isExiting = presence?.[0] === false;
-			const sendExitComplete = presence?.[1];
-			const onTransitionRef = import_react.default.useRef(onTransition);
-			onTransitionRef.current = onTransition;
-			const emit = (phase, cause, finished) => {
-				onTransitionRef.current?.(phase === "end" ? {
-					phase,
-					cause,
-					finished
-				} : {
-					phase,
-					cause
-				});
-			};
-			const [, themeState] = (0, import_internal_runtime.useThemeWithState)({});
-			const isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark");
-			const animateStyles = import_react.default.useRef({});
-			const animatedTranforms = import_react.default.useRef([]);
-			const animationsState = import_react.default.useRef(/* @__PURE__ */ new WeakMap());
-			const pseudoActiveRef = import_react.default.useRef(false);
-			const exitCycleIdRef = import_react.default.useRef(0);
-			const exitCompletedRef = import_react.default.useRef(false);
-			const wasExitingRef = import_react.default.useRef(false);
-			const enterStartedRef = import_react.default.useRef(false);
-			const exitStartedRef = import_react.default.useRef(false);
-			const updateInFlightRef = import_react.default.useRef(false);
-			const updateCycleIdRef = import_react.default.useRef(0);
-			const prevStyleSigRef = import_react.default.useRef(null);
-			const justStartedExiting = isExiting && !wasExitingRef.current;
-			const justStoppedExiting = !isExiting && wasExitingRef.current;
-			if (justStartedExiting) {
-				exitCycleIdRef.current++;
-				exitCompletedRef.current = false;
-			}
-			if (justStoppedExiting) {
-				exitCycleIdRef.current++;
-			}
-			const animateOnly = props.animateOnly || [];
-			const hasTransitionOnly = !!props.animateOnly;
-			const isEntering = !!componentState.unmounted;
-			const wasEnteringRef = import_react.default.useRef(isEntering);
-			const justFinishedEntering = wasEnteringRef.current && !isEntering;
-			import_react.default.useEffect(() => {
-				wasEnteringRef.current = isEntering;
-			});
-			const args = [
-				JSON.stringify(style),
-				componentState,
-				isExiting,
-				!!onTransition,
-				isDark,
-				justFinishedEntering,
-				hasTransitionOnly
-			];
-			const res = import_react.default.useMemo(() => {
-				const runners = [];
-				const completions = [];
-				const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
-				const nonAnimatedStyle = {};
-				const useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, hasTransitionOnly ? animateOnly : void 0);
-				const seenAnimateKeys = /* @__PURE__ */ new Set();
-				let sawTransform = false;
-				let transformCount = 0;
-				for (const key in style) {
-					const rawVal = style[key];
-					const val = resolveDynamicValue(rawVal, isDark);
-					if (val === void 0) continue;
-					if (isDisabled) {
-						continue;
-					}
-					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
-						nonAnimatedStyle[key] = val;
-						continue;
-					}
-					if (hasTransitionOnly && !animateOnly.includes(key)) {
-						nonAnimatedStyle[key] = val;
-						continue;
-					}
-					if (layoutStyleKey[key] && typeof val !== "number") {
-						nonAnimatedStyle[key] = val;
-						continue;
-					}
-					if (colorStyleKey[key] && !isAnimatableColor(val)) {
-						nonAnimatedStyle[key] = val;
-						continue;
-					}
-					if (key !== "transform") {
-						animateStyles.current[key] = update(key, animateStyles.current[key], val);
-						seenAnimateKeys.add(key);
-						continue;
-					}
-					if (!val) continue;
-					if (typeof val === "string") {
-						console.warn(`Warning: Tamagui can't animate string transforms yet!`);
-						continue;
-					}
-					sawTransform = true;
-					for (const transform of val) {
-						if (!transform) continue;
-						const index = transformCount++;
-						const tkey = Object.keys(transform)[0];
-						const currentTransform = animatedTranforms.current[index]?.[tkey];
-						animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
-						animatedTranforms.current = [...animatedTranforms.current];
-					}
-				}
-				if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
-					for (const k in animateStyles.current) {
-						if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
-					}
-					if (!sawTransform) {
-						if (animatedTranforms.current.length) animatedTranforms.current = [];
-					} else if (animatedTranforms.current.length > transformCount) {
-						animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
-					}
-				}
-				const animatedTransformStyle = animatedTranforms.current.length > 0 ? { transform: animatedTranforms.current.map((r) => {
-					const key = Object.keys(r)[0];
-					const val = animationsState.current.get(r[key])?.interpolation || r[key];
-					return { [key]: val };
-				}) } : {};
-				const animatedStyle = {
-					...Object.fromEntries(Object.entries(animateStyles.current).map(([k, v]) => [k, animationsState.current.get(v)?.interpolation || v])),
-					...animatedTransformStyle
-				};
-				return {
-					runners,
-					completions,
-					style: [nonAnimatedStyle, animatedStyle]
-				};
-				function update(key, animated, valIn) {
-					const isColorStyleKey = colorStyleKey[key];
-					const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
-					let animateToValue = val;
-					const value = animated || new import_react_native.Animated.Value(val);
-					const curInterpolation = animationsState.current.get(value);
-					let interpolateArgs;
-					if (type) {
-						interpolateArgs = getInterpolated(curInterpolation?.current ?? value["_value"], val, type);
-						animationsState.current.set(value, {
-							interpolation: value.interpolate(interpolateArgs),
-							current: val
-						});
-					}
-					if (isColorStyleKey) {
-						animateToValue = curInterpolation?.animateToValue ? 0 : 1;
-						interpolateArgs = getColorInterpolated(curInterpolation?.current, valIn, animateToValue);
-						animationsState.current.set(value, {
-							current: valIn,
-							interpolation: value.interpolate(interpolateArgs),
-							animateToValue: curInterpolation?.animateToValue ? 0 : 1
-						});
-					}
-					if (value) {
-						const animationConfig = getAnimationConfig(key, animations, props.transition, animationState);
-						let resolve;
-						const promise = new Promise((res2) => {
-							resolve = res2;
-						});
-						completions.push(promise);
-						runners.push(() => {
-							value.stopAnimation();
-							function getAnimation() {
-								return import_react_native.Animated[animationConfig.type || "spring"](value, {
-									toValue: animateToValue,
-									...animationConfig,
-									useNativeDriver: useNativeDriverForNode
-								});
-							}
-							const animation = animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
-							animation.start(({ finished }) => {
-								if (finished || isExiting) {
-									resolve();
-								}
-							});
-						});
-					}
-					if (process.env.NODE_ENV === "development") {
-						if (props["debug"] === "verbose") {
-							console.info(" 💠 animate", key, `from (${value["_value"]}) to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
-						}
-					}
-					return value;
-				}
-			}, args);
-			import_react.default.useEffect(() => {
-				wasExitingRef.current = isExiting;
-			});
-			(0, import_constants.useIsomorphicLayoutEffect)(() => {
-				if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
-					exitStartedRef.current = false;
-					emit("end", "exit", false);
-				}
-			}, [justStoppedExiting]);
-			(0, import_constants.useIsomorphicLayoutEffect)(() => {
-				res.runners.forEach((r) => r());
-				const cycleId = exitCycleIdRef.current;
-				const cause = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "update";
-				if (cause === "exit") {
-					if (enterStartedRef.current) {
-						enterStartedRef.current = false;
-						emit("end", "enter", false);
-					}
-					if (updateInFlightRef.current) {
-						updateInFlightRef.current = false;
-						updateCycleIdRef.current++;
-						emit("end", "update", false);
-					}
-				}
-				if (cause === "update") {
-					const sig = args[0];
-					if (prevStyleSigRef.current === null || prevStyleSigRef.current === sig) {
-						prevStyleSigRef.current = sig;
-						return;
-					}
-					prevStyleSigRef.current = sig;
-					if (res.completions.length === 0) return;
-					if (updateInFlightRef.current) {
-						emit("end", "update", false);
-					}
-					updateInFlightRef.current = true;
-					const uid = ++updateCycleIdRef.current;
-					emit("start", "update");
-					Promise.all(res.completions).then(() => {
-						if (uid !== updateCycleIdRef.current) return;
-						updateInFlightRef.current = false;
-						emit("end", "update", true);
-					});
-					return;
-				}
-				prevStyleSigRef.current = args[0];
-				if (res.completions.length === 0) {
-					emit("start", cause);
-					emit("end", cause, true);
-					if (isExiting && !exitCompletedRef.current) {
-						exitCompletedRef.current = true;
-						sendExitComplete?.();
-					}
-					return;
-				}
-				if (cause === "enter" && !enterStartedRef.current) {
-					enterStartedRef.current = true;
-					emit("start", "enter");
-				}
-				if (cause === "exit" && !exitStartedRef.current) {
-					exitStartedRef.current = true;
-					emit("start", "exit");
-				}
-				Promise.all(res.completions).then(() => {
-					if (isExiting && cycleId !== exitCycleIdRef.current) return;
-					if (isExiting && exitCompletedRef.current) return;
-					if (isExiting) {
-						if (exitStartedRef.current) {
-							exitStartedRef.current = false;
-							emit("end", "exit", true);
-						}
-						exitCompletedRef.current = true;
-						sendExitComplete?.();
-					} else if (enterStartedRef.current) {
-						enterStartedRef.current = false;
-						emit("end", "enter", true);
-					}
-				});
-			}, args);
-			useStyleEmitter?.((nextStyle, _effectiveTransition, pseudoActive) => {
-				pseudoActiveRef.current = pseudoActive === true;
-				const runners = [];
-				const seenAnimateKeys = /* @__PURE__ */ new Set();
-				let transformCount = 0;
-				let animatedShapeChanged = false;
-				const useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some((key) => layoutStyleKey[key]);
-				for (const key in nextStyle) {
-					const rawVal = nextStyle[key];
-					const val = resolveDynamicValue(rawVal, isDark);
-					if (val === void 0) continue;
-					if (key === "transform" && Array.isArray(val)) {
-						for (const transform of val) {
-							if (!transform) continue;
-							const index = transformCount++;
-							const tkey = Object.keys(transform)[0];
-							const currentTransform = animatedTranforms.current[index]?.[tkey];
-							if (!currentTransform) animatedShapeChanged = true;
-							animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
-						}
-					} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
-						if (layoutStyleKey[key] && typeof val !== "number") continue;
-						if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
-						if (!animateStyles.current[key]) animatedShapeChanged = true;
-						animateStyles.current[key] = update(key, animateStyles.current[key], val);
-						seenAnimateKeys.add(key);
-					}
-				}
-				for (const key in animateStyles.current) {
-					if (!seenAnimateKeys.has(key)) {
-						delete animateStyles.current[key];
-						animatedShapeChanged = true;
-					}
-				}
-				if (animatedTranforms.current.length > transformCount) {
-					animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
-					animatedShapeChanged = true;
-				}
-				runners.forEach((r) => r());
-				if (animatedShapeChanged && stateRef.current.nextState) {
-					stateRef.current.baseSetStateShallow?.(stateRef.current.nextState);
-				}
-				function update(key, animated, valIn) {
-					const isColor = colorStyleKey[key];
-					const [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
-					let animateToValue = numVal;
-					const value = animated || new import_react_native.Animated.Value(numVal);
-					const curInterpolation = animationsState.current.get(value);
-					if (type) {
-						animationsState.current.set(value, {
-							interpolation: value.interpolate(getInterpolated(curInterpolation?.current ?? value["_value"], numVal, type)),
-							current: numVal
-						});
-					}
-					if (isColor) {
-						animateToValue = curInterpolation?.animateToValue ? 0 : 1;
-						animationsState.current.set(value, {
-							current: valIn,
-							interpolation: value.interpolate(getColorInterpolated(curInterpolation?.current, valIn, animateToValue)),
-							animateToValue: curInterpolation?.animateToValue ? 0 : 1
-						});
-					}
-					const animationConfig = getAnimationConfig(key, animations, props.transition, "default");
-					runners.push(() => {
-						value.stopAnimation();
-						const anim = import_react_native.Animated[animationConfig.type || "spring"](value, {
-							toValue: animateToValue,
-							...animationConfig,
-							useNativeDriver: useNativeDriverForNode
-						});
-						(animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), anim]) : anim).start();
-					});
-					return value;
-				}
-			});
-			if (process.env.NODE_ENV === "development") {
-				if (props["debug"] === "verbose") {
-					console.info(`Animated`, {
-						response: res,
-						inputStyle: style,
-						isExiting
-					});
-				}
-			}
-			return res;
-		}
-	};
-}
-function getColorInterpolated(currentColor, nextColor, animateToValue) {
-	const inputRange = [0, 1];
-	const outputRange = [currentColor ? currentColor : nextColor, nextColor];
-	if (animateToValue === 0) {
-		outputRange.reverse();
-	}
-	return {
-		inputRange,
-		outputRange
-	};
-}
-function getInterpolated(current, next, postfix = "deg") {
-	if (next === current) {
-		current = next - 1e-9;
-	}
-	const inputRange = [current, next];
-	const outputRange = [`${current}${postfix}`, `${next}${postfix}`];
-	if (next < current) {
-		inputRange.reverse();
-		outputRange.reverse();
-	}
-	return {
-		inputRange,
-		outputRange
-	};
-}
-function getAnimationConfig(key, animations, transition, animationState = "default") {
-	const normalized = (0, import_animation_helpers.normalizeTransition)(transition);
-	const shortKey = transformShorthands[key];
-	const propAnimation = normalized.properties[key] ?? normalized.properties[shortKey];
-	let animationType = null;
-	let extraConf = {};
-	if (typeof propAnimation === "string") {
-		animationType = propAnimation;
-	} else if (propAnimation && typeof propAnimation === "object") {
-		animationType = propAnimation.type || (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-		extraConf = propAnimation;
-	} else {
-		animationType = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-	}
-	if (normalized.delay && !extraConf.delay) {
-		extraConf = {
-			...extraConf,
-			delay: normalized.delay
-		};
-	}
-	const found = animationType ? animations[animationType] : {};
-	return {
-		...found,
-		...normalized.config,
-		...extraConf
-	};
-}
-const transformShorthands = {
-	x: "translateX",
-	y: "translateY",
-	translateX: "x",
-	translateY: "y"
-};
-function getValue(input, isColor = false) {
-	if (typeof input !== "string") {
-		return [input];
-	}
-	const [_, number, after] = input.match(/(-?(?:\d+\.?\d*|\.\d+))(deg|%|px)?/) ?? [];
-	return [+number, after];
-}