@tamagui/animations-css 1.74.3 → 1.74.5

package/dist/esm/createAnimations.native.js

@@ -0,0 +1,96 @@
+import {
+  Stack,
+  Text,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { animate } from "@tamagui/cubic-bezier-animator";
+import { usePresence } from "@tamagui/use-presence";
+import { useRef, useState } from "react";
+function createAnimations(animations) {
+  return {
+    View: Stack,
+    Text,
+    animations,
+    usePresence,
+    supportsCSSVars: !0,
+    useAnimatedNumber(initial) {
+      const [val, setVal] = useState(initial);
+      return {
+        getInstance() {
+          return val;
+        },
+        getValue() {
+          return val;
+        },
+        setValue(next) {
+          setVal(next);
+        },
+        stop() {
+        }
+      };
+    },
+    useAnimatedNumberReaction({ hostRef, value }, onValue) {
+      useIsomorphicLayoutEffect(() => {
+        if (!hostRef.current)
+          return;
+        const onTransitionEvent = (e) => {
+          onValue(value.getValue());
+        }, node = hostRef.current;
+        return node.addEventListener("transitionstart", onTransitionEvent), node.addEventListener("transitioncancel", onTransitionEvent), node.addEventListener("transitionend", onTransitionEvent), () => {
+          node.removeEventListener("transitionstart", onTransitionEvent), node.removeEventListener("transitioncancel", onTransitionEvent), node.removeEventListener("transitionend", onTransitionEvent);
+        };
+      }, [hostRef, onValue]);
+    },
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue());
+    },
+    useAnimations: ({ props, presence, style, componentState, hostRef }) => {
+      const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], initialPositionRef = useRef(null), animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, animation = animations[animationKey], keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
+      return useIsomorphicLayoutEffect(() => {
+        if (!sendExitComplete || !isExiting || !hostRef.current)
+          return;
+        const node = hostRef.current, onFinishAnimation = () => {
+          sendExitComplete?.();
+        };
+        return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
+          node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
+        };
+      }, [sendExitComplete, isExiting]), useIsomorphicLayoutEffect(() => {
+        if (!hostRef.current || !props.layout)
+          return;
+        const boundingBox = hostRef.current?.getBoundingClientRect();
+        if (isChanged(initialPositionRef.current, boundingBox)) {
+          const transform = invert(
+            hostRef.current,
+            boundingBox,
+            initialPositionRef.current
+          );
+          animate({
+            from: transform,
+            to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
+            duration: 1e3,
+            onUpdate: ({ x, y, scaleX, scaleY }) => {
+              hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
+            },
+            // TODO: extract ease-in from string and convert/map it to a cubicBezier array
+            cubicBezier: [0, 1.38, 1, -0.41]
+          });
+        }
+        initialPositionRef.current = boundingBox;
+      }), animation ? (style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`, process.env.NODE_ENV === "development" && props.debug && console.log("CSS animation", style, { isEntering, isExiting }), { style }) : null;
+    }
+  };
+}
+const isChanged = (initialBox, finalBox) => !initialBox || !finalBox ? !1 : JSON.stringify(initialBox) !== JSON.stringify(finalBox), invert = (el, from, to) => {
+  const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from, { x, y, width, height } = to, transform = {
+    x: x - fromX - (fromWidth - width) / 2,
+    y: y - fromY - (fromHeight - height) / 2,
+    scaleX: width / fromWidth,
+    scaleY: height / fromHeight
+  };
+  return el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`, transform;
+};
+export {
+  createAnimations
+};
+//# sourceMappingURL=createAnimations.js.map

package/dist/esm/createAnimations.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/createAnimations.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.native.js

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

package/dist/esm/index.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.74.3",
+  "version": "1.74.5",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -13,12 +13,12 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/cubic-bezier-animator": "1.74.3",
-    "@tamagui/use-presence": "1.74.3",
-    "@tamagui/web": "1.74.3"
+    "@tamagui/cubic-bezier-animator": "1.74.5",
+    "@tamagui/use-presence": "1.74.5",
+    "@tamagui/web": "1.74.5"
   },
   "devDependencies": {
-    "@tamagui/build": "1.74.3"
+    "@tamagui/build": "1.74.5"
   },
   "scripts": {
     "build": "tamagui-build",