@codeleap/mobile 2.0.0 → 2.0.3

package/src/components/Touchable/index.tsx

@@ -7,14 +7,14 @@ import {
 
   useCodeleapContext,
   AnyFunction,
-  defaultPresets,
 } from '@codeleap/common'
-import { Platform, Pressable, StyleSheet, View as RNView } from 'react-native'
+import { Pressable, StyleSheet, View as RNView } from 'react-native'
 
 import { createAnimatableComponent } from 'react-native-animatable'
 import { TouchableComposition, TouchableStyles } from './styles'
 import { StylesOf } from '../../types'
 import { View } from '../View'
+import { usePressableFeedback } from '../../utils'
 export type TouchableProps = Omit<
   ComponentPropsWithoutRef<typeof Pressable>,
   'onPress'
@@ -25,18 +25,19 @@ export type TouchableProps = Omit<
   debugName: string
   activeOpacity?: number
   debugComponent?: string
-  feedbackVariant?: 'opacity' | 'none' | 'highlight'
   onPress?: AnyFunction
+  noFeedback?: boolean
   styles?: StylesOf<TouchableComposition>
 } & BaseViewProps
 export * from './styles'
 
-const rippleStyles = {
+const defaultWrapperStyles = {
   paddingTop: 0,
   paddingLeft: 0,
   paddingRight: 0,
   paddingBottom: 0,
   overflow: 'hidden',
+  alignItems: 'stretch',
 }
 
 const defaultPressableStyles = {
@@ -44,12 +45,22 @@ const defaultPressableStyles = {
   marginLeft: 0,
   marginRight: 0,
   marginBottom: 0,
+
+}
+
+const ripplePressableStyles = {
+  // position: 'absolute',
+  // top: 0,
+  // left: 0,
+  // right: 0,
+  // bottom: 0,
+  // width: '100%',
+  // minWidth: '100%',
+  // maxWidth: '100%',
   // height: '100%',
-  minWidth: '100%',
   // minHeight: '100%',
   // maxHeight: '100%',
-  maxWidth: '100%',
-
+  // flex: 1,
 }
 
 export const Touchable: React.FC<TouchableProps> = forwardRef<
@@ -61,14 +72,13 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     children,
     onPress,
     style,
-    activeOpacity = 0.5,
     debugName,
     debugComponent,
+    noFeedback = false,
     styles,
-    feedbackVariant = 'opacity',
     ...props
   } = touchableProps
-  const _feedbackVariant = onPress ? feedbackVariant : 'none'
+
   const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchableStyles>('u:Touchable', {
     variants,
     transform: StyleSheet.flatten,
@@ -91,38 +101,77 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
 
   const _styles = StyleSheet.flatten([variantStyles.wrapper, style])
 
-  const hasRipple = (!!variantStyles.ripple || !!props.android_ripple) && _feedbackVariant !== 'none'
-  function getFeedbackStyle(pressed:boolean) {
-    if (Platform.OS === 'android' && hasRipple) return {}
-    switch (_feedbackVariant) {
-      case 'highlight':
-        return {
-          backgroundColor: pressed ? '#e0e0e0' : 'transparent',
-        }
-        break
-      case 'opacity':
-        return {
-          opacity: pressed ? activeOpacity : 1,
-        }
-      case 'none':
-        return {}
-    }
-  }
+  const disableFeedback = !onPress || noFeedback
 
-  const rippleConfig = hasRipple ? {
-    ...(variantStyles.ripple || {}),
-    ...(props.android_ripple || {}),
-  } : null
+  const { rippleConfig, getFeedbackStyle } = usePressableFeedback(_styles, {
+    hightlightPropertyIn: 'backgroundColor',
+    hightlightPropertyOut: 'backgroundColor',
+    disabled: disableFeedback,
+    feedbackConfig: variantStyles?.feedback,
+  })
 
   const Wrapper = View
 
+  const { wrapperStyle, pressableStyle } = React.useMemo(() => {
+    const wrapperkeys = [
+      'margin',
+      'alignSelf',
+      'border',
+      // 'flex!',
+    ]
+    const sharedKeys = [
+      'width!',
+      'height!',
+      'flex!',
+      'position!',
+      'top!',
+      'left!',
+      'right!',
+      'bottom!',
+    ]
+
+    const wrapperStyle = {} as any
+    const pressableStyle = {} as any
+    const match = (k, key) => {
+      if (k.endsWith('!')) {
+        return key === k.substring(0, k.length - 1)
+      } else {
+
+        return key.startsWith(k)
+      }
+    }
+    Object.entries(_styles).forEach(([key, value]) => {
+
+      if (wrapperkeys.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+      } else if (sharedKeys.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+
+        pressableStyle[key] = value
+      } else {
+        pressableStyle[key] = value
+      }
+    })
+
+    wrapperStyle.overflow = 'hidden'
+    // wrapperStyle.flexDirection = 'row'
+    // wrapperStyle.alignItems = 'stretch'
+
+    return {
+      wrapperStyle,
+      pressableStyle,
+    }
+  }, [JSON.stringify(_styles)])
+
   return (
-    <Wrapper style={[_styles, rippleStyles]}>
+    <Wrapper style={[wrapperStyle]}>
       <Pressable onPress={press} style={({ pressed }) => ([
+
+        // defaultPressableStyles,
+        pressableStyle,
+        // !!rippleConfig && ripplePressableStyles,
         getFeedbackStyle(pressed),
-        variantStyles.pressable,
-        _styles,
-        defaultPressableStyles,
+
       ])} android_ripple={rippleConfig} {...props} ref={ref}>
         {children}
       </Pressable>

package/src/components/Touchable/styles.ts

@@ -1,8 +1,17 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { TouchableFeedbackConfig } from '../../utils'
 
-export type TouchableComposition = 'wrapper' | 'ripple' | 'pressable'
+export type TouchableComposition = 'wrapper' | 'feedback' | 'pressable'
 
-const createTouchableStyle = createDefaultVariantFactory<TouchableComposition>()
+export type TouchableStylesGen<TCSS = any> = StylesOf<Exclude<TouchableComposition, 'feedback'>> & {
+  feedback?: TouchableFeedbackConfig
+}
+
+const createTouchableStyle = createDefaultVariantFactory<
+  TouchableComposition,
+  TouchableStylesGen
+>()
 
 const presets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })),
 )
@@ -10,7 +19,10 @@ const presets = includePresets((styles) => createTouchableStyle(() => ({ wrapper
 export const TouchableStyles = {
   ...presets,
   default: createTouchableStyle((t) => ({
-
+    feedback: {
+      type: 'opacity',
+      value: 0.5,
+    },
   })),
 
 }

package/src/utils/KeyboardAware/lib/KeyboardAwareHOC.tsx

@@ -15,6 +15,7 @@ import {
   EventSubscription,
   KeyboardEventListener,
   NativeSyntheticEvent,
+  ScrollView,
 } from 'react-native'
 import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
 export function isIphoneX() {
@@ -74,7 +75,9 @@ export type KeyboardAwareHOCProps = {
   update?: Function
   contentContainerStyle?: any
   enableOnAndroid?: boolean
+  Scrollable: any
   innerRef?: Function
+  hocOptions?: any
 } & typeof keyboardAwareHOCTypeEvents
 export type KeyboardAwareHOCState = {
   keyboardSpace: number
@@ -157,18 +160,7 @@ const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = {
   },
 }
 
-function KeyboardAwareHOC(
-  ScrollableComponent: React.ComponentClass<any>,
-  userOptions = ScrollIntoViewDefaultOptions,
-) {
-
-  const hocOptions: KeyboardAwareHOCOptions = {
-    ...ScrollIntoViewDefaultOptions,
-    ...userOptions,
-  }
-
-  return class extends React.Component<KeyboardAwareHOCProps, KeyboardAwareHOCState>
-    implements KeyboardAwareInterface {
+class KeyboardAwareScrollable extends React.Component<KeyboardAwareHOCProps, KeyboardAwareHOCState> implements KeyboardAwareInterface {
     _rnkasv_keyboardView: any
 
     keyboardWillShowEvent: EventSubscription
@@ -187,7 +179,7 @@ function KeyboardAwareHOC(
 
     state: KeyboardAwareHOCState
 
-    static displayName = `KeyboardAware${getDisplayName(ScrollableComponent)}`
+    static displayName = `KeyboardAware`
 
     static propTypes = {
       viewIsInsideTabBar: PropTypes.bool,
@@ -213,13 +205,13 @@ function KeyboardAwareHOC(
 
     // HOC options are used to init default props, so that these options can be overriden with component props
     static defaultProps = {
-      enableAutomaticScroll: hocOptions.enableAutomaticScroll,
-      extraHeight: hocOptions.extraHeight,
-      extraScrollHeight: hocOptions.extraScrollHeight,
-      enableResetScrollToCoords: hocOptions.enableResetScrollToCoords,
-      keyboardOpeningTime: hocOptions.keyboardOpeningTime,
-      viewIsInsideTabBar: hocOptions.viewIsInsideTabBar,
-      enableOnAndroid: hocOptions.enableOnAndroid,
+      enableAutomaticScroll: ScrollIntoViewDefaultOptions.enableAutomaticScroll,
+      extraHeight: ScrollIntoViewDefaultOptions.extraHeight,
+      extraScrollHeight: ScrollIntoViewDefaultOptions.extraScrollHeight,
+      enableResetScrollToCoords: ScrollIntoViewDefaultOptions.enableResetScrollToCoords,
+      keyboardOpeningTime: ScrollIntoViewDefaultOptions.keyboardOpeningTime,
+      viewIsInsideTabBar: ScrollIntoViewDefaultOptions.viewIsInsideTabBar,
+      enableOnAndroid: ScrollIntoViewDefaultOptions.enableOnAndroid,
     }
 
     constructor(props: KeyboardAwareHOCProps) {
@@ -533,7 +525,7 @@ function KeyboardAwareHOC(
     }
 
     _handleRef = (ref: React.ComponentClass<any>) => {
-      this._rnkasv_keyboardView = ref ? hocOptions.extractNativeRef(ref) : ref
+      this._rnkasv_keyboardView = ref ? this.props.hocOptions.extractNativeRef(ref) : ref
       if (this.props.innerRef) {
         this.props.innerRef(this._rnkasv_keyboardView)
       }
@@ -552,7 +544,7 @@ function KeyboardAwareHOC(
     }
 
     render() {
-      const { enableOnAndroid, contentContainerStyle, onScroll } = this.props
+      const { enableOnAndroid, contentContainerStyle, onScroll, Scrollable } = this.props
       let newContentContainerStyle
       if (Platform.OS === 'android' && enableOnAndroid) {
         newContentContainerStyle = [].concat(contentContainerStyle).concat({
@@ -561,9 +553,9 @@ function KeyboardAwareHOC(
             this.state.keyboardSpace,
         })
       }
-      const refProps = { [hocOptions.refPropName]: this._handleRef }
+      const refProps = { [this.props.hocOptions.refPropName]: this._handleRef }
       return (
-        <ScrollableComponent
+        <Scrollable
           {...refProps}
           keyboardDismissMode='interactive'
           contentInset={{ bottom: this.state.keyboardSpace }}
@@ -589,7 +581,25 @@ function KeyboardAwareHOC(
         />
       )
     }
+}
+
+function KeyboardAwareHOC(
+  ScrollableComponent: React.ComponentClass<any>,
+  userOptions = ScrollIntoViewDefaultOptions,
+) {
+
+  const hocOptions: KeyboardAwareHOCOptions = {
+    ...ScrollIntoViewDefaultOptions,
+    ...userOptions,
   }
+
+  return React.forwardRef((props, ref) => <KeyboardAwareScrollable
+    hocOptions={hocOptions}
+    // @ts-ignore
+    ref={ref}
+    Scrollable={ScrollableComponent}
+    {...props}
+  />)
 }
 
 // Allow to pass options, without breaking change, and curried for composition

package/src/utils/OSAlert.ts

@@ -16,14 +16,14 @@ import { Alert, AlertButton } from 'react-native'
 
 type NativeAlertArgs = Parameters<typeof Alert.alert>
 
-type OSAlertArgs = {
+export type OSAlertArgs = {
   title: NativeAlertArgs['0']
   body?: NativeAlertArgs['1']
   options?: NativeAlertArgs['2']
 }
-type AlertEvent = AlertButton['onPress']
-type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
-type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
+export type AlertEvent = AlertButton['onPress']
+export type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
+export type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
 
 const currentAlerts = {
 
@@ -57,7 +57,7 @@ function ask({ title, body, options = null }: OSAlertArgs) {
   if (!title) {
     title = 'Quick quetion'
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options,
@@ -84,7 +84,7 @@ function warn(args: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>) {
   if (!onReject) {
     onReject = () => null
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options: [
@@ -120,7 +120,7 @@ function info(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
   if (!title) {
     title = 'FYI'
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options: [
@@ -151,7 +151,7 @@ function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
   if (!body) {
     body = 'Something went wrong'
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options: [
@@ -166,13 +166,13 @@ function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
   })
 }
 
-function OSAlert(params: OSAlertArgs) {
+function _OSAlert(params: OSAlertArgs) {
   Alert.alert(params.title, params.body, params.options, {
     cancelable: false,
   })
 }
 
-export default {
+export const OSAlert = {
   ask,
   warn,
   info,

package/src/utils/hooks.ts

@@ -1,5 +1,5 @@
-import { onMount, onUpdate, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus } from 'react-native'
+import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig } from 'react-native'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -63,3 +63,83 @@ export function useStaticAnimationStyles<T extends Record<string|number|symbol,
     [P in K] : T[K]
   }
 }
+
+export type FeedbackConfig =
+| { type: 'opacity'; value?: number }
+| {type: 'highlight'; color?: string; brightness?: number; shiftOpacity?: number}
+| {type: 'none'}
+
+type RippleConfig = {
+  type: 'ripple'
+  config?: PressableAndroidRippleConfig
+  iosFallback?: FeedbackConfig
+}
+export type TouchableFeedbackConfig = RippleConfig | FeedbackConfig
+
+export type UsePressableFeedbackConfig = {
+  disabled?: boolean
+  feedbackConfig?: TouchableFeedbackConfig
+  hightlightPropertyIn: 'backgroundColor' | 'borderColor' | 'color'
+  hightlightPropertyOut: 'backgroundColor' | 'borderColor' | 'color'
+}
+
+export function usePressableFeedback(styles: any, config:UsePressableFeedbackConfig) {
+  const {
+    disabled,
+    feedbackConfig,
+    hightlightPropertyIn = 'backgroundColor',
+    hightlightPropertyOut = 'backgroundColor',
+  } = config
+  const _feedbackConfig = {
+    ...feedbackConfig,
+  }
+  const disableFeedback = disabled
+
+  const rippleEnabled = _feedbackConfig?.type === 'ripple' && !disableFeedback
+  const rippleConfig = rippleEnabled ? _feedbackConfig?.config : null
+
+  function getFeedbackStyle(pressed:boolean) {
+    if (disableFeedback) return {}
+    let feedbackConfig = { ..._feedbackConfig }
+
+    if (rippleEnabled && feedbackConfig.type === 'ripple' && Platform.OS === 'ios' && !!_feedbackConfig?.iosFallback) {
+      feedbackConfig = feedbackConfig?.iosFallback
+    }
+    switch (feedbackConfig.type) {
+      case 'highlight':
+        if (!pressed && hightlightPropertyIn !== hightlightPropertyOut) return {}
+        let highlightColorDefault = styles?.[hightlightPropertyIn] || '#0000'
+        if (pressed) {
+          if (feedbackConfig?.color) {
+            highlightColorDefault = feedbackConfig?.color
+          } else {
+            let opacity = feedbackConfig?.shiftOpacity
+            let brightness = feedbackConfig?.brightness
+            if (!TypeGuards.isNumber(opacity)) {
+              opacity = 1
+            }
+            if (!TypeGuards.isNumber(brightness)) {
+              brightness = 0
+            }
+            highlightColorDefault = shadeColor(highlightColorDefault, brightness * 100, opacity)
+          }
+        }
+        return {
+          [hightlightPropertyOut]: highlightColorDefault,
+        }
+        break
+      case 'opacity':
+        return {
+          opacity: pressed ? feedbackConfig?.value : 1,
+        }
+
+      case 'none':
+        return {}
+    }
+  }
+
+  return {
+    getFeedbackStyle,
+    rippleConfig,
+  }
+}

package/src/utils/index.ts

@@ -1,4 +1,4 @@
-export { default as OSAlert } from './OSAlert'
+export * from './OSAlert'
 export * from './hooks'
 export * from './misc'
 export * from './notifications'
@@ -6,4 +6,4 @@ export * from './ModalManager'
 import * as Permissions from './PermissionManager'
 
 export { Permissions }
-export * from './KeyboardAware'
+export * from './KeyboardAware'

package/src/utils/notifications.ts

@@ -114,7 +114,7 @@ export class NotificationManager {
     set initialized(to:boolean) {
 
       if (to) {
-        this.logger.log('Initialized', '', MODULE)
+        this.logger.info('Initialized', '', MODULE)
         this.unsubscribeFromMessage = messaging().onMessage((msg) => {
           this.handleNotification({
             data: msg,
@@ -130,7 +130,7 @@ export class NotificationManager {
         })
 
         this.unsubscribeFromPress = messaging().onNotificationOpenedApp(msg => {
-          this.logger.log('Notification press', msg, MODULE)
+          this.logger.info('Notification press', msg, MODULE)
           this.handleNotification({
             data: msg,
             type: 'press',
@@ -140,7 +140,7 @@ export class NotificationManager {
         if (!this._initialNoficationHandled && this.autoHandleInitialNotification) {
           this.getInitialNotification().then(msg => {
             if (!msg.data) return
-            this.logger.log('Notification initial', msg, MODULE)
+            this.logger.info('Notification initial', msg, MODULE)
             this.handleNotification(msg).then(() => {
               this._initialNoficationHandled = true
             }).catch(e => {
@@ -156,7 +156,7 @@ export class NotificationManager {
 
         this.unsubscribeFromPress = null
 
-        this.logger.log('Deinitialized', '', MODULE)
+        this.logger.info('Deinitialized', '', MODULE)
       }
       this._initialized = to