@codeleap/mobile 2.4.6 → 2.4.7

package/dist/utils/hooks.js

@@ -14,11 +14,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsyncStorageState = exports.useBackButton = exports.usePressableFeedback = exports.useStaticAnimationStyles = exports.useAppState = exports.useAnimateColor = void 0;
+exports.useAsyncStorageState = exports.useBackButton = exports.usePressableFeedback = exports.useAnimatedVariantStyles = exports.useStaticAnimationStyles = exports.useAppState = exports.useAnimateColor = void 0;
 var common_1 = require("@codeleap/common");
 var react_native_1 = require("react-native");
-// @ts-ignore
 var async_storage_1 = __importDefault(require("@react-native-community/async-storage"));
+var react_native_reanimated_1 = require("react-native-reanimated");
 function useAnimateColor(value, opts) {
     var iters = (0, common_1.useRef)(0);
     var anim = (0, common_1.useState)(new react_native_1.Animated.Value(iters.current))[0];
@@ -64,6 +64,65 @@ function useStaticAnimationStyles(obj, keys) {
     return styles.current;
 }
 exports.useStaticAnimationStyles = useStaticAnimationStyles;
+var buildAnimatedStyle = function (property, value, currentStyle, applyFN) {
+    'worklet';
+    var _a;
+    if (applyFN === void 0) { applyFN = function (v) { return v; }; }
+    var newStyle = __assign({}, currentStyle);
+    switch (property) {
+        case 'opacity':
+            newStyle.opacity = applyFN(value);
+            break;
+        default:
+            if (!newStyle.transform) {
+                newStyle.transform = [];
+            }
+            newStyle.transform.push((_a = {},
+                _a[property] = applyFN(value),
+                _a));
+    }
+    return newStyle;
+};
+var transformProperties = function (properties, transition) {
+    'worklet';
+    var styles = {};
+    var _loop_1 = function (prop, value) {
+        var transitionConfig = transition[prop] || transition;
+        var _transitionConfig = __assign({ type: 'timing', duration: 100, easing: react_native_reanimated_1.Easing.linear }, transitionConfig);
+        var type = _transitionConfig.type, duration = _transitionConfig.duration, easing = _transitionConfig.easing;
+        var fn = void 0;
+        switch (type) {
+            case 'timing':
+                fn = function (v) { return (0, react_native_reanimated_1.withTiming)(v, {
+                    duration: duration,
+                    easing: easing
+                }); };
+            default:
+                break;
+        }
+        styles = buildAnimatedStyle(prop, value, styles, fn);
+    };
+    for (var _i = 0, _a = Object.entries(properties); _i < _a.length; _i++) {
+        var _b = _a[_i], prop = _b[0], value = _b[1];
+        _loop_1(prop, value);
+    }
+    return styles;
+};
+function useAnimatedVariantStyles(config) {
+    var animatedProperties = config.animatedProperties, updater = config.updater, variantStyles = config.variantStyles, transition = config.transition, _a = config.dependencies, dependencies = _a === void 0 ? [] : _a;
+    var _transition = (0, common_1.useRef)(null);
+    if (!_transition.current) {
+        _transition.current = JSON.parse(JSON.stringify(transition));
+    }
+    var staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties);
+    var animated = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        var nextState = updater(staticStyles);
+        var formatted = transformProperties(nextState, _transition.current);
+        return formatted;
+    }, [dependencies]);
+    return animated;
+}
+exports.useAnimatedVariantStyles = useAnimatedVariantStyles;
 function usePressableFeedback(styles, config) {
     var disabled = config.disabled, feedbackConfig = config.feedbackConfig, _a = config.hightlightPropertyIn, hightlightPropertyIn = _a === void 0 ? 'backgroundColor' : _a, _b = config.hightlightPropertyOut, hightlightPropertyOut = _b === void 0 ? 'backgroundColor' : _b;
     var _feedbackConfig = __assign({}, feedbackConfig);

package/dist/utils/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/utils/hooks.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/utils/hooks.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Modal/index.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
-import { View, ViewProps } from '../View'
-import { Button, ButtonProps } from '../Button'
+import { AnimatedView, View, ViewProps } from '../View'
+import { ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
 import {
   ComponentVariants,
   getNestedStylesByKey,
   IconPlaceholder,
-  onUpdate,
   PropsOf,
   TypeGuards,
   useDefaultComponentStyle,
@@ -19,9 +18,8 @@ import {
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
 
-import { useDynamicAnimation } from 'moti'
 import { Backdrop } from '../Backdrop'
-import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
+import { useAnimatedVariantStyles, useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
@@ -124,13 +122,17 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
 
   const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
 
-  const boxAnimation = useDynamicAnimation(() => {
-    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  const boxAnimationStyles = useAnimatedVariantStyles({
+    updater: (states ) => {
+      'worklet';
+      return visible ? states['box:visible'] : states['box:hidden'] 
+    },
+    animatedProperties: ['box:hidden', 'box:visible'],
+    variantStyles,
+    transition:variantStyles['box:transition'],
+    dependencies: [visible]
   })
 
-  onUpdate(() => {
-    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
-  }, [visible])
   const wrapperStyle = getStyles('wrapper')
 
   const ScrollComponent = scroll ? Scroll : View
@@ -195,11 +197,10 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
             noFeedback
           />}
 
-        <View
-          animated
-          state={boxAnimation}
-          style={getStyles('box')}
-          transition={{ ...variantStyles['box:transition'] }}
+        <AnimatedView
+        
+          style={[getStyles('box'),boxAnimationStyles]}
+          // transition={{ ...variantStyles['box:transition'] }}
 
           {...props}
         >
@@ -212,7 +213,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
               {typeof footer === 'string' ? <Text text={footer} /> : footer}
             </View>
           )}
-        </View>
+        </AnimatedView>
 
       </ScrollComponent>
     </View>

package/src/components/View/index.tsx

@@ -13,7 +13,7 @@ import { View as NativeView } from 'react-native'
 import { MotiView, MotiProps } from 'moti'
 import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 import {TransitionConfig} from '../../types'
-
+import Animated from 'react-native-reanimated'
 export * from './styles'
 
 type MotiViewProps =  Omit< Partial<MotiProps>, 'transition'|'children'>
@@ -68,6 +68,8 @@ export const View: React.FC<ViewProps> = forwardRef<NativeView,ViewProps>((viewP
   )
 })
 
+export const AnimatedView = Animated.createAnimatedComponent(View)
+
 
 type GapProps = ViewProps & {
   value: number

package/src/utils/hooks.ts

@@ -1,7 +1,8 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
-// @ts-ignore
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler, ViewStyle, ImageStyle, TextStyle, StyleSheet } from 'react-native'
+
 import AsyncStorage from '@react-native-community/async-storage'
+import { AnimatedStyleProp, Easing, EasingFn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -52,6 +53,10 @@ export function useAppState(filter?: AppStateStatus[]) {
   }
 }
 
+type SelectProperties<T extends Record<string|number|symbol, any>, K extends keyof T> = {
+  [P in K] : T[K]
+}
+
 export function useStaticAnimationStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(obj: T, keys: K[]) {
   const styles = useRef({})
 
@@ -61,11 +66,112 @@ export function useStaticAnimationStyles<T extends Record<string|number|symbol,
     styles.current = Object.fromEntries(mappedStyles)
   }
 
-  return styles.current as {
-    [P in K] : T[K]
+  return styles.current as SelectProperties<T, K>
+}
+
+type AnimatableProperties = 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'opacity'
+
+type VariantTransitionConfig = {
+  type: 'timing'
+  duration?: number
+  easing?: EasingFn
+} 
+
+type TransitionConfig = Partial<Record<AnimatableProperties, VariantTransitionConfig>> | VariantTransitionConfig
+
+
+type UseAnimatedVariantStylesConfig<T extends Record<string|number|symbol, any>, K extends keyof T > = {
+  variantStyles: T
+  animatedProperties: K[]
+  updater: (states: SelectProperties<T, K>) => AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
+  transition: TransitionConfig
+  dependencies?: any[]
+}
+
+const buildAnimatedStyle = (property: AnimatableProperties, value, currentStyle, applyFN = (v) => v) => {
+  'worklet';
+  const newStyle = {...currentStyle}
+  
+  switch(property){
+    case 'opacity':
+      newStyle.opacity = applyFN(value)
+      break
+    default:
+      if(!newStyle.transform){
+        newStyle.transform = []
+      }
+      newStyle.transform.push({
+        [property]: applyFN(value)
+      })
+  }
+
+  return newStyle
+
+}
+
+const transformProperties = (properties, transition) => {
+  'worklet';
+  let styles = {}
+
+  for(const [prop, value] of Object.entries(properties)){
+    let transitionConfig = transition[prop] || transition
+
+    const _transitionConfig = {
+      type:'timing',
+      duration: 100,
+      easing: Easing.linear,
+      ...transitionConfig
+    }
+
+    const { type, duration, easing } = _transitionConfig
+
+    let fn
+
+    switch(type){
+      case 'timing':
+        fn = (v) => withTiming(v, {
+          duration,
+          easing
+        })
+      default:
+        break
+    } 
+
+    styles = buildAnimatedStyle(
+      prop as AnimatableProperties,
+      value,
+      styles,
+      fn
+    )
+  }
+
+  return styles
+}
+
+
+export function useAnimatedVariantStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(config: UseAnimatedVariantStylesConfig<T, K>){
+  const { animatedProperties, updater, variantStyles, transition, dependencies = []} = config
+  
+  const _transition = useRef(null)
+
+  if(!_transition.current){
+    _transition.current = JSON.parse(JSON.stringify(transition))
   }
+
+  const staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties)
+  
+  const animated = useAnimatedStyle(() => {
+    const nextState = updater(staticStyles)
+
+    const formatted = transformProperties(nextState, _transition.current)
+
+    return formatted
+  }, [dependencies])
+
+  return animated
 }
 
+
 export type FeedbackConfig =
 | { type: 'opacity'; value?: number }
 | {type: 'highlight'; color?: string; brightness?: number; shiftOpacity?: number}