@tamagui/animations-css 1.2.8 → 1.2.10

package/dist/esm/createAnimations.mjs

@@ -0,0 +1,72 @@
+import {
+  Stack,
+  Text,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { usePresence } from "@tamagui/use-presence";
+import { useMemo, useRef } from "react";
+function createAnimations(animations) {
+  return {
+    View: Stack,
+    Text,
+    animations,
+    usePresence,
+    useAnimatedNumber(initial) {
+      const val = useRef(initial);
+      return {
+        getInstance() {
+          return val;
+        },
+        getValue() {
+          return val.current;
+        },
+        setValue(next) {
+          val.current = next;
+        },
+        stop() {
+        }
+      };
+    },
+    useAnimatedNumberReaction(val, reaction) {
+    },
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue());
+    },
+    useAnimations: ({ props, presence, style, state, hostRef }) => {
+      const isEntering = !!state.unmounted;
+      const isExiting = (presence == null ? void 0 : presence[0]) === false;
+      const sendExitComplete = presence == null ? void 0 : presence[1];
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
+      if (!animation) {
+        return null;
+      }
+      const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
+      useIsomorphicLayoutEffect(() => {
+        if (!sendExitComplete || !isExiting || !hostRef.current)
+          return;
+        const node = hostRef.current;
+        const onFinishAnimation = () => {
+          sendExitComplete == null ? void 0 : sendExitComplete();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onFinishAnimation);
+        return () => {
+          node.removeEventListener("transitionend", onFinishAnimation);
+          node.addEventListener("transitioncancel", onFinishAnimation);
+        };
+      }, [sendExitComplete, isExiting]);
+      style.transition = `${keys} ${animation}`;
+      if (process.env.NODE_ENV === "development" && props["debug"]) {
+        console.log("CSS animation", style, { isEntering, isExiting });
+      }
+      return useMemo(() => {
+        return { style };
+      }, [JSON.stringify(style)]);
+    }
+  };
+}
+export {
+  createAnimations
+};
+//# sourceMappingURL=createAnimations.mjs.map

package/dist/esm/createAnimations.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/createAnimations.tsx"],
+  "sourcesContent": ["import {\n  AnimationDriver,\n  Stack,\n  Text,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { usePresence } from '@tamagui/use-presence'\nimport { useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(\n  animations: A,\n): AnimationDriver<A> {\n  return {\n    View: Stack,\n    Text: Text,\n    animations,\n    usePresence,\n\n    useAnimatedNumber(initial) {\n      const val = useRef(initial)\n      return {\n        getInstance() {\n          return val\n        },\n        getValue() {\n          return val.current\n        },\n        setValue(next) {\n          val.current = next\n        },\n        stop() {},\n      }\n    },\n\n    useAnimatedNumberReaction(val, reaction) {\n      // TODO use event listeners, would need access to the corresponsing node...\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimations: ({ props, presence, style, state, hostRef }) => {\n      const isEntering = !!state.unmounted\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n      const animationKey = Array.isArray(props.animation)\n        ? props.animation[0]\n        : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        return null\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      useIsomorphicLayoutEffect(() => {\n        if (!sendExitComplete || !isExiting || !hostRef.current) return\n        const node = hostRef.current as HTMLElement\n        const onFinishAnimation = () => {\n          sendExitComplete?.()\n        }\n        node.addEventListener('transitionend', onFinishAnimation)\n        node.addEventListener('transitioncancel', onFinishAnimation)\n        return () => {\n          node.removeEventListener('transitionend', onFinishAnimation)\n          node.addEventListener('transitioncancel', onFinishAnimation)\n        }\n      }, [sendExitComplete, isExiting])\n\n      // add css transition\n      style.transition = `${keys} ${animation}`\n\n      if (process.env.NODE_ENV === 'development' && props['debug']) {\n        // eslint-disable-next-line no-console\n        console.log('CSS animation', style, { isEntering, isExiting })\n      }\n\n      return useMemo(() => {\n        return { style }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [JSON.stringify(style)])\n    },\n  }\n}\n"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,SAAS,cAAc;AAEzB,SAAS,iBACd,YACoB;AACpB,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,OAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,OAAO,QAAQ,MAAM;AAC7D,YAAM,aAAa,CAAC,CAAC,MAAM;AAC3B,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAC9C,MAAM,UAAU,CAAC,IACjB,MAAM;AACV,YAAM,YAAY,WAAW,YAAmB;AAChD,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAGhC,YAAM,aAAa,GAAG,QAAQ;AAE9B,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,OAAO,GAAG;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/index.mjs

@@ -0,0 +1,2 @@
+export * from "./createAnimations";
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -13,11 +13,11 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.2.8",
-    "@tamagui/use-presence": "^1.2.8"
+    "@tamagui/core": "^1.2.10",
+    "@tamagui/use-presence": "^1.2.10"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.2.8"
+    "@tamagui/build": "^1.2.10"
   },
   "scripts": {
     "build": "tamagui-build",