@codeleap/mobile 2.1.7 → 2.1.10

package/src/utils/KeyboardAware/index.ts

@@ -4,6 +4,7 @@ import listenToKeyboardEvents from './lib/KeyboardAwareHOC'
 import KeyboardAwareScrollView from './lib/KeyboardAwareScrollView'
 import KeyboardAwareFlatList from './lib/KeyboardAwareFlatList'
 import KeyboardAwareSectionList from './lib/KeyboardAwareSectionList'
+export * from './keyboardHooks'
 
 export {
   listenToKeyboardEvents,

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -0,0 +1,91 @@
+import { PropsOf, TypeGuards } from '@codeleap/common'
+import { useEffect, useState } from 'react'
+import { Keyboard, Platform, KeyboardEvent, KeyboardEventName, ScrollView, StyleSheet, ViewStyle } from 'react-native'
+
+type KeyboardVisibilityEvents = {
+    show: KeyboardEventName
+    hide: KeyboardEventName
+}
+
+export const useKeyboardVisibility = () => {
+  const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
+  const [keyboardVisible, setKeyboardVisible] = useState(true)
+
+  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,
+    visible: keyboardVisible,
+    height: keyboardEvent?.endCoordinates?.height || 0,
+  }
+
+  return _return
+}
+type ScrollViewProps = PropsOf<typeof ScrollView>
+
+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
+
+      const baseStyle:ScrollViewProps['style'] = StyleSheet.flatten(baseProps?.[styleProperty])
+
+      const baseBottom = baseStyle?.paddingBottom || baseStyle?.padding || 0
+
+      if (TypeGuards.isNumber(baseBottom)) {
+
+        const keyboardAdaptionStyle = {
+          ...baseStyle,
+          [insetProperty]: baseBottom + keyboard.height,
+
+        }
+        return {
+
+          ...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')
+      }
+
+    },
+  }
+}

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/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',
+    }
+
+  },
+})