@tamagui/animations-css 1.125.21 → 1.125.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.125.21",
+  "version": "1.125.23",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -26,13 +26,13 @@
     }
   },
   "dependencies": {
-    "@tamagui/constants": "1.125.21",
-    "@tamagui/cubic-bezier-animator": "1.125.21",
-    "@tamagui/use-presence": "1.125.21",
-    "@tamagui/web": "1.125.21"
+    "@tamagui/constants": "1.125.23",
+    "@tamagui/cubic-bezier-animator": "1.125.23",
+    "@tamagui/use-presence": "1.125.23",
+    "@tamagui/web": "1.125.23"
   },
   "devDependencies": {
-    "@tamagui/build": "1.125.21",
+    "@tamagui/build": "1.125.23",
     "react": "*",
     "react-dom": "*"
   },

package/types/createAnimations.d.ts.map

@@ -0,0 +1,13 @@
+{
+  "mappings": "AAEA,cAAc,uBAAgD,cAAc;AAI5E,OAAO,iBAAS,iBAAiB,UAAU,QAAQA,YAAY,IAAI,gBAAgB",
+  "names": [
+    "animations: A"
+  ],
+  "sources": [
+    "src/createAnimations.tsx"
+  ],
+  "sourcesContent": [
+    "import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'\nimport { transformsToString } from '@tamagui/web'\nimport React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n  const reactionListeners = new WeakMap<any, Set<Function>>()\n\n  return {\n    animations,\n    usePresence,\n    ResetPresence,\n    supportsCSSVars: true,\n\n    useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {\n      const [val, setVal] = React.useState(initial)\n      const [onFinish, setOnFinish] = useState<Function | undefined>()\n\n      useIsomorphicLayoutEffect(() => {\n        if (onFinish) {\n          onFinish?.()\n          setOnFinish(undefined)\n        }\n      }, [onFinish])\n\n      return {\n        getInstance() {\n          return setVal\n        },\n        getValue() {\n          return val\n        },\n        setValue(next, config, onFinish) {\n          setVal(next)\n          setOnFinish(onFinish)\n        },\n        stop() {},\n      }\n    },\n\n    useAnimatedNumberReaction({ value }, onValue) {\n      React.useEffect(() => {\n        const instance = value.getInstance()\n        let queue = reactionListeners.get(instance)\n        if (!queue) {\n          const next = new Set<Function>()\n          reactionListeners.set(instance, next)\n          queue = next!\n        }\n        queue.add(onValue)\n        return () => {\n          queue?.delete(onValue)\n        }\n      }, [])\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimations: ({ props, presence, style, componentState, stateRef }) => {\n      const isEntering = !!componentState.unmounted\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n      // const initialPositionRef = useRef<any>(null)\n      const [animationKey, animationConfig] = Array.isArray(props.animation)\n        ? props.animation\n        : [props.animation]\n      const animation = animations[animationKey]\n      const keys = props.animateOnly ?? ['all']\n\n      useIsomorphicLayoutEffect(() => {\n        const host = stateRef.current.host\n        if (!sendExitComplete || !isExiting || !host) return\n        const node = host 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.removeEventListener('transitioncancel', onFinishAnimation)\n        }\n      }, [sendExitComplete, isExiting])\n\n      if (animation) {\n        if (Array.isArray(style.transform)) {\n          style.transform = transformsToString(style.transform)\n        }\n\n        // add css transition\n        // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function\n        // for non layout transform properties either use animate function or find a workaround to do it with css\n        style.transition = keys\n          .map((key) => {\n            const override = animations[animationConfig?.[key]] ?? animation\n            return `${key} ${override}`\n          })\n          .join(', ')\n      }\n\n      if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n        console.info('CSS animation', {\n          props,\n          animations,\n          animation,\n          animationKey,\n          style,\n          isEntering,\n          isExiting,\n        })\n      }\n\n      if (!animation) {\n        return null\n      }\n\n      return { style, className: isEntering ? 't_unmounted' : '' }\n    },\n  }\n}\n\n// layout animations\n// useIsomorphicLayoutEffect(() => {\n//   if (!host || !props.layout) {\n//     return\n//   }\n//   // @ts-ignore\n//   const boundingBox = host?.getBoundingClientRect()\n//   if (isChanged(initialPositionRef.current, boundingBox)) {\n//     const transform = invert(\n//       host,\n//       boundingBox,\n//       initialPositionRef.current\n//     )\n\n//     animate({\n//       from: transform,\n//       to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },\n//       duration: 1000,\n//       onUpdate: ({ x, y, scaleX, scaleY }) => {\n//         // @ts-ignore\n//         host.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`\n//         // TODO: handle childRef inverse scale\n//         //   childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${\n//         //     1 / scaleY\n//         //   })`\n//       },\n//       // TODO: extract ease-in from string and convert/map it to a cubicBezier array\n//       cubicBezier: [0, 1.38, 1, -0.41],\n//     })\n//   }\n//   initialPositionRef.current = boundingBox\n// })\n\n// style.transition = `${keys} ${animation}${\n//   props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''\n// }`\n\n// const isChanged = (initialBox: any, finalBox: any) => {\n//   // we just mounted, so we don't have complete data yet\n//   if (!initialBox || !finalBox) return false\n\n//   // deep compare the two boxes\n//   return JSON.stringify(initialBox) !== JSON.stringify(finalBox)\n// }\n\n// const invert = (el, from, to) => {\n//   const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from\n//   const { x, y, width, height } = to\n\n//   const transform = {\n//     x: x - fromX - (fromWidth - width) / 2,\n//     y: y - fromY - (fromHeight - height) / 2,\n//     scaleX: width / fromWidth,\n//     scaleY: height / fromHeight,\n//   }\n\n//   el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`\n\n//   return transform\n// }\n"
+  ],
+  "version": 3
+}

package/types/index.d.ts.map

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