@tamagui/animations-react-native 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-react-native",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "source": "src/index.ts",
   "sideEffects": [
     "./polyfill.js"
@@ -15,11 +15,11 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.0.10",
-    "@tamagui/use-presence": "^1.0.10"
+    "@tamagui/core": "^1.0.12",
+    "@tamagui/use-presence": "^1.0.12"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.10",
+    "@tamagui/build": "^1.0.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "*"

package/dist/jsx/createAnimations.js

@@ -1,186 +0,0 @@
-import { PresenceContext, usePresence } from "@tamagui/animate-presence";
-import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
-import { useContext, useMemo, useRef } from "react";
-import { Animated } from "react-native";
-const animatedStyleKey = {
-  transform: true,
-  opacity: true
-};
-function createAnimations(animations) {
-  const AnimatedView = Animated.View;
-  const AnimatedText = Animated.Text;
-  AnimatedView["displayName"] = "AnimatedView";
-  AnimatedText["displayName"] = "AnimatedText";
-  return {
-    avoidClasses: true,
-    animations,
-    View: AnimatedView,
-    Text: AnimatedText,
-    useAnimations: (props, helpers) => {
-      var _a;
-      const { onDidAnimate, delay, getStyle, state } = helpers;
-      const [isPresent, sendExitComplete] = usePresence();
-      const presence = useContext(PresenceContext);
-      const isExiting = isPresent === false;
-      const isEntering = !state.mounted;
-      const all = getStyle({
-        isExiting,
-        isEntering,
-        exitVariant: presence == null ? void 0 : presence.exitVariant,
-        enterVariant: presence == null ? void 0 : presence.enterVariant
-      });
-      const animateStyles = useRef({});
-      const animatedTranforms = useRef([]);
-      const interpolations = useRef(/* @__PURE__ */ new WeakMap());
-      const runners = [];
-      const completions = [];
-      function update(key, animated, valIn) {
-        const [val, type] = getValue(valIn);
-        const value = animated || new Animated.Value(val);
-        if (type) {
-          interpolations.current.set(value, getInterpolated(value, type, val));
-        }
-        if (animated) {
-          const animationConfig = getAnimationConfig(key, animations, props.animation);
-          let resolve;
-          const promise = new Promise((res) => {
-            resolve = res;
-          });
-          completions.push(promise);
-          runners.push(() => {
-            Animated.spring(animated, {
-              toValue: val,
-              useNativeDriver: !isWeb,
-              ...animationConfig
-            }).start(({ finished }) => {
-              if (finished) {
-                resolve();
-              }
-            });
-          });
-        }
-        return value;
-      }
-      function getValue(input) {
-        var _a2;
-        if (typeof input !== "string") {
-          return [input];
-        }
-        const neg = input[0] === "-";
-        if (neg)
-          input = input.slice(1);
-        const [_, number, after] = (_a2 = input.match(/([-0-9]+)(deg|%)/)) != null ? _a2 : [];
-        return [+number * (neg ? -1 : 1), after];
-      }
-      function getInterpolated(val, postfix, next) {
-        const cur = val["_value"];
-        const inputRange = [cur, next];
-        const outputRange = [`${cur}deg`, `${next}deg`];
-        if (next < cur) {
-          inputRange.reverse();
-          outputRange.reverse();
-        }
-        return val.interpolate({
-          inputRange,
-          outputRange
-        });
-      }
-      const nonAnimatedStyle = {};
-      for (const key of Object.keys(all)) {
-        const val = all[key];
-        if (animatedStyleKey[key]) {
-          if (key === "transform") {
-            if (val) {
-              for (const [index, transform] of val.entries()) {
-                if (!transform)
-                  continue;
-                const tkey = Object.keys(transform)[0];
-                animatedTranforms.current[index] = {
-                  [tkey]: update(tkey, (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey], transform[tkey])
-                };
-              }
-            }
-          } else {
-            animateStyles.current[key] = update(key, animateStyles.current[key], val);
-          }
-        } else {
-          nonAnimatedStyle[key] = val;
-        }
-      }
-      const animatedStyle = {
-        ...Object.fromEntries(Object.entries({
-          ...animateStyles.current
-        }).map(([k, v]) => [k, interpolations.current.get(v) || v])),
-        transform: animatedTranforms.current.map((r) => {
-          const key = Object.keys(r)[0];
-          const val = interpolations.current.get(r[key]) || r[key];
-          return { [key]: val };
-        })
-      };
-      const args = [
-        JSON.stringify(all),
-        state.mounted,
-        state.hover,
-        state.press,
-        state.pressIn,
-        state.focus,
-        delay,
-        isPresent,
-        onDidAnimate,
-        presence == null ? void 0 : presence.exitVariant,
-        presence == null ? void 0 : presence.enterVariant
-      ];
-      useIsomorphicLayoutEffect(() => {
-        for (const runner of runners) {
-          runner();
-        }
-        Promise.all(completions).then(() => {
-          onDidAnimate == null ? void 0 : onDidAnimate();
-          if (isExiting) {
-            sendExitComplete == null ? void 0 : sendExitComplete();
-          }
-        });
-      }, args);
-      return useMemo(() => {
-        return {
-          style: [nonAnimatedStyle, animatedStyle]
-        };
-      }, args);
-    }
-  };
-}
-function getAnimationConfig(key, animations, animation) {
-  if (typeof animation === "string") {
-    return animations[animation];
-  }
-  let type = "";
-  let extraConf;
-  if (Array.isArray(animation)) {
-    type = animation[0];
-    const conf = animation[1] && animation[1][key];
-    if (conf) {
-      if (typeof conf === "string") {
-        type = conf;
-      } else {
-        type = conf.type || type;
-        extraConf = conf;
-      }
-    }
-  } else {
-    const val = animation == null ? void 0 : animation[key];
-    type = val == null ? void 0 : val.type;
-    extraConf = val;
-  }
-  const found = animations[type];
-  if (!found) {
-    throw new Error(`No animation of type "${type}" for key "${key}"`);
-  }
-  return {
-    ...found,
-    ...extraConf
-  };
-}
-export {
-  createAnimations
-};
-//# sourceMappingURL=createAnimations.js.map

package/dist/jsx/createAnimations.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useContext, useMemo, useRef } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n  [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n  Pick<\n    Animated.SpringAnimationConfig,\n    | 'delay'\n    | 'bounciness'\n    | 'damping'\n    | 'friction'\n    | 'mass'\n    | 'overshootClamping'\n    | 'speed'\n    | 'stiffness'\n    | 'tension'\n    | 'velocity'\n  >\n>\n\nconst animatedStyleKey = {\n  transform: true,\n  opacity: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n  const AnimatedView = Animated.View\n  const AnimatedText = Animated.Text\n\n  AnimatedView['displayName'] = 'AnimatedView'\n  AnimatedText['displayName'] = 'AnimatedText'\n\n  return {\n    avoidClasses: true,\n    animations,\n    View: AnimatedView,\n    Text: AnimatedText,\n    useAnimations: (props, helpers) => {\n      const { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n      const completions: Promise<void>[] = []\n\n      function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {\n        const [val, type] = getValue(valIn)\n        const value = animated || new Animated.Value(val)\n        if (type) {\n          interpolations.current.set(value, getInterpolated(value, type, val))\n        }\n        if (animated) {\n          const animationConfig = getAnimationConfig(key, animations, props.animation)\n\n          let resolve\n          const promise = new Promise<void>((res) => {\n            resolve = res\n          })\n          completions.push(promise)\n\n          runners.push(() => {\n            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start(({ finished }) => {\n              if (finished) {\n                resolve()\n              }\n            })\n          })\n        }\n        return value\n      }\n\n      function getValue(input: number | string) {\n        if (typeof input !== 'string') {\n          return [input] as const\n        }\n        const neg = input[0] === '-'\n        if (neg) input = input.slice(1)\n        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n        return [+number * (neg ? -1 : 1), after] as const\n      }\n\n      function getInterpolated(val: Animated.Value, postfix: string, next: number) {\n        const cur = val['_value'] as number\n        const inputRange = [cur, next]\n        const outputRange = [`${cur}deg`, `${next}deg`]\n        if (next < cur) {\n          inputRange.reverse()\n          outputRange.reverse()\n        }\n        return val.interpolate({\n          inputRange,\n          outputRange,\n        })\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                animatedTranforms.current[index] = {\n                  [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(key, animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...Object.fromEntries(\n          Object.entries({\n            ...animateStyles.current,\n          }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n        ),\n        transform: animatedTranforms.current.map((r) => {\n          const key = Object.keys(r)[0]\n          const val = interpolations.current.get(r[key]) || r[key]\n          return { [key]: val }\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        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      useIsomorphicLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          runner()\n        }\n        Promise.all(completions).then(() => {\n          onDidAnimate?.()\n          if (isExiting) {\n            sendExitComplete?.()\n          }\n        })\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] && 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  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/jsx/index.js

@@ -1,3 +0,0 @@
-import "./polyfill";
-export * from "./createAnimations";
-//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\n"],
-  "mappings": "AAAA;AAEA;",
-  "names": []
-}

package/dist/jsx/polyfill.js

@@ -1,4 +0,0 @@
-if (typeof requestAnimationFrame === "undefined") {
-  globalThis["requestAnimationFrame"] = setImmediate;
-}
-//# sourceMappingURL=polyfill.js.map

package/dist/jsx/polyfill.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/polyfill.ts"],
-  "sourcesContent": ["// for SSR\nif (typeof requestAnimationFrame === 'undefined') {\n  globalThis['requestAnimationFrame'] = setImmediate\n}\n"],
-  "mappings": "AACA,IAAI,OAAO,0BAA0B,aAAa;AAChD,aAAW,2BAA2B;AACxC;",
-  "names": []
-}