@codeleap/mobile 4.1.0 → 4.2.2

package/src/components/Modal/index.tsx

@@ -12,6 +12,7 @@ import { ModalHeaderProps, ModalProps } from './types'
 import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps, useTheme, AppTheme, Theme } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { SlideInDown, SlideOutDown } from 'react-native-reanimated'
 
 export * from './styles'
 export * from './types'
@@ -74,6 +75,8 @@ export const Modal = (modalProps: ModalProps) => {
     scrollProps = {},
     closeOnHardwareBackPress,
     style,
+    boxExiting,
+    boxEntering,
     ...props
   } = {
     ...Modal.defaultProps,
@@ -132,7 +135,7 @@ export const Modal = (modalProps: ModalProps) => {
       style={[
         styles?.wrapper,
         // @ts-expect-error
-        { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : styles?.wrapper?.zIndex, ...topSpacing }
+        { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : styles?.wrapper?.zIndex, ...topSpacing },
       ]}
       pointerEvents={visible ? 'auto' : 'none'}
     >
@@ -167,24 +170,29 @@ export const Modal = (modalProps: ModalProps) => {
             android_ripple={null}
             noFeedback
           />) : null}
-
-        <View
-          animated
-          animatedStyle={boxAnimationStyles}
-          {...props}
-          onLayout={onModalLayout}
-          style={styles?.box}
-        >
-          {header ? header : <Header {...headerProps} />}
-
-          <View style={styles?.body}>{children}</View>
-
-          {footer ? (
-            <View style={styles?.footer}>
-              {typeof footer === 'string' ? <Text text={footer} /> : footer}
+        {
+          visible ? (
+            <View
+              animated
+              // @ts-ignore
+              entering={boxEntering}
+              exiting={boxExiting}
+              {...props}
+              onLayout={onModalLayout}
+              style={styles?.box}
+            >
+              {header ? header : <Header {...headerProps} />}
+
+              <View style={styles?.body}>{children}</View>
+
+              {footer ? (
+                <View style={styles?.footer}>
+                  {typeof footer === 'string' ? <Text text={footer} /> : footer}
+                </View>
+              ) : null}
             </View>
-          ) : null}
-        </View>
+          ) : null
+        }
       </ScrollComponent>
     </View >
   )
@@ -204,6 +212,8 @@ Modal.defaultProps = {
   dismissOnBackdrop: true,
   scroll: true,
   closeOnHardwareBackPress: true,
+  boxEntering: SlideInDown.build(),
+  boxExiting: SlideOutDown.build(),
 } as Partial<ModalProps>
 
 MobileStyleRegistry.registerComponent(Modal)

package/src/components/Modal/types.ts

@@ -4,6 +4,7 @@ import { ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
 import { ViewProps } from '../View'
 import { ModalComposition } from './styles'
+import { ReanimatedEnteringAnimation, ReanimatedExitingAnimation } from '../../types'
 
 export type ModalProps =
   Omit<ViewProps, 'style'> &
@@ -30,6 +31,8 @@ export type ModalProps =
     style?: StyledProp<ModalComposition>
     id?: string
     absolute?: boolean
+    boxEntering?: ReanimatedEnteringAnimation
+    boxExiting?: ReanimatedExitingAnimation
   }
 
 export type ModalHeaderProps =

package/src/components/Pager/index.tsx

@@ -17,7 +17,7 @@ export * from './PagerDots'
 
 const window = Dimensions.get('window')
 
-export const Pager = <T extends unknown>(props: PagerProps<T>) => {
+export function Pager<T>(props: PagerProps<T>) {
   const {
     pages,
     page,
@@ -74,7 +74,7 @@ export const Pager = <T extends unknown>(props: PagerProps<T>) => {
         withAnimation={{
           type: 'timing',
           config: {
-            reduceMotion: ReduceMotion.Never
+            reduceMotion: ReduceMotion.Never,
           },
         }}
         autoPlay={false}
@@ -91,7 +91,7 @@ export const Pager = <T extends unknown>(props: PagerProps<T>) => {
       />
 
       <View onLayout={(event: LayoutChangeEvent) => setFooterHeight(event.nativeEvent.layout.height)} style={styles.footerWrapper}>
-        {footer}
+        {/* {footer} */}
         {showDots ? (
           <PagerDots currentPage={currentPage} pages={pages} setCurrentPage={setCurrentPage} styles={dotStyles} />
         ) : null}
@@ -105,7 +105,7 @@ Pager.elements = ['carousel', 'wrapper', 'footerWrapper', 'dot']
 Pager.rootElement = 'wrapper'
 
 Pager.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Pager as <T extends unknown>(props: StyledComponentProps<PagerProps<T>, typeof styles>) => IJSX
+  return Pager as <T >(props: StyledComponentProps<PagerProps<T>, typeof styles>) => IJSX
 }
 
 Pager.defaultProps = {

package/src/components/Pager/types.ts

@@ -4,7 +4,7 @@ import { PagerComposition } from './styles'
 import { TCarouselProps } from 'react-native-reanimated-carousel'
 import { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/lib/typescript/types'
 
-export type PageProps<T extends unknown> = CarouselRenderItemInfo<T> & {
+export type PageProps<T> = CarouselRenderItemInfo<T> & {
   isLast: boolean
   isFirst: boolean
   isActive: boolean
@@ -14,7 +14,7 @@ export type PageProps<T extends unknown> = CarouselRenderItemInfo<T> & {
   isPrevious: boolean
 }
 
-export type PagerProps<T extends unknown> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem'>> & {
+export type PagerProps<T> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem'>> & {
   pages: TCarouselProps<T>['data']
   renderItem?: (props: PageProps<T>) => JSX.Element
   page?: number

package/src/components/PlacesAutocomplete/index.tsx

@@ -61,6 +61,8 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
   const styles = useStylesFor(PlacesAutocomplete.styleRegistryName, style)
   const compositionStyles = useCompositionStyles(['input', 'list', 'loader'], styles)
 
+  const hasCustomValue = !!textInputProps?.value
+
   const {
     handleChangeAddress,
     handlePressAddress,
@@ -71,6 +73,7 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
   } = usePlacesAutocompleteUtils<PlaceItem>({
     onValueChange,
     onPress,
+    debounce: hasCustomValue ? null : 250
   })
 
   const _showEmptyPlaceholder = !!address && !isTyping && showEmptyPlaceholder && !isLoading
@@ -85,7 +88,6 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
   } : textInputProps?.rightIcon
 
   const _data = customData?.length > 0 && address ? [...customData, ...data] : data
-  const hasCustomValue = !!textInputProps?.value
 
   const renderItem = useCallback((props) => {
     return (

package/src/components/View/index.tsx

@@ -27,6 +27,10 @@ export const View = <T extends React.ComponentType = typeof RNView>(props: ViewP
   )
 }
 
+View.Animated = (props: ViewProps<typeof Animated.View>) => {
+  return <View {...props} animated />
+}
+
 View.styleRegistryName = 'View'
 View.elements = ['wrapper']
 View.rootElement = 'wrapper'

package/src/modules/PressableRipple/ripple.js

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { View, Animated, Easing, Platform, TouchableWithoutFeedback, I18nManager } from 'react-native';
-import { styles, radius } from './styles.js';
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import { View, Animated, Easing, Platform, TouchableWithoutFeedback, I18nManager } from 'react-native'
+import { styles, radius } from './styles.js'
 
 export default class Ripple extends PureComponent {
   static defaultProps = {
@@ -18,7 +18,7 @@ export default class Ripple extends PureComponent {
     disabled: false,
 
     onRippleAnimation: (animation, callback) => animation.start(callback),
-  };
+  }
 
   static propTypes = {
     ...Animated.View.propTypes,
@@ -35,51 +35,51 @@ export default class Ripple extends PureComponent {
     disabled: PropTypes.bool,
 
     onRippleAnimation: PropTypes.func,
-  };
+  }
 
   constructor(props) {
-    super(props);
+    super(props)
 
-    this.onLayout = this.onLayout.bind(this);
-    this.onPress = this.onPress.bind(this);
-    this.onPressIn = this.onPressIn.bind(this);
-    this.onPressOut = this.onPressOut.bind(this);
-    this.onLongPress = this.onLongPress.bind(this);
-    this.onAnimationEnd = this.onAnimationEnd.bind(this);
+    this.onLayout = this.onLayout.bind(this)
+    this.onPress = this.onPress.bind(this)
+    this.onPressIn = this.onPressIn.bind(this)
+    this.onPressOut = this.onPressOut.bind(this)
+    this.onLongPress = this.onLongPress.bind(this)
+    this.onAnimationEnd = this.onAnimationEnd.bind(this)
 
-    this.renderRipple = this.renderRipple.bind(this);
+    this.renderRipple = this.renderRipple.bind(this)
 
-    this.unique = 0;
-    this.mounted = false;
+    this.unique = 0
+    this.mounted = false
 
     this.state = {
       width: 0,
       height: 0,
       ripples: [],
-    };
+    }
   }
 
   componentDidMount() {
-    this.mounted = true;
+    this.mounted = true
   }
 
   componentWillUnmount() {
-    this.mounted = false;
+    this.mounted = false
   }
 
   onLayout(event) {
-    let { width, height } = event.nativeEvent.layout;
-    let { onLayout } = this.props;
+    let { width, height } = event.nativeEvent.layout
+    let { onLayout } = this.props
 
     if ('function' === typeof onLayout) {
-      onLayout(event);
+      onLayout(event)
     }
 
-    this.setState({ width, height });
+    this.setState({ width, height })
   }
 
   onPress(event) {
-    let { onPress } = this.props;
+    let { onPress } = this.props
 
     if ('function' === typeof onPress) {
       onPress(event)
@@ -87,61 +87,61 @@ export default class Ripple extends PureComponent {
   }
 
   onLongPress(event) {
-    let { onLongPress } = this.props;
+    let { onLongPress } = this.props
 
     if ('function' === typeof onLongPress) {
-      requestAnimationFrame(() => onLongPress(event));
+      requestAnimationFrame(() => onLongPress(event))
     }
 
-    this.startRipple(event);
+    this.startRipple(event)
   }
 
   onPressIn(event) {
-    let { onPressIn } = this.props;
+    let { onPressIn } = this.props
 
     if ('function' === typeof onPressIn) {
-      onPressIn(event);
+      onPressIn(event)
     }
 
-    this.startRipple(event);
+    this.startRipple(event)
   }
 
   onPressOut(event) {
-    let { onPressOut } = this.props;
+    let { onPressOut } = this.props
 
     if ('function' === typeof onPressOut) {
-      onPressOut(event);
+      onPressOut(event)
     }
   }
 
   onAnimationEnd() {
     if (this.mounted) {
-      this.setState(({ ripples }) => ({ ripples: ripples.slice(1) }));
+      this.setState(({ ripples }) => ({ ripples: ripples.slice(1) }))
     }
   }
 
   startRipple(event) {
-    let { width, height } = this.state;
+    let { width, height } = this.state
     let {
       rippleDuration,
       rippleCentered,
       rippleSize,
       onRippleAnimation,
-    } = this.props;
+    } = this.props
 
-    let w2 = 0.5 * width;
-    let h2 = 0.5 * height;
+    let w2 = 0.5 * width
+    let h2 = 0.5 * height
 
-    let { locationX, locationY } = rippleCentered?
-      { locationX: w2, locationY: h2 }:
-      event.nativeEvent;
+    let { locationX, locationY } = rippleCentered ?
+      { locationX: w2, locationY: h2 } :
+      event.nativeEvent
 
-    let offsetX = Math.abs(w2 - locationX);
-    let offsetY = Math.abs(h2 - locationY);
+    let offsetX = Math.abs(w2 - locationX)
+    let offsetY = Math.abs(h2 - locationY)
 
-    let R = rippleSize > 0?
-      0.5 * rippleSize:
-      Math.sqrt(Math.pow(w2 + offsetX, 2) + Math.pow(h2 + offsetY, 2));
+    let R = rippleSize > 0 ?
+      0.5 * rippleSize :
+      Math.sqrt(Math.pow(w2 + offsetX, 2) + Math.pow(h2 + offsetY, 2))
 
     let ripple = {
       unique: this.unique++,
@@ -149,7 +149,7 @@ export default class Ripple extends PureComponent {
       locationX,
       locationY,
       R,
-    };
+    }
 
     let animation = Animated
       .timing(ripple.progress, {
@@ -157,20 +157,20 @@ export default class Ripple extends PureComponent {
         easing: Easing.out(Easing.ease),
         duration: rippleDuration,
         useNativeDriver: true,
-      });
+      })
 
-    onRippleAnimation(animation, this.onAnimationEnd);
+    onRippleAnimation(animation, this.onAnimationEnd)
 
-    this.setState(({ ripples }) => ({ ripples: ripples.concat(ripple) }));
+    this.setState(({ ripples }) => ({ ripples: ripples.concat(ripple) }))
   }
 
   renderRipple({ unique, progress, locationX, locationY, R }) {
-    let { rippleColor, rippleOpacity, rippleFades } = this.props;
+    let { rippleColor, color = rippleColor, rippleOpacity, rippleFades } = this.props
 
     let rippleStyle = {
       top: locationY - radius,
-      [I18nManager.isRTL? 'right' : 'left']: locationX - radius,
-      backgroundColor: rippleColor,
+      [I18nManager.isRTL ? 'right' : 'left']: locationX - radius,
+      backgroundColor: color,
 
       transform: [{
         scale: progress.interpolate({
@@ -179,21 +179,21 @@ export default class Ripple extends PureComponent {
         }),
       }],
 
-      opacity: rippleFades?
+      opacity: rippleFades ?
         progress.interpolate({
           inputRange: [0, 1],
           outputRange: [rippleOpacity, 0],
-        }):
+        }) :
         rippleOpacity,
-    };
+    }
 
     return (
       <Animated.View style={[styles.ripple, rippleStyle]} key={unique} />
-    );
+    )
   }
 
   render() {
-    let { ripples } = this.state;
+    let { ripples } = this.state
     let {
       delayLongPress,
       delayPressIn,
@@ -225,7 +225,7 @@ export default class Ripple extends PureComponent {
       radiusStyles,
 
       ...props
-    } = this.props;
+    } = this.props
 
     let touchableProps = {
       disabled,
@@ -241,8 +241,8 @@ export default class Ripple extends PureComponent {
       onPressOut: this.onPressOut,
       onLongPress: onLongPress ? this.onLongPress : undefined,
 
-      ...('web' !== Platform.OS? { nativeID } : null),
-    };
+      ...('web' !== Platform.OS ? { nativeID } : null),
+    }
 
     return (
       <TouchableWithoutFeedback {...touchableProps} ref={ref}>
@@ -253,6 +253,6 @@ export default class Ripple extends PureComponent {
           </View>
         </Animated.View>
       </TouchableWithoutFeedback>
-    );
+    )
   }
 }

package/src/types/utility.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { StyleProp } from 'react-native'
-import { EasingFn } from 'react-native-reanimated'
+import { EasingFn, EntryAnimationsValues, ExitAnimationsValues, LayoutAnimation, StyleProps } from 'react-native-reanimated'
 
 export type StylesOf<C extends string> = Partial<Record<C, StyleProp<any>>>
 type TransitionBase = {
@@ -10,7 +10,10 @@ type TransitionBase = {
 }
 export type TransitionConfig = TransitionBase | {
   [p: string] : TransitionBase
-} 
+}
+
+export type ChildrenProp = ReactNode | ReactNode[] | undefined
 
+export type ReanimatedExitingAnimation = (values: ExitAnimationsValues) => LayoutAnimation
+export type ReanimatedEnteringAnimation = (values: EntryAnimationsValues) => LayoutAnimation
 
-export type ChildrenProp = ReactNode | ReactNode[] | undefined

package/src/utils/StorageManager.ts

@@ -0,0 +1,112 @@
+import { MMKV } from 'react-native-mmkv'
+import { AnyFunction, AnyRecord } from '@codeleap/common'
+
+type StorageKey<T extends Record<string, any>> = keyof T | (string & {}) | ((allKeys: T) => string) | [keyof T, any]
+
+type ValueTypeMap<V = AnyRecord> = {
+  string: string
+  number: number
+  boolean: boolean
+  object: V
+}
+
+export class StorageManager<T extends Record<string, any>> {
+  public instance = new MMKV()
+
+  public storageKeys: T
+
+  constructor(keys: T) {
+    this.storageKeys = keys
+  }
+
+  public getStorageKey(key: StorageKey<T>): string {
+    if (typeof key == 'function') {
+      return key(this.storageKeys)
+    }
+
+    if (Array.isArray(key)) {
+      const [storageKey, value] = key
+
+      const extractor = this.storageKeys?.[storageKey] as unknown as AnyFunction
+
+      return extractor?.(value)
+    }
+
+    const storageKey = this.storageKeys?.[key]
+
+    if (!!storageKey) {
+      return storageKey
+    } else {
+      return key as string
+    }
+  }
+
+  private parseValue(value: any) {
+    try {
+      return JSON.parse(value)
+    } catch (e) {
+      return value
+    }
+  }
+
+  public exists(key: StorageKey<T>) {
+    const storageKey = this.getStorageKey(key)
+    return this.instance.contains(storageKey)
+  }
+
+  public get(key: StorageKey<T>, type: 'string'): string | undefined
+  public get(key: StorageKey<T>, type: 'number'): number | undefined
+  public get(key: StorageKey<T>, type: 'boolean'): boolean | undefined
+  public get<V extends AnyRecord = AnyRecord>(key: StorageKey<T>): V | undefined
+  public get<V extends AnyRecord = AnyRecord>(key: StorageKey<T>, type?: keyof ValueTypeMap<V>): ValueTypeMap<V>[keyof ValueTypeMap<V>] | undefined {
+    const storageKey = this.getStorageKey(key)
+
+    if (type === 'string') {
+      return this.instance.getString(storageKey) as ValueTypeMap<V>[keyof ValueTypeMap<V>]
+    } else if (type === 'number') {
+      return this.instance.getNumber(storageKey) as ValueTypeMap<V>[keyof ValueTypeMap<V>]
+    } else if (type === 'boolean') {
+      return this.instance.getBoolean(storageKey) as ValueTypeMap<V>[keyof ValueTypeMap<V>]
+    } else {
+      const value = this.instance.getString(storageKey)
+
+      return !!value ? this.parseValue(value) : undefined
+    }
+  }
+
+  public set<V extends any>(key: StorageKey<T>, value: V) {
+    const storageKey = this.getStorageKey(key)
+
+    const isValidValue = typeof value == 'string' || typeof value == 'number' || typeof value == 'boolean'
+
+    const parsedValue = isValidValue ? value : JSON.stringify(value)
+
+    this.instance.set(storageKey, parsedValue)
+  }
+
+  public remove(key: StorageKey<T>) {
+    const storageKey = this.getStorageKey(key)
+
+    this.instance.delete(storageKey)
+  }
+
+  public multiRemove(keys: Array<StorageKey<T>>) {
+    for (const key of keys) {
+      const storageKey = this.getStorageKey(key)
+      this.instance.delete(storageKey)
+    }
+  }
+
+  public multiGet(keys: Array<StorageKey<T>>): Partial<Record<keyof T, any>> {
+    const values: Partial<Record<keyof T, any>> = {}
+
+    for (const key of keys) {
+      const storageKey = this.getStorageKey(key)
+      const value = this.instance.getString(storageKey)
+      
+      values[key as keyof T] = value
+    }
+
+    return values
+  }
+}

package/src/utils/hooks.ts

@@ -1,8 +1,6 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler, ViewStyle, ImageStyle, TextStyle, StyleSheet, StyleProp } from 'react-native'
-
-import AsyncStorage from '@react-native-community/async-storage'
-import { AnimatedStyleProp, Easing, EasingFn, interpolateColor, runOnJS, useAnimatedRef, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { Animated, AppState, AppStateStatus, Platform, BackHandler, ViewStyle, ImageStyle, TextStyle, StyleSheet, StyleProp } from 'react-native'
+import { AnimatedStyleProp, Easing, EasingFn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { PressableRippleProps } from '../modules/PressableRipple/type'
 import { useSoftInputState } from 'react-native-avoid-softinput'
 import { useMemo } from 'react'
@@ -305,53 +303,6 @@ export function useBackButton(cb: () => boolean|void, deps = []) {
     }
   }, deps)
 }
-type StateSetter<T> = T | ((prev:T) => T)
-
-export function useAsyncStorageState<T>(key:string, defaultValue?: T) {
-  const [value, _setValue] = useState<T>(undefined)
-
-  onMount(() => {
-    AsyncStorage.getItem(key).then(val => {
-      let storedValue = defaultValue
-
-      if (val) {
-        storedValue = JSON.parse(val)
-      }
-
-      _setValue(storedValue)
-    })
-  })
-
-  const setValue = (to: StateSetter<T>) => {
-    return new Promise<void>((resolve, reject) => {
-      _setValue((prev) => {
-        let newValue = prev
-        try {
-
-          if (typeof to !== 'function') {
-            newValue = to
-          } else {
-            const fn = to as ((prev:T) => T)
-            newValue = fn(value)
-          }
-
-          const jsonVal = JSON.stringify(newValue)
-
-          AsyncStorage.setItem(key, jsonVal).then(resolve).catch(reject)
-          resolve()
-          return newValue
-        } catch (e) {
-          reject(e)
-          return newValue
-        }
-
-      })
-    })
-
-  }
-
-  return [value, setValue] as [T, typeof setValue]
-}
 
 export function useKeyboardPaddingStyle(styles: ViewStyle[], enabled = true) {
   const { isSoftInputShown, softInputHeight } = useSoftInputState()

package/src/utils/index.ts

@@ -11,4 +11,6 @@ export * from './input'
 export * from './theme'
 export * from './locale'
 export * from './Subscription'
-export * from './useQueryListRefresh'
+export * from './useQueryListRefresh'
+
+export * from './StorageManager'