🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@motify/core

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motify/core - npm Package Compare versions

Comparing version

0.10.1-alpha.1
to
0.11.0

11

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log

# [0.11.0](https://github.com/nandorojo/moti/compare/v0.10.1...v0.11.0) (2021-05-17)
### Features
* add onDidAnimate callback 4th arg w/ attemptedValue; docs ([66dfa76](https://github.com/nandorojo/moti/commit/66dfa766fccf6b35606d61b9e262a2d90b35dde7))
# [0.10.0](https://github.com/nandorojo/moti/compare/v0.9.0...v0.10.0) (2021-04-21)

@@ -8,0 +19,0 @@

14

lib/commonjs/use-dynamic-animation/index.js

@@ -67,16 +67,6 @@ "use strict";

animateTo(nextStateOrFunction) {
'worklet'; // const runAnimation = (nextStyleObject: DynamicStyleProp) => {
// if (nextStyleObject) {
// // activeStyle.current.value = nextStyleObject
// __state.value = nextStyleObject
// }
// }
'worklet';
const nextStyle = typeof nextStateOrFunction === 'function' ? nextStateOrFunction(__state.value) : nextStateOrFunction;
__state.value = nextStyle; // if (typeof nextStateOrFunction === 'function') {
// // similar to setState, let people compose a function that takes in the current value and returns the next one
// runAnimation(nextStateOrFunction(this.current as DynamicStyleProp))
// } else {
// runAnimation(nextStateOrFunction)
// }
__state.value = nextStyle;
}

@@ -83,0 +73,0 @@

89

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

@@ -16,9 +16,10 @@ "use strict";

// const debug = (...args: any[]) => {
// 'worklet'
// if (args) {
// // hi
// }
// console.log('[moti]', ...args)
// }
const debug = (...args) => {
'worklet';
if (args) {// hi
} // console.log('[moti]', ...args)
};
const isColor = styleKey => {

@@ -100,2 +101,8 @@ 'worklet';

debug({
loop,
key,
repeatCount,
animationType
});
let config = {}; // so sad, but fix it later :(

@@ -174,16 +181,6 @@

function useLatest(value) {
const ref = (0, _react.useRef)(value);
if (ref.current !== value) {
ref.current = value;
}
return ref;
}
function useMapAnimateToStyle({
animate: animateProp,
from: _from = false,
transition: _transitionProp,
animate,
from = false,
transition: transitionProp,
delay: defaultDelay,

@@ -193,35 +190,14 @@ state,

onDidAnimate,
exit: _exit,
exit,
animateInitialState = false,
exitTransition: _exitTransition
exitTransition
}) {
const isMounted = (0, _reactNativeReanimated.useSharedValue)(false);
const [isPresent, safeToUnmount] = (0, _framerMotion.usePresence)(); // memoize each JSON-able prop to avoid re-creating styles
const exitString = JSON.stringify(typeof _exit === 'object' ? _exit : {});
const exit = (0, _react.useMemo)(() => JSON.parse(exitString), [exitString]);
const transitionString = JSON.stringify(typeof _transitionProp === 'object' ? _transitionProp : {});
const transitionProp = (0, _react.useMemo)(() => JSON.parse(transitionString), [transitionString]);
const fromString = JSON.stringify(typeof _from === 'object' ? _from : {});
const from = (0, _react.useMemo)(() => JSON.parse(fromString), [fromString]);
const exitTransitionString = JSON.stringify(typeof _exitTransition === 'object' ? _exitTransition : {});
const exitTransition = (0, _react.useMemo)(() => JSON.parse(exitTransitionString), [exitTransitionString]);
const reanimatedSafeToUnmount = useLatest(() => safeToUnmount === null || safeToUnmount === void 0 ? void 0 : safeToUnmount());
const reanimatedOnDidAnimate = useLatest((...args) => {
const [isPresent, safeToUnmount] = (0, _framerMotion.usePresence)();
const reanimatedSafeToUnmount = (0, _react.useCallback)(() => {
safeToUnmount === null || safeToUnmount === void 0 ? void 0 : safeToUnmount();
}, [safeToUnmount]);
const reanimatedOnDidAnimated = (0, _react.useCallback)((...args) => {
onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate(...args);
}); // const animate = useDerivedValue(() => {
// if (typeof animateProp === 'object' && 'value' in animateProp) {
// // debug('[use-map-animate][animate.is-dv]', animateProp.value)
// return animateProp.value
// }
// // debug('[use-map-animate][animate.no-dv]', animateProp)
// return animateProp
// })
// const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(
// (...args) => {
// onDidAnimate?.(...args)
// },
// [onDidAnimate]
// )
}, [onDidAnimate]);
const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit !== null && exit !== void 0 ? exit : {}).length;

@@ -236,3 +212,2 @@ const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {

const variantStyle = (state === null || state === void 0 ? void 0 : (_state$__state = state.__state) === null || _state$__state === void 0 ? void 0 : _state$__state.value) || {};
const animate = animateProp && 'value' in animateProp ? animateProp.value : animateProp;
const animateStyle = animate || {};

@@ -252,3 +227,5 @@ const initialStyle = from || {};

mergedStyles = Object.assign({}, exitStyle);
} // reduce doesn't work with spreads/reanimated Objects!
}
debug('here'); // reduce doesn't work with spreads/reanimated Objects!
// const exitingStyleProps: Record<string, boolean> = Object.keys(

@@ -259,3 +236,2 @@ // mergedStyles || {}

const exitingStyleProps = {};

@@ -284,3 +260,5 @@ Object.keys(exitStyle || {}).forEach(key => {

if (onDidAnimate) {
(0, _reactNativeReanimated.runOnJS)(reanimatedOnDidAnimate.current)(key, completed, recentValue);
(0, _reactNativeReanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, recentValue, {
attempedValue: value
});
}

@@ -293,3 +271,3 @@

if (!areStylesExiting) {
(0, _reactNativeReanimated.runOnJS)(reanimatedSafeToUnmount.current)();
(0, _reactNativeReanimated.runOnJS)(reanimatedSafeToUnmount)();
}

@@ -475,4 +453,3 @@ }

return final;
}, [animateInitialState, animateProp, // this might be a SV, so we don't memoize it?
defaultDelay, exit, exitTransition, from, hasExitStyle, isMounted, isPresent, onDidAnimate, reanimatedOnDidAnimate, reanimatedSafeToUnmount, state, stylePriority, transitionProp]);
});
(0, _react.useEffect)(() => {

@@ -479,0 +456,0 @@ isMounted.value = true;

14

lib/module/use-dynamic-animation/index.js

@@ -59,16 +59,6 @@ import { useSharedValue } from 'react-native-reanimated';

animateTo(nextStateOrFunction) {
'worklet'; // const runAnimation = (nextStyleObject: DynamicStyleProp) => {
// if (nextStyleObject) {
// // activeStyle.current.value = nextStyleObject
// __state.value = nextStyleObject
// }
// }
'worklet';
const nextStyle = typeof nextStateOrFunction === 'function' ? nextStateOrFunction(__state.value) : nextStateOrFunction;
__state.value = nextStyle; // if (typeof nextStateOrFunction === 'function') {
// // similar to setState, let people compose a function that takes in the current value and returns the next one
// runAnimation(nextStateOrFunction(this.current as DynamicStyleProp))
// } else {
// runAnimation(nextStateOrFunction)
// }
__state.value = nextStyle;
}

@@ -75,0 +65,0 @@

91

lib/module/use-map-animate-to-style.js
import { usePresence } from 'framer-motion';
import { useEffect, useMemo, useRef } from 'react';
import { useCallback, useEffect } from 'react';
import { useAnimatedStyle, useSharedValue, withDecay, withSpring, withTiming, withDelay, withRepeat, withSequence, runOnJS } from 'react-native-reanimated';
import { PackageName } from './constants/package-name';
// const debug = (...args: any[]) => {
// 'worklet'
// if (args) {
// // hi
// }
// console.log('[moti]', ...args)
// }
const debug = (...args) => {
'worklet';
if (args) {// hi
} // console.log('[moti]', ...args)
};
const isColor = styleKey => {

@@ -89,2 +90,8 @@ 'worklet';

debug({
loop,
key,
repeatCount,
animationType
});
let config = {}; // so sad, but fix it later :(

@@ -163,16 +170,6 @@

function useLatest(value) {
const ref = useRef(value);
if (ref.current !== value) {
ref.current = value;
}
return ref;
}
export default function useMapAnimateToStyle({
animate: animateProp,
from: _from = false,
transition: _transitionProp,
animate,
from = false,
transition: transitionProp,
delay: defaultDelay,

@@ -182,35 +179,14 @@ state,

onDidAnimate,
exit: _exit,
exit,
animateInitialState = false,
exitTransition: _exitTransition
exitTransition
}) {
const isMounted = useSharedValue(false);
const [isPresent, safeToUnmount] = usePresence(); // memoize each JSON-able prop to avoid re-creating styles
const exitString = JSON.stringify(typeof _exit === 'object' ? _exit : {});
const exit = useMemo(() => JSON.parse(exitString), [exitString]);
const transitionString = JSON.stringify(typeof _transitionProp === 'object' ? _transitionProp : {});
const transitionProp = useMemo(() => JSON.parse(transitionString), [transitionString]);
const fromString = JSON.stringify(typeof _from === 'object' ? _from : {});
const from = useMemo(() => JSON.parse(fromString), [fromString]);
const exitTransitionString = JSON.stringify(typeof _exitTransition === 'object' ? _exitTransition : {});
const exitTransition = useMemo(() => JSON.parse(exitTransitionString), [exitTransitionString]);
const reanimatedSafeToUnmount = useLatest(() => safeToUnmount === null || safeToUnmount === void 0 ? void 0 : safeToUnmount());
const reanimatedOnDidAnimate = useLatest((...args) => {
const [isPresent, safeToUnmount] = usePresence();
const reanimatedSafeToUnmount = useCallback(() => {
safeToUnmount === null || safeToUnmount === void 0 ? void 0 : safeToUnmount();
}, [safeToUnmount]);
const reanimatedOnDidAnimated = useCallback((...args) => {
onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate(...args);
}); // const animate = useDerivedValue(() => {
// if (typeof animateProp === 'object' && 'value' in animateProp) {
// // debug('[use-map-animate][animate.is-dv]', animateProp.value)
// return animateProp.value
// }
// // debug('[use-map-animate][animate.no-dv]', animateProp)
// return animateProp
// })
// const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(
// (...args) => {
// onDidAnimate?.(...args)
// },
// [onDidAnimate]
// )
}, [onDidAnimate]);
const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit !== null && exit !== void 0 ? exit : {}).length;

@@ -225,3 +201,2 @@ const style = useAnimatedStyle(() => {

const variantStyle = (state === null || state === void 0 ? void 0 : (_state$__state = state.__state) === null || _state$__state === void 0 ? void 0 : _state$__state.value) || {};
const animate = animateProp && 'value' in animateProp ? animateProp.value : animateProp;
const animateStyle = animate || {};

@@ -241,3 +216,5 @@ const initialStyle = from || {};

mergedStyles = Object.assign({}, exitStyle);
} // reduce doesn't work with spreads/reanimated Objects!
}
debug('here'); // reduce doesn't work with spreads/reanimated Objects!
// const exitingStyleProps: Record<string, boolean> = Object.keys(

@@ -248,3 +225,2 @@ // mergedStyles || {}

const exitingStyleProps = {};

@@ -273,3 +249,5 @@ Object.keys(exitStyle || {}).forEach(key => {

if (onDidAnimate) {
runOnJS(reanimatedOnDidAnimate.current)(key, completed, recentValue);
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
attempedValue: value
});
}

@@ -282,3 +260,3 @@

if (!areStylesExiting) {
runOnJS(reanimatedSafeToUnmount.current)();
runOnJS(reanimatedSafeToUnmount)();
}

@@ -464,4 +442,3 @@ }

return final;
}, [animateInitialState, animateProp, // this might be a SV, so we don't memoize it?
defaultDelay, exit, exitTransition, from, hasExitStyle, isMounted, isPresent, onDidAnimate, reanimatedOnDidAnimate, reanimatedSafeToUnmount, state, stylePriority, transitionProp]);
});
useEffect(() => {

@@ -468,0 +445,0 @@ isMounted.value = true;

32

lib/typescript/src/types.d.ts

@@ -72,7 +72,28 @@ import type Animated from 'react-native-reanimated';

*/
value?: Animate[Key]) => void;
value: Animate[Key] | undefined,
/**
* An object containing metadata about this animation.
*/
event: {
/**
* The value that this animation attempted to animate to.
*
* The reason it's marked as "attempted", is that if the animation didn't finish, then it didn't actually animate to this value.
*
* Usage:
*
* ```jsx
* <MotiView
* onDidAnimate={(key, finished, value, { attemptedValue }) => {
* if (key === 'opacity' && finished && attempedValue === 1) {
* console.log('animated to 1!')
* }
* }}
* />
* ```
*/
attempedValue: Animate[Key];
}) => void;
export declare type StyleValueWithReplacedTransforms<StyleProp> = Omit<StyleProp, 'transform' | keyof Transforms> & Partial<Transforms>;
declare type OmitDerivedValue<T> = T extends Animated.DerivedValue<infer S> ? S : T;
declare type SelfOrDerivedValue<T> = T | Animated.DerivedValue<T>;
export declare type MotiAnimationProp<Animate = ImageStyle | TextStyle | ViewStyle> = OmitDerivedValue<MotiProps<Animate>['animate']>;
export declare type MotiAnimationProp<Animate> = MotiProps<Animate>['animate'];
export declare type MotiFromProp<Animate> = MotiProps<Animate>['from'];

@@ -97,3 +118,3 @@ export declare type MotiExitProp<Animate> = MotiProps<Animate>['exit'];

*/
animate?: SelfOrDerivedValue<Animate>;
animate?: Animate;
/**

@@ -304,2 +325,1 @@ * (Optional) specify styles which the component should animate from.

};
export {};

2

lib/typescript/src/use-map-animate-to-style.d.ts
import type { MotiProps } from './types';
export default function useMapAnimateToStyle<Animate>({ animate: animateProp, from: _from, transition: _transitionProp, delay: defaultDelay, state, stylePriority, onDidAnimate, exit: _exit, animateInitialState, exitTransition: _exitTransition, }: MotiProps<Animate>): {
export default function useMapAnimateToStyle<Animate>({ animate, from, transition: transitionProp, delay: defaultDelay, state, stylePriority, onDidAnimate, exit, animateInitialState, exitTransition, }: 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;

4

package.json
{
"name": "@motify/core",
"version": "0.10.1-alpha.1+393f37d",
"version": "0.11.0",
"private": false,

@@ -35,3 +35,3 @@ "license": "MIT",

"sideEffects": false,
"gitHead": "393f37d9b51725eb12e8a1d2012cb8448884c0ca",
"gitHead": "3a5616d738147a847c878e0c782d40f83f2d10ca",
"scripts": {

@@ -38,0 +38,0 @@ "prepare": "bob build",

34

src/types.ts

@@ -116,3 +116,26 @@ // import type { UseAnimationState } from './use-animator/types'

*/
value?: Animate[Key]
value: Animate[Key] | undefined,
/**
* An object containing metadata about this animation.
*/
event: {
/**
* The value that this animation attempted to animate to.
*
* The reason it's marked as "attempted", is that if the animation didn't finish, then it didn't actually animate to this value.
*
* Usage:
*
* ```jsx
* <MotiView
* onDidAnimate={(key, finished, value, { attemptedValue }) => {
* if (key === 'opacity' && finished && attempedValue === 1) {
* console.log('animated to 1!')
* }
* }}
* />
* ```
*/
attempedValue: Animate[Key]
}
) => void

@@ -126,8 +149,3 @@

type OmitDerivedValue<T> = T extends Animated.DerivedValue<infer S> ? S : T
type SelfOrDerivedValue<T> = T | Animated.DerivedValue<T>
export type MotiAnimationProp<
Animate = ImageStyle | TextStyle | ViewStyle
> = OmitDerivedValue<MotiProps<Animate>['animate']>
export type MotiAnimationProp<Animate> = MotiProps<Animate>['animate']
export type MotiFromProp<Animate> = MotiProps<Animate>['from']

@@ -167,3 +185,3 @@ export type MotiExitProp<Animate> = MotiProps<Animate>['exit']

*/
animate?: SelfOrDerivedValue<Animate>
animate?: Animate
/**

@@ -170,0 +188,0 @@ * (Optional) specify styles which the component should animate from.

13

src/use-dynamic-animation/index.ts

@@ -61,8 +61,3 @@ import type { DynamicStyleProp, UseDynamicAnimationState } from './../types'

'worklet'
// const runAnimation = (nextStyleObject: DynamicStyleProp) => {
// if (nextStyleObject) {
// // activeStyle.current.value = nextStyleObject
// __state.value = nextStyleObject
// }
// }
const nextStyle =

@@ -74,8 +69,2 @@ typeof nextStateOrFunction === 'function'

__state.value = nextStyle
// if (typeof nextStateOrFunction === 'function') {
// // similar to setState, let people compose a function that takes in the current value and returns the next one
// runAnimation(nextStateOrFunction(this.current as DynamicStyleProp))
// } else {
// runAnimation(nextStateOrFunction)
// }
},

@@ -82,0 +71,0 @@ }

116

src/use-map-animate-to-style.ts
import { usePresence } from 'framer-motion'
import { useEffect, useMemo, useRef } from 'react'
import { useCallback, useEffect } from 'react'
import type { TransformsStyle } from 'react-native'

@@ -18,9 +18,9 @@ import Animated, {

// const debug = (...args: any[]) => {
// 'worklet'
// if (args) {
// // hi
// }
// console.log('[moti]', ...args)
// }
const debug = (...args: any[]) => {
'worklet'
if (args) {
// hi
}
// console.log('[moti]', ...args)
}

@@ -121,2 +121,4 @@ const isColor = (styleKey: string) => {

debug({ loop, key, repeatCount, animationType })
let config = {}

@@ -206,14 +208,6 @@ // so sad, but fix it later :(

function useLatest<T>(value: T) {
const ref = useRef(value)
if (ref.current !== value) {
ref.current = value
}
return ref
}
export default function useMapAnimateToStyle<Animate>({
animate: animateProp,
from: _from = false,
transition: _transitionProp,
animate,
from = false,
transition: transitionProp,
delay: defaultDelay,

@@ -223,5 +217,5 @@ state,

onDidAnimate,
exit: _exit,
exit,
animateInitialState = false,
exitTransition: _exitTransition,
exitTransition,
}: MotiProps<Animate>) {

@@ -231,48 +225,13 @@ const isMounted = useSharedValue(false)

// memoize each JSON-able prop to avoid re-creating styles
const exitString = JSON.stringify(typeof _exit === 'object' ? _exit : {})
const exit = useMemo<typeof _exit>(() => JSON.parse(exitString), [exitString])
const reanimatedSafeToUnmount = useCallback(() => {
safeToUnmount?.()
}, [safeToUnmount])
const transitionString = JSON.stringify(
typeof _transitionProp === 'object' ? _transitionProp : {}
)
const transitionProp = useMemo<typeof _transitionProp>(
() => JSON.parse(transitionString),
[transitionString]
)
const fromString = JSON.stringify(typeof _from === 'object' ? _from : {})
const from = useMemo<typeof _from>(() => JSON.parse(fromString), [fromString])
const exitTransitionString = JSON.stringify(
typeof _exitTransition === 'object' ? _exitTransition : {}
)
const exitTransition = useMemo<typeof _exitTransition>(
() => JSON.parse(exitTransitionString),
[exitTransitionString]
)
const reanimatedSafeToUnmount = useLatest(() => safeToUnmount?.())
const reanimatedOnDidAnimate = useLatest<NonNullable<typeof onDidAnimate>>(
const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(
(...args) => {
onDidAnimate?.(...args)
}
},
[onDidAnimate]
)
// const animate = useDerivedValue(() => {
// if (typeof animateProp === 'object' && 'value' in animateProp) {
// // debug('[use-map-animate][animate.is-dv]', animateProp.value)
// return animateProp.value
// }
// // debug('[use-map-animate][animate.no-dv]', animateProp)
// return animateProp
// })
// const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(
// (...args) => {
// onDidAnimate?.(...args)
// },
// [onDidAnimate]
// )
const hasExitStyle =

@@ -288,5 +247,2 @@ typeof exit === 'object' && !!Object.keys(exit ?? {}).length

const animate =
animateProp && 'value' in animateProp ? animateProp.value : animateProp
const animateStyle = animate || {}

@@ -309,2 +265,4 @@ const initialStyle = from || {}

debug('here')
// reduce doesn't work with spreads/reanimated Objects!

@@ -343,7 +301,5 @@ // const exitingStyleProps: Record<string, boolean> = Object.keys(

if (onDidAnimate) {
runOnJS(reanimatedOnDidAnimate.current)(
key as any,
completed,
recentValue
)
runOnJS(reanimatedOnDidAnimated)(key as any, completed, recentValue, {
attempedValue: value,
})
}

@@ -357,3 +313,3 @@ if (isExiting) {

if (!areStylesExiting) {
runOnJS(reanimatedSafeToUnmount.current)()
runOnJS(reanimatedSafeToUnmount)()
}

@@ -541,19 +497,3 @@ }

return final
}, [
animateInitialState,
animateProp, // this might be a SV, so we don't memoize it?
defaultDelay,
exit,
exitTransition,
from,
hasExitStyle,
isMounted,
isPresent,
onDidAnimate,
reanimatedOnDidAnimate,
reanimatedSafeToUnmount,
state,
stylePriority,
transitionProp,
])
})

@@ -560,0 +500,0 @@ useEffect(() => {

lib/commonjs/use-dynamic-animation/index.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

lib/module/use-dynamic-animation/index.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet