@codeleap/mobile 4.1.0 → 4.2.1

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/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,5 @@ export * from './input'
 export * from './theme'
 export * from './locale'
 export * from './Subscription'
-export * from './useQueryListRefresh'
+export * from './useQueryListRefresh'
+export * from './StorageManager'

package/src/utils/theme.ts

@@ -1,23 +1,27 @@
-import { Platform, Dimensions, StatusBar, StyleSheet } from 'react-native'
+import { Platform, Dimensions, StyleSheet } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 
-type AppValues = {
-  headerHeight: number
-  tabBarHeight: number
+type Options = {
+  getStatusBarHeight?: () => number
+  getAndroidNavbarHeight?: () => number
 }
 
-export function getMobileThemeValues(initialWindowMetrics, values: AppValues) {
+export function getMobileThemeValues(initialWindowMetrics, options: Options = {}) {
   const screenDimensions = Dimensions.get('screen')
 
   const hasNotch = DeviceInfo.hasNotch()
   const hasIsland = DeviceInfo.hasDynamicIsland()
-  const bottomNavHeight = Platform.OS === 'android' ? initialWindowMetrics?.insets?.bottom : 0
+  const bottomNavHeight = Platform.OS === 'android' ? options?.getAndroidNavbarHeight?.() ?? 0 : 0
 
   const prefersConstantNavigationBar = bottomNavHeight > 0
 
-  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : StatusBar.currentHeight
+  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : (options?.getStatusBarHeight?.() || 0)
+
+  const safeAreaBottom = Platform.select({
+    ios: hasNotch && !prefersConstantNavigationBar ? 20 : 0,
+    android: bottomNavHeight ?? initialWindowMetrics?.insets.bottom ?? 0,
+  })
 
-  const safeAreaBottom = (hasNotch && !prefersConstantNavigationBar ? 20 : 0)
   return {
     ...screenDimensions,
     pixel: StyleSheet.hairlineWidth,
@@ -30,7 +34,7 @@ export function getMobileThemeValues(initialWindowMetrics, values: AppValues) {
     bottomNavHeight,
     get window() {
       return {
-        height: screenDimensions.height - (bottomNavHeight + safeAreaTop),
+        height: screenDimensions.height - (safeAreaBottom + safeAreaTop),
         width: screenDimensions.width,
       }
     },