@codeleap/mobile 2.3.0 → 2.3.2

package/src/utils/PermissionManager/context.tsx

@@ -0,0 +1,302 @@
+import React, { useContext, useState } from 'react'
+import { ModalManager } from '@codeleap/mobile'
+import { deepEqual, onMount, onUpdate, PermissionManager, PermissionTypes, useDebounce, usePrevious } from '@codeleap/common'
+import { AppState, Linking } from 'react-native'
+import { PermissionConfig, PermissionModalsConfig } from './types'
+
+type TPermissionContext = {
+  state: Record<string, PermissionTypes.PermissionStatus>
+  modalConfig: PermissionModalsConfig<any>
+  manager: PermissionManager<any, any>
+}
+
+const PermissionContext = React.createContext({} as TPermissionContext)
+
+type PermissionProviderProps = {
+  children: React.ReactElement
+  AppPermissions: PermissionManager<any, any>
+  modalConfig: PermissionModalsConfig<any>
+}
+type PermissionsRecord = PermissionManager<any, any>['values']
+function getStatuses(state: PermissionsRecord) {
+  const statuses = Object.entries(state).map(([k, v]) => [k, v.status])
+  return Object.fromEntries(statuses)
+}
+
+export function Provider({ children, AppPermissions, modalConfig }:PermissionProviderProps) {
+
+  const [state, setState] = useState(() => getStatuses(AppPermissions.values))
+
+  onMount(() => {
+
+    AppState.addEventListener('change', (state) => {
+      if (state === 'active') {
+        AppPermissions.update().then((vals) => {
+          const statuses = getStatuses(vals)
+          if (!deepEqual(statuses, state)) {
+            setState({ ...statuses })
+          }
+        })
+      }
+    })
+
+  })
+
+  return <PermissionContext.Provider value={{
+    state,
+    modalConfig: modalConfig,
+    manager: AppPermissions,
+  }}>
+    {children}
+  </PermissionContext.Provider>
+}
+
+type TAskManyResults<T extends string> =Record<T, PermissionTypes.PermissionStatus> & {
+  overall
+  : PermissionTypes.PermissionStatus
+}
+
+type AskManyOpts<T extends string|number|symbol > = {
+  breakOnDenied?: T[]
+}
+
+export type UsePermissions<
+  _PermissionNames extends string,
+  PermissionNames extends string = `${_PermissionNames}?` | _PermissionNames> = () => TPermissionContext & {
+  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<
+    R
+  >
+}
+
+export const usePermissions:UsePermissions<any> = () => {
+  const modalCtx = ModalManager.useModalContext()
+  const permissionCtx = useContext(PermissionContext)
+
+  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}`
+
+        if (!status.isGranted) {
+
+          modalCtx.toggleModal(permissionModalName, true, {
+            onPermissionResolve: (status) => {
+              modalCtx.toggleModal(permissionModalName, false, {})
+              setTimeout(() => {
+                onResolve?.(status, permissionModalName)
+
+                resolve(status)
+              }, modalCtx.transitionDuration)
+            },
+          })
+
+        } else {
+          onResolve?.(status.status as unknown as PermissionTypes.PermissionStatus)
+          resolve(status)
+        }
+      })
+    })
+
+  }
+
+  const askMany = async (
+    perms: any[],
+    onResolve?: (res:any) => any,
+    options?: AskManyOpts<any>,
+  ) => {
+
+    let prevModal = null
+    const results = {}
+
+    for (const _permission of perms) {
+      const permission = _permission.replace('?', '')
+      const status = await permissionCtx.manager.get(permission, {
+        ask: false,
+        askOnDenied: false,
+        askOnPending: false,
+      })
+      results[permission] = status.status
+      const permissionModalName = `permissions.${permission}`
+
+      if (!status.isGranted) {
+        let onOpen = null
+
+        if (prevModal) {
+
+          onOpen = () => new Promise((resolve) => {
+            setTimeout(() => {
+
+              modalCtx.transition(prevModal, permissionModalName, {
+                props: {
+                  onPermissionResolve: (status) => {
+                    resolve(status)
+                  },
+                },
+              })
+            })
+          })
+        } else {
+          onOpen = () => new Promise((resolve) => {
+            setTimeout(() => {
+              modalCtx.toggleModal(permissionModalName, true, {
+                onPermissionResolve: (status) => {
+                  resolve(status)
+                },
+              })
+            })
+          })
+
+        }
+
+        results[permission] = await onOpen()
+        prevModal = permissionModalName
+
+        if (!_permission.endsWith('?') && results[permission] !== 'granted') {
+          break
+        }
+      }
+    }
+    if (prevModal) {
+
+      setTimeout(() => {
+        modalCtx.toggleModal(prevModal, false, {})
+      })
+    }
+    const res:Parameters<typeof onResolve>[0] = {
+      ...results,
+      overall: Object.values(results).every(x => x === 'granted') ? 'granted' : 'denied',
+    }
+    onResolve(res)
+    return res
+  }
+
+  return {
+    askPermission,
+    askMany,
+    ...permissionCtx,
+  }
+}
+
+export function usePermissionModal(permissionName: string) {
+
+  const modalId = `permissions.${permissionName}`
+  const modals = ModalManager.useModalContext()
+  const permissionCtx = usePermissions()
+  const modalState = modals.state[modalId]
+
+  const currentState = permissionCtx.state[permissionName]
+  const status = currentState
+  const [debouncedStatus, reset] = useDebounce(status, modals.transitionDuration * 0.5)
+
+  function getConfig(withStatus) {
+    return {
+      ...permissionCtx.modalConfig[permissionName],
+      ...permissionCtx.modalConfig[permissionName]?.[withStatus],
+    } as PermissionConfig
+  }
+  const config = getConfig(debouncedStatus)
+
+  function onPermissionResolve(_status?: PermissionTypes.PermissionStatus) {
+    modalState?.props?.onPermissionResolve?.(_status || status)
+
+  }
+
+  onUpdate(() => {
+
+    if (modalState?.visible && !!status) {
+
+      if (status === 'granted') {
+        reset()
+        onPermissionResolve()
+      } else {
+
+        if (!deepEqual(config, getConfig(status))) {
+
+          modals.transition(modalId, modalId, {
+            props: modalState?.props,
+          })
+        }
+      }
+
+    }
+  }, [status, modalState?.visible])
+
+  async function onAllow() {
+
+    switch (config.onAllow) {
+      case 'ask':
+        const newStatus = await permissionCtx.manager.get(permissionName, {
+          ask: true,
+          askOnDenied: true,
+          askOnPending: true,
+        })
+        if (!newStatus.isGranted) {
+          onPermissionResolve(newStatus.status)
+        }
+        break
+
+      case 'openSettings':
+      default:
+        Linking.openSettings()
+        break
+    }
+
+  }
+
+  function onDeny() {
+    onPermissionResolve()
+  }
+
+  return {
+    onAllow,
+    onDeny,
+    modalId,
+    permissionName,
+    modalState: {
+      ...modalState,
+
+    },
+    currentState,
+    config,
+
+  }
+}
+
+type PermissionManagerArgTypes<M extends PermissionManager<any, any>> = {
+  perms: M extends PermissionManager<infer P, any> ? P extends Record<string, any> ? P : never : never
+  opts: M extends PermissionManager<any, infer O> ? O : never
+}
+
+type CreateTypedPermissionHooksArgs<
+  M extends PermissionManager<any, any>,
+  Args extends PermissionManagerArgTypes<M> = PermissionManagerArgTypes<M>,
+  ModalConfig extends PermissionModalsConfig<keyof Args['perms']> = PermissionModalsConfig<keyof Args['perms']>
+> = {
+  modalConfig: ModalConfig
+  permissionsManager: M
+}
+
+export function createTypedPermissionHooks<
+  M extends PermissionManager<any, any>,
+  Args extends PermissionManagerArgTypes<M> = PermissionManagerArgTypes<M>
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(configuration: CreateTypedPermissionHooksArgs<M>) {
+
+  const _usePermissions = usePermissions as UsePermissions<Exclude<keyof Args['perms'], number | symbol>>
+  const _usePermissionModal = usePermissionModal as ((name: keyof Args['perms']) => ReturnType<typeof usePermissionModal>)
+
+  return {
+    usePermissions: _usePermissions,
+    usePermissionModal: _usePermissionModal,
+
+  }
+}

package/src/utils/PermissionManager/index.ts

@@ -0,0 +1,20 @@
+import { usePermissions, Provider, createTypedPermissionHooks, usePermissionModal } from './context'
+import {
+
+  PermissionConfig,
+  PermissionModalsConfig,
+
+} from './types'
+export {
+  usePermissions,
+  Provider,
+  usePermissionModal,
+  createTypedPermissionHooks,
+
+}
+
+export type {
+
+  PermissionConfig,
+  PermissionModalsConfig,
+}

package/src/utils/PermissionManager/types.ts

@@ -0,0 +1,24 @@
+import { PermissionTypes } from '@codeleap/common'
+type NonGrantedPermissionTypes = Exclude<PermissionTypes.PermissionStatus, 'granted'>
+
+export type BasePermissionConfig = {
+    fullscreenModal?: boolean
+    dismissable?: boolean
+    title: string
+    onAllow: 'openSettings' | 'ask'
+
+    description: string[]
+    icon: string
+}
+
+export type PermissionConfig = BasePermissionConfig &
+    Partial<
+        Record<
+            NonGrantedPermissionTypes,
+            Partial<BasePermissionConfig>
+        >
+    >
+
+export type PermissionModalsConfig<PermissionNames extends string|number|symbol> = Partial<
+    Record<PermissionNames, PermissionConfig>
+>

package/src/utils/hooks.ts

@@ -0,0 +1,163 @@
+import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
+
+export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
+  const iters = useRef(0)
+  const [anim] = useState(new Animated.Value(iters.current))
+  const _prev = usePrevious(value)
+  const prev = _prev || value
+
+  onUpdate(() => {
+    // if (value === prev) return
+    const animation = Animated.timing(anim, {
+      ...opts,
+      toValue: iters.current + 1,
+      useNativeDriver: false,
+
+    })
+    animation.start(() => {
+      iters.current += 1
+    })
+
+    return () => {
+      animation.stop()
+
+    }
+  }, [value])
+
+  const color = anim.interpolate({
+    outputRange: [prev, value],
+    inputRange: [iters.current, iters.current + 1],
+  })
+
+  return color
+
+}
+
+export function useAppState(filter?: AppStateStatus[]) {
+  const [appState, setAppState] = useState(() => AppState.currentState)
+
+  onMount(() => {
+    AppState.addEventListener('change', s => {
+      if (!filter || filter.includes(s)) {
+        setAppState(s)
+      }
+    })
+  })
+
+  return {
+    appState,
+  }
+}
+
+export function useStaticAnimationStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(obj: T, keys: K[]) {
+  const styles = useRef({})
+
+  if (Object.keys(styles.current).length === 0) {
+    const mappedStyles = keys.map((k) => [k, { ...obj[k] }])
+
+    styles.current = Object.fromEntries(mappedStyles)
+  }
+
+  return styles.current as {
+    [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,
+  }
+}
+
+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

@@ -0,0 +1,11 @@
+export * from './OSAlert'
+export * from './hooks'
+export * from './misc'
+export * from './notifications'
+export * from './ModalManager'
+import * as Permissions from './PermissionManager'
+
+export { Permissions }
+export * from './KeyboardAware'
+export * from './input'
+export * from './theme'

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

package/src/utils/misc.ts

@@ -0,0 +1,83 @@
+import { MobileFile, MobileInputFile, parseFilePathData, FileWithPreview } from '@codeleap/common'
+
+export const stringToFile = (str: string): MobileInputFile => {
+  if (!str) {
+    return {
+      file: null,
+      preview: null,
+    }
+  }
+  const fileData = parseFilePathData(str)
+
+  const data: MobileFile = {
+    name: fileData.name,
+    type: 'image/' + fileData.extension,
+    size: 1000,
+    uri: str,
+    fileCopyUri: str,
+  }
+
+  return {
+    file: data,
+    preview: data.uri,
+  }
+}
+
+export function toMultipartFile(file: MobileInputFile) {
+  // const inputFile = file as MobileInputFile
+  const withPreview = file as FileWithPreview
+  if (!!withPreview?.file) {
+    return withPreview.file
+  }
+
+  return file as MobileFile
+  // const fileData:MobileFile =  ? inputFile.file : (file as RNFile)
+  // // const extension = parseFilePathData(fileData.uri).extension
+  // // const isImage =DocumentPicker..includes(extension)
+  // return fileData as unknown as Blob
+  // // if (isImage) {
+  // //   return {
+  // //     uri: fileData.uri,
+  // //     name: `image_${fileData.uri}`,
+  // //     type: `image/${extension}`,
+  // //   } as unknown as Blob
+  // // } else {
+  // //   return fileData as unknown as Blob
+  // // }
+}
+
+export function isFile(param:any): param is MobileInputFile {
+
+  let file = param
+  try {
+    if (typeof param?.preview !== 'undefined' && typeof param?.file !== 'undefined') {
+      file = param.file
+    }
+    const keys = Object.keys(file)
+
+    return ['uri', 'name', 'type'].every(key => keys.includes(key))
+
+  } catch (e) {
+    return false
+  }
+}
+
+export function toMultipart(body) {
+  const form = new FormData()
+
+  for (const [key, value] of Object.entries(body)) {
+    let formValue = null
+    if (Array.isArray(value) && value.every(isFile)) {
+      formValue = value.map((file) => form.append(key, toMultipartFile(file)))
+    } else if (isFile(value)) {
+      formValue = toMultipartFile(value)
+    } else if (typeof value === 'object') {
+      formValue = JSON.stringify(value)
+    } else {
+      formValue = String(value) as string
+    }
+    form.append(key, formValue)
+  }
+
+  return form
+}