@tamagui/animations-css 1.0.1-beta.139 → 1.0.1-beta.142

package/dist/cjs/createAnimations.js

@@ -21,24 +21,51 @@ __export(createAnimations_exports, {
   createAnimations: () => createAnimations
 });
 module.exports = __toCommonJS(createAnimations_exports);
+var import_core = require("@tamagui/core");
+var import_react = require("react");
 function createAnimations(animations) {
   return {
     avoidClasses: false,
-    View: "div",
-    Text: "span",
+    View: import_core.Stack,
+    Text: import_core.Text,
     animations,
+    useAnimatedNumber(initial) {
+      const val = (0, import_react.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, { getStyle }) => {
-      const animation = animations[props.animation];
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
       if (!animation) {
         throw new Error(`no animation found: ${props.animation}`);
       }
       const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
-      return {
+      const style = {
         style: {
           transition: `${keys} ${animation}`,
           ...getStyle()
         }
       };
+      return (0, import_react.useMemo)(() => {
+        return style;
+      }, [JSON.stringify(style)]);
     }
   };
 }

package/dist/cjs/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { AnimationDriver } from '@tamagui/core'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: 'div',\n    Text: 'span',\n    animations,\n    useAnimations: (props, { getStyle }) => {\n      const animation = animations[props.animation as any]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      return {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\n      }\n    },\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,eAAe,CAAC,OAAO,EAAE,eAAe;AACtC,YAAM,YAAY,WAAW,MAAM;AACnC,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,aAAO;AAAA,QACL,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,UACvB,GAAG,SAAS;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { AnimationDriver, Stack, Text } from '@tamagui/core'\nimport { useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: Stack,\n    Text: Text,\n    animations,\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, { getStyle }) => {\n      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      const style = {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\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;AAAA;AAAA;AAAA;AAAA,kBAA6C;AAC7C,mBAAgC;AAEzB,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,yBAAO,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,OAAO,EAAE,eAAe;AACtC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,YAAM,QAAQ;AAAA,QACZ,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,UACvB,GAAG,SAAS;AAAA,QACd;AAAA,MACF;AAEA,aAAO,0BAAQ,MAAM;AACnB,eAAO;AAAA,MAET,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/createAnimations.js

@@ -1,21 +1,48 @@
+import { Stack, Text } from "@tamagui/core";
+import { useMemo, useRef } from "react";
 function createAnimations(animations) {
   return {
     avoidClasses: false,
-    View: "div",
-    Text: "span",
+    View: Stack,
+    Text,
     animations,
+    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, { getStyle }) => {
-      const animation = animations[props.animation];
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
       if (!animation) {
         throw new Error(`no animation found: ${props.animation}`);
       }
       const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
-      return {
+      const style = {
         style: {
           transition: `${keys} ${animation}`,
           ...getStyle()
         }
       };
+      return useMemo(() => {
+        return style;
+      }, [JSON.stringify(style)]);
     }
   };
 }

package/dist/esm/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { AnimationDriver } from '@tamagui/core'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: 'div',\n    Text: 'span',\n    animations,\n    useAnimations: (props, { getStyle }) => {\n      const animation = animations[props.animation as any]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      return {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\n      }\n    },\n  }\n}\n"],
-  "mappings": "AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,eAAe,CAAC,OAAO,EAAE,eAAe;AACtC,YAAM,YAAY,WAAW,MAAM;AACnC,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,aAAO;AAAA,QACL,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,UACvB,GAAG,SAAS;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { AnimationDriver, Stack, Text } from '@tamagui/core'\nimport { useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: Stack,\n    Text: Text,\n    animations,\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, { getStyle }) => {\n      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      const style = {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\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;AACA;AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN;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,OAAO,EAAE,eAAe;AACtC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,YAAM,QAAQ;AAAA,QACZ,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,UACvB,GAAG,SAAS;AAAA,QACd;AAAA,MACF;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,MAET,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/jsx/createAnimations.js

@@ -1,21 +1,48 @@
+import { Stack, Text } from "@tamagui/core";
+import { useMemo, useRef } from "react";
 function createAnimations(animations) {
   return {
     avoidClasses: false,
-    View: "div",
-    Text: "span",
+    View: Stack,
+    Text,
     animations,
+    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, { getStyle }) => {
-      const animation = animations[props.animation];
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
+      const animation = animations[animationKey];
       if (!animation) {
         throw new Error(`no animation found: ${props.animation}`);
       }
       const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
-      return {
+      const style = {
         style: {
           transition: `${keys} ${animation}`,
           ...getStyle()
         }
       };
+      return useMemo(() => {
+        return style;
+      }, [JSON.stringify(style)]);
     }
   };
 }

package/dist/jsx/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { AnimationDriver } from '@tamagui/core'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: 'div',\n    Text: 'span',\n    animations,\n    useAnimations: (props, { getStyle }) => {\n      const animation = animations[props.animation as any]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      return {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\n      }\n    },\n  }\n}\n"],
-  "mappings": "AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,eAAe,CAAC,OAAO,EAAE,eAAe;AACtC,YAAM,YAAY,WAAW,MAAM;AACnC,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,aAAO;AAAA,QACL,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,UACvB,GAAG,SAAS;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { AnimationDriver, Stack, Text } from '@tamagui/core'\nimport { useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  return {\n    avoidClasses: false,\n    View: Stack,\n    Text: Text,\n    animations,\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, { getStyle }) => {\n      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n      const animation = animations[animationKey as any]\n      if (!animation) {\n        throw new Error(`no animation found: ${props.animation}`)\n      }\n\n      const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n      const style = {\n        style: {\n          transition: `${keys} ${animation}`,\n          ...getStyle(),\n        },\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;AACA;AAEO,0BAA4C,YAAmC;AACpF,SAAO;AAAA,IACL,cAAc;AAAA,IACd,MAAM;AAAA,IACN;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,OAAO,EAAE,eAAe;AACtC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,MAAM,uBAAuB,MAAM,WAAW;AAAA,MAC1D;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,YAAM,QAAQ;AAAA,QACZ,OAAO;AAAA,UACL,YAAY,GAAG,QAAQ;AAAA,UACvB,GAAG,SAAS;AAAA,QACd;AAAA,MACF;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,MAET,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.0.1-beta.139",
+  "version": "1.0.1-beta.142",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -14,10 +14,10 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.139"
+    "@tamagui/core": "^1.0.1-beta.142"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.139"
+    "@tamagui/build": "^1.0.1-beta.142"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/createAnimations.tsx

@@ -1,25 +1,57 @@
-import { AnimationDriver } from '@tamagui/core'
+import { AnimationDriver, Stack, Text } from '@tamagui/core'
+import { useMemo, useRef } from 'react'
 
 export function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {
   return {
     avoidClasses: false,
-    View: 'div',
-    Text: 'span',
+    View: Stack,
+    Text: Text,
     animations,
+
+    useAnimatedNumber(initial) {
+      const val = useRef(initial)
+      return {
+        getInstance() {
+          return val
+        },
+        getValue() {
+          return val.current
+        },
+        setValue(next) {
+          val.current = next
+        },
+        stop() {},
+      }
+    },
+
+    useAnimatedNumberReaction(val, reaction) {
+      // TODO use event listeners, would need access to the corresponsing node...
+    },
+
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue())
+    },
+
     useAnimations: (props, { getStyle }) => {
-      const animation = animations[props.animation as any]
+      const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation
+      const animation = animations[animationKey as any]
       if (!animation) {
         throw new Error(`no animation found: ${props.animation}`)
       }
 
       const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'
 
-      return {
+      const style = {
         style: {
           transition: `${keys} ${animation}`,
           ...getStyle(),
         },
       }
+
+      return useMemo(() => {
+        return style
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [JSON.stringify(style)])
     },
   }
 }