@tamagui/animations-moti 2.0.0-rc.9 → 2.0.0

package/dist/cjs/createAnimations.cjs

@@ -2,123 +2,136 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var createAnimations_exports = {};
 __export(createAnimations_exports, {
   createAnimations: () => createAnimations
 });
 module.exports = __toCommonJS(createAnimations_exports);
-var import_use_presence = require("@tamagui/use-presence"),
-  import_core = require("@tamagui/core"),
-  import_author = require("moti/author"),
-  import_react = __toESM(require("react"), 1),
-  import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
-const resolveDynamicValue = (value, isDark) => value && typeof value == "object" && "dynamic" in value ? isDark ? value.dynamic.dark : value.dynamic.light : value,
-  safeESModule = a => {
-    const b = a;
-    return (b.__esModule || b[Symbol.toStringTag] === "Module" ? b.default : b) || a;
-  },
-  Animated = safeESModule(import_react_native_reanimated.default);
+var import_use_presence = require("@tamagui/use-presence");
+var import_core = require("@tamagui/core");
+var import_author = require("moti/author");
+var import_react = __toESM(require("react"), 1);
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+const resolveDynamicValue = (value, isDark) => {
+  if (value && typeof value === "object" && "dynamic" in value) {
+    const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
+    return dynamicValue;
+  }
+  return value;
+};
+const safeESModule = a => {
+  const b = a;
+  const out = b.__esModule || b[Symbol.toStringTag] === "Module" ? b.default : b;
+  return out || a;
+};
+const Animated = safeESModule(import_react_native_reanimated.default);
 function createTamaguiAnimatedComponent(defaultTag = "div") {
-  const isText = defaultTag === "span",
-    Component = Animated.createAnimatedComponent((0, import_react.forwardRef)((propsIn, ref) => {
-      const {
-          forwardedRef,
-          animation,
-          render = defaultTag,
-          ...propsRest
-        } = propsIn,
-        hostRef = (0, import_react.useRef)(null),
-        composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef),
-        stateRef = (0, import_react.useRef)(null);
-      stateRef.current || (stateRef.current = {
+  const isText = defaultTag === "span";
+  const Component = Animated.createAnimatedComponent((0, import_react.forwardRef)((propsIn, ref) => {
+    const {
+      forwardedRef,
+      animation,
+      render = defaultTag,
+      ...propsRest
+    } = propsIn;
+    const hostRef = (0, import_react.useRef)(null);
+    const composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef);
+    const stateRef = (0, import_react.useRef)(null);
+    if (!stateRef.current) {
+      stateRef.current = {
         get host() {
           return hostRef.current;
         }
-      });
-      const [_, state] = (0, import_core.useThemeWithState)({}),
-        props = (0, import_core.getSplitStyles)(propsRest, isText ? import_core.Text.staticConfig : import_core.View.staticConfig, state?.theme, state?.name, {
-          unmounted: !1
-        }, {
-          isAnimated: !1,
-          noClass: !0
-        })?.viewProps || {},
-        Element = render,
-        transformedProps = import_core.hooks.usePropsTransform?.(render, props, stateRef, !1);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
-        ...transformedProps,
-        ref: composedRefs
-      });
-    }));
-  return Component.acceptTagProp = !0, Component;
+      };
+    }
+    const [_, state] = (0, import_core.useThemeWithState)({});
+    const result = (0, import_core.getSplitStyles)(propsRest, isText ? import_core.Text.staticConfig : import_core.View.staticConfig, state?.theme, state?.name, {
+      unmounted: false
+    }, {
+      isAnimated: false,
+      noClass: true
+    });
+    const props = result?.viewProps || {};
+    const Element = render;
+    const transformedProps = import_core.hooks.usePropsTransform?.(render, props, stateRef, false);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
+      ...transformedProps,
+      ref: composedRefs
+    });
+  }));
+  Component["acceptRenderProp"] = true;
+  return Component;
 }
-const AnimatedView = createTamaguiAnimatedComponent("div"),
-  AnimatedText = createTamaguiAnimatedComponent("span"),
-  onlyAnimateKeys = {
-    transform: !0,
-    opacity: !0,
-    height: !0,
-    width: !0,
-    backgroundColor: !0,
-    borderColor: !0,
-    borderLeftColor: !0,
-    borderRightColor: !0,
-    borderTopColor: !0,
-    borderBottomColor: !0,
-    borderRadius: !0,
-    borderTopLeftRadius: !0,
-    borderTopRightRadius: !0,
-    borderBottomLeftRadius: !0,
-    borderBottomRightRadius: !0,
-    borderLeftWidth: !0,
-    borderRightWidth: !0,
-    borderTopWidth: !0,
-    borderBottomWidth: !0,
-    color: !0,
-    left: !0,
-    right: !0,
-    top: !0,
-    bottom: !0,
-    fontSize: !0,
-    fontWeight: !0,
-    lineHeight: !0,
-    letterSpacing: !0
-  };
+const AnimatedView = createTamaguiAnimatedComponent("div");
+const AnimatedText = createTamaguiAnimatedComponent("span");
+const onlyAnimateKeys = {
+  transform: true,
+  opacity: true,
+  height: true,
+  width: true,
+  backgroundColor: true,
+  borderColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderTopColor: true,
+  borderBottomColor: true,
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderTopWidth: true,
+  borderBottomWidth: true,
+  color: true,
+  left: true,
+  right: true,
+  top: true,
+  bottom: true,
+  fontSize: true,
+  fontWeight: true,
+  lineHeight: true,
+  letterSpacing: true
+};
 function createAnimations(animations) {
   return {
+    needsCustomComponent: true,
     View: import_core.isWeb ? AnimatedView : Animated.View,
     Text: import_core.isWeb ? AnimatedText : Animated.Text,
     // View: Animated.View,
     // Text: Animated.Text,
-    isReactNative: !0,
-    supportsCSS: !1,
+    isReactNative: true,
     inputStyle: "value",
     outputStyle: "inline",
     animations,
@@ -142,15 +155,22 @@ function createAnimations(animations) {
         }, onFinish) {
           "worklet";
 
-          config.type === "direct" ? (sharedValue.value = next, onFinish?.()) : config.type === "spring" ? sharedValue.value = (0, import_react_native_reanimated.withSpring)(next, config, onFinish ? () => {
-            "worklet";
+          if (config.type === "direct") {
+            sharedValue.value = next;
+            onFinish?.();
+          } else if (config.type === "spring") {
+            sharedValue.value = (0, import_react_native_reanimated.withSpring)(next, config, onFinish ? () => {
+              "worklet";
 
-            (0, import_react_native_reanimated.runOnJS)(onFinish)();
-          } : void 0) : sharedValue.value = (0, import_react_native_reanimated.withTiming)(next, config, onFinish ? () => {
-            "worklet";
+              (0, import_react_native_reanimated.runOnJS)(onFinish)();
+            } : void 0);
+          } else {
+            sharedValue.value = (0, import_react_native_reanimated.withTiming)(next, config, onFinish ? () => {
+              "worklet";
 
-            (0, import_react_native_reanimated.runOnJS)(onFinish)();
-          } : void 0);
+              (0, import_react_native_reanimated.runOnJS)(onFinish)();
+            } : void 0);
+          }
         },
         stop() {
           "worklet";
@@ -163,8 +183,12 @@ function createAnimations(animations) {
       value
     }, onValue) {
       const instance = value.getInstance();
-      return (0, import_react_native_reanimated.useAnimatedReaction)(() => instance.value, (next, prev) => {
-        prev !== next && (0, import_react_native_reanimated.runOnJS)(onValue)(next);
+      return (0, import_react_native_reanimated.useAnimatedReaction)(() => {
+        return instance.value;
+      }, (next, prev) => {
+        if (prev !== next) {
+          (0, import_react_native_reanimated.runOnJS)(onValue)(next);
+        }
       },
       // dependency array is very important here
       [onValue, instance]);
@@ -173,82 +197,110 @@ function createAnimations(animations) {
      * `getStyle` must be a worklet
      */
     useAnimatedNumberStyle(val, getStyle) {
-      const instance = val.getInstance(),
-        derivedValue = (0, import_react_native_reanimated.useDerivedValue)(() => instance.value, [instance, getStyle]);
-      return (0, import_react_native_reanimated.useAnimatedStyle)(() => getStyle(derivedValue.value), [val, getStyle, derivedValue, instance]);
+      const instance = val.getInstance();
+      const derivedValue = (0, import_react_native_reanimated.useDerivedValue)(() => {
+        return instance.value;
+      }, [instance, getStyle]);
+      return (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+        return getStyle(derivedValue.value);
+      }, [val, getStyle, derivedValue, instance]);
     },
     useAnimations: animationProps => {
       const {
-          props,
-          presence,
-          style,
-          componentState
-        } = animationProps,
-        animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition,
-        isHydrating = componentState.unmounted === !0,
-        disableAnimation = isHydrating || !animationKey,
-        presenceContext = import_react.default.useContext(import_use_presence.PresenceContext),
-        [, themeState] = (0, import_core.useThemeWithState)({}),
-        isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark"),
-        {
-          dontAnimate,
-          motiProps
-        } = (0, import_react.useMemo)(() => {
-          let animate = {},
-            dontAnimate2 = {};
-          if (disableAnimation) for (const key in style) {
-            const rawValue = style[key],
-              value = resolveDynamicValue(rawValue, isDark);
-            value !== void 0 && (dontAnimate2[key] = value);
-          } else {
-            const animateOnly = props.animateOnly;
-            for (const key in style) {
-              const rawValue = style[key],
-                value = resolveDynamicValue(rawValue, isDark);
-              value !== void 0 && (!onlyAnimateKeys[key] || value === "auto" || typeof value == "string" && value.startsWith("calc") || animateOnly && !animateOnly.includes(key) ? dontAnimate2[key] = value : animate[key] = value);
+        props,
+        presence,
+        style,
+        componentState
+      } = animationProps;
+      const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+      const isHydrating = componentState.unmounted === true;
+      const disableAnimation = isHydrating || !animationKey;
+      const presenceContext = import_react.default.useContext(import_use_presence.PresenceContext);
+      const [, themeState] = (0, import_core.useThemeWithState)({});
+      const isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark");
+      const {
+        dontAnimate,
+        motiProps
+      } = (0, import_react.useMemo)(() => {
+        let animate = {};
+        let dontAnimate2 = {};
+        if (disableAnimation) {
+          for (const key in style) {
+            const rawValue = style[key];
+            const value = resolveDynamicValue(rawValue, isDark);
+            if (value === void 0) continue;
+            dontAnimate2[key] = value;
+          }
+        } else {
+          const animateOnly = props.animateOnly;
+          for (const key in style) {
+            const rawValue = style[key];
+            const value = resolveDynamicValue(rawValue, isDark);
+            if (value === void 0) continue;
+            if (!onlyAnimateKeys[key] || value === "auto" || typeof value === "string" && value.startsWith("calc") || animateOnly && !animateOnly.includes(key)) {
+              dontAnimate2[key] = value;
+            } else {
+              animate[key] = value;
             }
           }
-          if (componentState.unmounted === "should-enter") for (const key in style) {
-            const rawValue = style[key],
-              value = resolveDynamicValue(rawValue, isDark);
-            value !== void 0 && (dontAnimate2[key] = value);
+        }
+        if (componentState.unmounted === "should-enter") {
+          for (const key in style) {
+            const rawValue = style[key];
+            const value = resolveDynamicValue(rawValue, isDark);
+            if (value === void 0) continue;
+            dontAnimate2[key] = value;
           }
-          const styles = animate,
-            isExiting = !!presence?.[1],
-            usePresenceValue = presence || void 0;
-          let transition = isHydrating ? {
-              type: "transition",
-              duration: 0
-            } : animations[animationKey],
-            hasClonedTransition = !1;
-          if (Array.isArray(props.transition)) {
-            const config = props.transition[1];
-            if (config && typeof config == "object") for (const key in config) {
+        }
+        const styles = animate;
+        const isExiting = Boolean(presence?.[1]);
+        const usePresenceValue = presence || void 0;
+        let transition = isHydrating ? {
+          type: "transition",
+          duration: 0
+        } : animations[animationKey];
+        let hasClonedTransition = false;
+        if (Array.isArray(props.transition)) {
+          const config = props.transition[1];
+          if (config && typeof config === "object") {
+            for (const key in config) {
               const val = config[key];
-              hasClonedTransition || (transition = Object.assign({}, transition), hasClonedTransition = !0), typeof val == "string" ? transition[key] = animations[val] : transition[key] = val;
+              if (!hasClonedTransition) {
+                transition = Object.assign({}, transition);
+                hasClonedTransition = true;
+              }
+              if (typeof val === "string") {
+                transition[key] = animations[val];
+              } else {
+                transition[key] = val;
+              }
             }
           }
-          return {
-            dontAnimate: dontAnimate2,
-            motiProps: {
-              animate: isExiting || componentState.unmounted === !0 ? {} : styles,
-              transition: componentState.unmounted ? {
-                duration: 0
-              } : transition,
-              usePresenceValue,
-              presenceContext,
-              exit: isExiting ? styles : void 0
-            }
-          };
-        }, [presenceContext, presence, animationKey, componentState.unmounted, JSON.stringify(style), presenceContext, isDark]),
-        moti = (0, import_author.useMotify)(motiProps);
-      return process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("useMotify(", JSON.stringify(motiProps, null, 2) + ")", {
-        "componentState.unmounted": componentState.unmounted,
-        animationProps,
-        motiProps,
-        moti,
-        style: [dontAnimate, moti.style]
-      }), {
+        }
+        return {
+          dontAnimate: dontAnimate2,
+          motiProps: {
+            animate: isExiting || componentState.unmounted === true ? {} : styles,
+            transition: componentState.unmounted ? {
+              duration: 0
+            } : transition,
+            usePresenceValue,
+            presenceContext,
+            exit: isExiting ? styles : void 0
+          }
+        };
+      }, [presenceContext, presence, animationKey, componentState.unmounted, JSON.stringify(style), presenceContext, isDark]);
+      const moti = (0, import_author.useMotify)(motiProps);
+      if (process.env.NODE_ENV === "development" && props["debug"] && props["debug"] !== "profile") {
+        console.info(`useMotify(`, JSON.stringify(motiProps, null, 2) + ")", {
+          "componentState.unmounted": componentState.unmounted,
+          animationProps,
+          motiProps,
+          moti,
+          style: [dontAnimate, moti.style]
+        });
+      }
+      return {
         style: [dontAnimate, moti.style]
       };
     }