@codeleap/mobile 2.1.10 → 2.2.0

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -1,15 +1,23 @@
-import { PropsOf, TypeGuards } from '@codeleap/common'
+import { PropsOf, TypeGuards, useCodeleapContext } from '@codeleap/common'
 import { useEffect, useState } from 'react'
-import { Keyboard, Platform, KeyboardEvent, KeyboardEventName, ScrollView, StyleSheet, ViewStyle } from 'react-native'
+import {
+  Keyboard,
+  Platform,
+  KeyboardEvent,
+  KeyboardEventName,
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+} from 'react-native'
 
 type KeyboardVisibilityEvents = {
     show: KeyboardEventName
     hide: KeyboardEventName
 }
 
-export const useKeyboardVisibility = () => {
+export const useKeyboard = () => {
   const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
-  const [keyboardVisible, setKeyboardVisible] = useState(true)
+  const [keyboardVisible, setKeyboardVisible] = useState(false)
 
   useEffect(() => {
     const eventNames = Platform.select<KeyboardVisibilityEvents>({
@@ -39,53 +47,109 @@ export const useKeyboardVisibility = () => {
 
   const _return = {
     event: keyboardEvent,
-    visible: keyboardVisible,
+    isVisible: keyboardVisible,
     height: keyboardEvent?.endCoordinates?.height || 0,
+    ...Keyboard,
   }
 
   return _return
 }
-type ScrollViewProps = PropsOf<typeof ScrollView>
+type ScrollViewProps = Partial<
+  Pick<
+  PropsOf<typeof ScrollView>,
+  'horizontal' | 'contentContainerStyle' | 'style'
+  >
+>
 
-export const useKeyboardScrollView = () => {
-  const keyboard = useKeyboardVisibility()
-
-  return {
-    keyboard,
-    getScrollProps: <T extends ScrollViewProps>(
-      base?:T,
-      styleProperty: keyof T = 'style',
-      insetProperty:keyof ViewStyle = 'marginBottom',
-    ): T => {
-      if (!keyboard.visible) return base || ({} as T)
-      const baseProps = base
+export type GetKeyboardAwarePropsOptions = {
+  baseStyleProp?: 'style' | 'contentContainerStyle'
+  adapt?: 'height' | 'maxHeight' | 'paddingBottom' | 'marginBottom' | 'bottom'
+  enabled?: boolean
+  enableOnAndroid?: boolean
+}
+type UseKeyboardAwareViewParams = {
+  debugName?: string
+}
+export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
+  const keyboard = useKeyboard()
+  const { logger } = useCodeleapContext()
+  function getKeyboardAwareProps<T extends ScrollViewProps>(
+    props?:T,
+    options?: GetKeyboardAwarePropsOptions,
+  ): T {
+    const _options:GetKeyboardAwarePropsOptions = {
+      adapt: 'maxHeight',
+      baseStyleProp: 'style',
+      enabled: true,
+      enableOnAndroid: true,
+      ...options,
+    }
 
-      const baseStyle:ScrollViewProps['style'] = StyleSheet.flatten(baseProps?.[styleProperty])
+    if (!_options.enabled || props?.horizontal || (Platform.OS === 'android' && !_options.enableOnAndroid)) return props
 
-      const baseBottom = baseStyle?.paddingBottom || baseStyle?.padding || 0
+    if (!props) {
+      props = {} as T
+    }
+    const baseStyle = StyleSheet.flatten(props[_options.baseStyleProp] || {})
 
-      if (TypeGuards.isNumber(baseBottom)) {
+    const baseValue = baseStyle[_options.adapt] as number
+    let valid = true
+    const warnOnNotNumber = () => {
+      if (!TypeGuards.isNil(baseValue) && !TypeGuards.isNumber(baseValue)) {
+        valid = false
+        const debugStr = params?.debugName ? 'at ' + params?.debugName + ' ' : ''
+        logger.warn(
+          `${_options.baseStyleProp}.${_options.adapt} must be a number or not be set at all`,
+          { props, options: _options },
+          'useKeyboardAwareView' + debugStr,
+        )
+      }
+    }
 
-        const keyboardAdaptionStyle = {
-          ...baseStyle,
-          [insetProperty]: baseBottom + keyboard.height,
+    const newStyleProp = {
+      ...baseStyle,
+    }
 
+    switch (_options.adapt) {
+      case 'height':
+        warnOnNotNumber()
+        const baseHeight = baseValue || 0
+        newStyleProp.height = baseHeight - keyboard.height
+        break
+      case 'maxHeight':
+        if (keyboard.isVisible) {
+          warnOnNotNumber()
+          const baseMaxHeight = baseValue || Dimensions.get('window').height
+          newStyleProp.maxHeight = baseMaxHeight - keyboard.height
+          // break
         }
-        return {
+        break
+      case 'paddingBottom':
+        warnOnNotNumber()
+        const basePaddingBottom = baseValue || 0
+        newStyleProp.paddingBottom = basePaddingBottom + keyboard.height
+        break
+      case 'marginBottom':
+        warnOnNotNumber()
+        const baseMarginBottom = baseValue || 0
+        newStyleProp.marginBottom = baseMarginBottom + keyboard.height
+        break
+      case 'bottom':
+        warnOnNotNumber()
+        const baseBottom = baseValue || 0
+        newStyleProp.bottom = baseBottom + keyboard.height
+        break
+    }
 
-          ...baseProps,
-          keyboardDismissMode: 'interactive',
-          contentInset: { bottom: keyboard.height },
-          automaticallyAdjustContentInsets: false,
-          showsVerticalScrollIndicator: true,
-          scrollEventThrottle: 1,
-          keyboardSpace: keyboard.height,
-          [styleProperty]: keyboardAdaptionStyle,
-        } as unknown as T
-      } else {
-        throw new Error('Keyboard adaptive scroll view\'s "style.marginBottom" must be a number')
-      }
+    if (!valid) return props
 
-    },
+    return {
+      ...props,
+      [_options.baseStyleProp]: newStyleProp,
+    }
+  }
+  return {
+    keyboard,
+    getKeyboardAwareProps,
   }
 }

package/src/utils/hooks.ts

@@ -1,5 +1,5 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig } from 'react-native'
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -143,3 +143,21 @@ export function usePressableFeedback(styles: any, config:UsePressableFeedbackCon
     rippleConfig,
   }
 }
+
+export function useBackButton(cb: () => boolean|void, deps = []) {
+  onUpdate(() => {
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      const stopBubbling = cb()
+
+      if (TypeGuards.isBoolean(stopBubbling)) {
+        return stopBubbling
+      }
+
+      return false
+
+    })
+    return () => {
+      subscription.remove()
+    }
+  }, deps)
+}