@codeleap/mobile 2.1.8 → 2.2.0

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -0,0 +1,155 @@
+import { PropsOf, TypeGuards, useCodeleapContext } from '@codeleap/common'
+import { useEffect, useState } from 'react'
+import {
+  Keyboard,
+  Platform,
+  KeyboardEvent,
+  KeyboardEventName,
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+} from 'react-native'
+
+type KeyboardVisibilityEvents = {
+    show: KeyboardEventName
+    hide: KeyboardEventName
+}
+
+export const useKeyboard = () => {
+  const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
+  const [keyboardVisible, setKeyboardVisible] = useState(false)
+
+  useEffect(() => {
+    const eventNames = Platform.select<KeyboardVisibilityEvents>({
+      ios: {
+        show: 'keyboardWillShow',
+        hide: 'keyboardWillHide',
+      },
+      android: {
+        show: 'keyboardDidShow',
+        hide: 'keyboardDidHide',
+      },
+    })
+    const events = [
+      Keyboard.addListener(eventNames.show, (e) => {
+        setKeyboardVisible(true)
+        setKeyboardEvent(e)
+      }),
+      Keyboard.addListener(eventNames.hide, (e) => {
+        setKeyboardVisible(false)
+        setKeyboardEvent(e)
+      }),
+    ]
+    return () => {
+      events.forEach(e => e.remove())
+    }
+  }, [])
+
+  const _return = {
+    event: keyboardEvent,
+    isVisible: keyboardVisible,
+    height: keyboardEvent?.endCoordinates?.height || 0,
+    ...Keyboard,
+  }
+
+  return _return
+}
+type ScrollViewProps = Partial<
+  Pick<
+  PropsOf<typeof ScrollView>,
+  'horizontal' | 'contentContainerStyle' | 'style'
+  >
+>
+
+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,
+    }
+
+    if (!_options.enabled || props?.horizontal || (Platform.OS === 'android' && !_options.enableOnAndroid)) return props
+
+    if (!props) {
+      props = {} as T
+    }
+    const baseStyle = StyleSheet.flatten(props[_options.baseStyleProp] || {})
+
+    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 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
+        }
+        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
+    }
+
+    if (!valid) return props
+
+    return {
+      ...props,
+      [_options.baseStyleProp]: newStyleProp,
+    }
+  }
+  return {
+    keyboard,
+    getKeyboardAwareProps,
+  }
+}

package/src/utils/PermissionManager/context.tsx

@@ -63,42 +63,49 @@ type AskManyOpts<T extends string|number|symbol > = {
 export type UsePermissions<
   _PermissionNames extends string,
   PermissionNames extends string = `${_PermissionNames}?` | _PermissionNames> = () => TPermissionContext & {
-  askPermission: (name: PermissionNames, onResolve?: (status: PermissionTypes.PermissionStatus) => any) => any
+  askPermission: (name: PermissionNames, onResolve?: (status: PermissionTypes.PermissionStatus) => any) => Promise<PermissionTypes.PermissionStatus>
   askMany<T extends PermissionNames, R = TAskManyResults<T>>(
     perms: T[],
     onResolve?: (res:R) => any,
     options?: AskManyOpts<T>
-  ):Promise<void>
+  ):Promise<
+    R
+  >
 }
 
 export const usePermissions:UsePermissions<any> = () => {
   const modalCtx = ModalManager.useModalContext()
   const permissionCtx = useContext(PermissionContext)
 
-  async function askPermission(name: string, onResolve?: (status: PermissionTypes.PermissionStatus, modalName?: string) => any) {
-    const status = await permissionCtx.manager.get(name, {
-      ask: false,
-      askOnDenied: false,
-      askOnPending: false,
-    })
+  function askPermission(name: string, onResolve?: (status: PermissionTypes.PermissionStatus, modalName?: string) => any) {
+    return new Promise<PermissionTypes.PermissionStatus>((resolve, reject) => {
+      permissionCtx.manager.get(name, {
+        ask: false,
+        askOnDenied: false,
+        askOnPending: false,
+      }).then(status => {
+        const permissionModalName = `permissions.${name}`
 
-    const permissionModalName = `permissions.${name}`
+        if (!status.isGranted) {
 
-    if (!status.isGranted) {
+          modalCtx.toggleModal(permissionModalName, true, {
+            onPermissionResolve: (status) => {
+              modalCtx.toggleModal(permissionModalName, false, {})
+              setTimeout(() => {
+                onResolve?.(status, permissionModalName)
 
-      modalCtx.toggleModal(permissionModalName, true, {
-        onPermissionResolve: (status) => {
-          modalCtx.toggleModal(permissionModalName, false, {})
-          setTimeout(() => {
-            onResolve?.(status, permissionModalName)
+                resolve(status)
+              }, modalCtx.transitionDuration)
+            },
+          })
 
-          }, modalCtx.transitionDuration)
-        },
+        } else {
+          onResolve?.(status.status as unknown as PermissionTypes.PermissionStatus)
+          resolve(status)
+        }
       })
+    })
 
-    } else {
-      onResolve?.(status.status as unknown as PermissionTypes.PermissionStatus)
-    }
   }
 
   const askMany = async (
@@ -164,10 +171,12 @@ export const usePermissions:UsePermissions<any> = () => {
         modalCtx.toggleModal(prevModal, false, {})
       })
     }
-    onResolve({
+    const res:Parameters<typeof onResolve>[0] = {
       ...results,
       overall: Object.values(results).every(x => x === 'granted') ? 'granted' : 'denied',
-    })
+    }
+    onResolve(res)
+    return res
   }
 
   return {

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)
+}

package/src/utils/index.ts

@@ -7,3 +7,4 @@ import * as Permissions from './PermissionManager'
 
 export { Permissions }
 export * from './KeyboardAware'
+export * from './input'

package/src/utils/input.ts

@@ -0,0 +1,51 @@
+import { TextInputProps } from 'react-native'
+
+const createInputPresets = <T extends Record<string, (...args:any[]) => Partial<TextInputProps>>>(p:T):T => {
+  return p
+}
+
+export const mobileInputPresets = createInputPresets({
+  email: () => ({
+    keyboardType: 'email-address',
+    autoCapitalize: 'none',
+    autoComplete: 'email',
+    textContentType: 'emailAddress',
+
+  }),
+  name: () => ({
+    autoCapitalize: 'words',
+    autoComplete: 'name',
+    textContentType: 'name',
+
+  }),
+  chat: () => ({
+    returnKeyType: 'send',
+
+  }),
+  password: (options?: {new?: boolean}) => {
+    return {
+      autoCapitalize: 'none',
+      autoComplete: options?.new ? 'password-new' : 'password',
+      textContentType: options?.new ? 'newPassword' : 'password',
+    }
+  },
+  search: () => ({
+    returnKeyType: 'search',
+  }),
+  redeemCode: (action:'join'|'obtain' = 'obtain') => {
+    const isJoin = action === 'join'
+    if (isJoin) {
+      return {
+        returnKeyType: 'join',
+        textContentType: 'oneTimeCode',
+        autoComplete: 'sms-otp',
+      }
+    }
+    return {
+      returnKeyType: 'done',
+      textContentType: 'oneTimeCode',
+      autoComplete: 'sms-otp',
+    }
+
+  },
+})