@motify/core - npm Package Compare versions

Comparing version 0.13.0-alpha.0 to 0.13.0-alpha.8

lib/commonjs/use-map-animate-to-style.js

@@ -183,2 +183,3 @@ "use strict";
   transition: transitionProp,
+  exitTransition: exitTransitionProp,
   delay: defaultDelay,
@@ -189,4 +190,3 @@ state,
   exit,
-  animateInitialState = false,
-  exitTransition
+  animateInitialState = false
 }) {
@@ -235,6 +235,21 @@ const isMounted = (0, _reactNativeReanimated.useSharedValue)(false);
       exitingStyleProps[key] = true;
-    });
-    let transition = transitionProp;
+    }); // allow shared values as transitions
 
-    if (isExiting && exitTransition) {
+    let transition;
+
+    if (transitionProp && 'value' in transitionProp) {
+      transition = transitionProp.value;
+    } else {
+      transition = transitionProp;
+    }
+
+    if (isExiting && exitTransitionProp) {
+      let exitTransition;
+
+      if (exitTransitionProp && 'value' in exitTransitionProp) {
+        exitTransition = exitTransitionProp.value;
+      } else {
+        exitTransition = exitTransitionProp;
+      }
+
       transition = Object.assign({}, transition, exitTransition);
@@ -241,0 +256,0 @@ }

lib/module/use-map-animate-to-style.js

@@ -173,2 +173,3 @@ import { usePresence } from 'framer-motion';
   transition: transitionProp,
+  exitTransition: exitTransitionProp,
   delay: defaultDelay,
@@ -179,4 +180,3 @@ state,
   exit,
-  animateInitialState = false,
-  exitTransition
+  animateInitialState = false
 }) {
@@ -225,6 +225,21 @@ const isMounted = useSharedValue(false);
       exitingStyleProps[key] = true;
-    });
-    let transition = transitionProp;
+    }); // allow shared values as transitions
 
-    if (isExiting && exitTransition) {
+    let transition;
+
+    if (transitionProp && 'value' in transitionProp) {
+      transition = transitionProp.value;
+    } else {
+      transition = transitionProp;
+    }
+
+    if (isExiting && exitTransitionProp) {
+      let exitTransition;
+
+      if (exitTransitionProp && 'value' in exitTransitionProp) {
+        exitTransition = exitTransitionProp.value;
+      } else {
+        exitTransition = exitTransitionProp;
+      }
+
       transition = Object.assign({}, transition, exitTransition);
@@ -231,0 +246,0 @@ }

lib/typescript/src/types.d.ts

@@ -100,3 +100,6 @@ import type Animated from 'react-native-reanimated';
 export declare type MotiExitProp<Animate> = MotiProps<Animate>['exit'];
-export declare type MotiTransitionProp<Animate = StyleValueWithReplacedTransforms<ImageStyle & TextStyle & ViewStyle>> = TransitionConfig & Partial<Record<keyof Animate, TransitionConfig>>;
+declare type OrSharedValue<T> = T | Animated.SharedValue<T>;
+declare type FallbackAnimateProp = StyleValueWithReplacedTransforms<ImageStyle & TextStyle & ViewStyle>;
+export declare type MotiTransition<Animate = FallbackAnimateProp> = TransitionConfig & Partial<Record<keyof Animate, TransitionConfig>>;
+export declare type MotiTransitionProp<Animate = FallbackAnimateProp> = OrSharedValue<MotiTransition<Animate>>;
 export interface MotiProps<AnimateType = ImageStyle & TextStyle & ViewStyle, AnimateWithTransitions = StyleValueWithReplacedTransforms<AnimateType>, Animate = StyleValueWithSequenceArrays<AnimateWithTransitions>> {
@@ -324,1 +327,2 @@ /**
 };
+export {};

lib/typescript/src/use-map-animate-to-style.d.ts

 import type { MotiProps } from './types';
-export default function useMapAnimateToStyle<Animate>({ animate, from, transition: transitionProp, delay: defaultDelay, state, stylePriority, onDidAnimate, exit, animateInitialState, exitTransition, }: MotiProps<Animate>): {
+export default function useMapAnimateToStyle<Animate>({ animate, from, transition: transitionProp, exitTransition: exitTransitionProp, delay: defaultDelay, state, stylePriority, onDidAnimate, exit, animateInitialState, }: MotiProps<Animate>): {
     style: {
@@ -4,0 +4,0 @@ transform: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;

package.json

 {
   "name": "@motify/core",
-  "version": "0.13.0-alpha.0+809bb2e",
+  "version": "0.13.0-alpha.8+31aeee2",
   "private": false,
@@ -35,3 +35,3 @@ "license": "MIT",
   "sideEffects": false,
-  "gitHead": "809bb2e6e86b2f9194dd9343f0f3e52b2d32522c",
+  "gitHead": "31aeee29128469f5c88b988a6ace8fa9c374ff94",
   "scripts": {
@@ -38,0 +38,0 @@ "prepare": "bob build",

src/types.ts

@@ -152,6 +152,15 @@ // import type { UseAnimationState } from './use-animator/types'
 
-export type MotiTransitionProp<
-  Animate = StyleValueWithReplacedTransforms<ImageStyle & TextStyle & ViewStyle>
-> = TransitionConfig & Partial<Record<keyof Animate, TransitionConfig>>
+type OrSharedValue<T> = T | Animated.SharedValue<T>
 
+type FallbackAnimateProp = StyleValueWithReplacedTransforms<
+  ImageStyle & TextStyle & ViewStyle
+>
+
+export type MotiTransition<Animate = FallbackAnimateProp> = TransitionConfig &
+  Partial<Record<keyof Animate, TransitionConfig>>
+
+export type MotiTransitionProp<Animate = FallbackAnimateProp> = OrSharedValue<
+  MotiTransition<Animate>
+>
+
 export interface MotiProps<
@@ -158,0 +167,0 @@ // Style props of the component

src/use-map-animate-to-style.ts

@@ -16,3 +16,8 @@ import { usePresence } from 'framer-motion'
 import { PackageName } from './constants/package-name'
-import type { MotiProps, Transforms, TransitionConfig } from './types'
+import type {
+  MotiProps,
+  MotiTransition,
+  Transforms,
+  TransitionConfig,
+} from './types'
 
@@ -63,3 +68,3 @@ const debug = (...args: any[]) => {
   key: string,
-  transition: MotiProps<Animate>['transition'],
+  transition: MotiTransition<Animate> | undefined,
   defaultDelay?: number
@@ -83,3 +88,3 @@ ) {
   styleProp: string,
-  transition: MotiProps<Animate>['transition']
+  transition: MotiTransition<Animate> | undefined
 ) {
@@ -213,2 +218,3 @@ 'worklet'
   transition: transitionProp,
+  exitTransition: exitTransitionProp,
   delay: defaultDelay,
@@ -220,3 +226,2 @@ state,
   animateInitialState = false,
-  exitTransition,
 }: MotiProps<Animate>) {
@@ -277,4 +282,17 @@ const isMounted = useSharedValue(false)
 
-    let transition = transitionProp
-    if (isExiting && exitTransition) {
+    // allow shared values as transitions
+    let transition: MotiTransition<Animate> | undefined
+    if (transitionProp && 'value' in transitionProp) {
+      transition = transitionProp.value
+    } else {
+      transition = transitionProp
+    }
+    if (isExiting && exitTransitionProp) {
+      let exitTransition: MotiTransition<Animate> | undefined
+      if (exitTransitionProp && 'value' in exitTransitionProp) {
+        exitTransition = exitTransitionProp.value
+      } else {
+        exitTransition = exitTransitionProp
+      }
+
       transition = Object.assign({}, transition, exitTransition)
@@ -281,0 +299,0 @@ }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

225762

1.57%

Lines of code

3184

1.56%

No dependency changes