@codeleap/mobile 1.9.28 → 1.9.31

package/src/utils/PermissionManager/context.tsx

@@ -0,0 +1,299 @@
+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) => any
+  askMany<T extends PermissionNames, R = TAskManyResults<T>>(
+    perms: T[],
+    onResolve?: (res:R) => any,
+    options?: AskManyOpts<T>
+  ):Promise<void>
+}
+
+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,
+    })
+
+    const permissionModalName = `permissions.${name}`
+
+    if (!status.isGranted) {
+
+      modalCtx.toggleModal(permissionModalName, true, {
+        onPermissionResolve: (status) => {
+          modalCtx.toggleModal(permissionModalName, false, {})
+          setTimeout(() => {
+            onResolve?.(status, permissionModalName)
+
+          }, modalCtx.transitionDuration)
+        },
+      })
+
+    } else {
+      onResolve?.(status.status as unknown as PermissionTypes.PermissionStatus)
+    }
+  }
+
+  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(() => {
+              console.log('transition', {
+                prevModal,
+                permissionModalName,
+
+              })
+              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) {
+      console.log(`Close prev modal`, {
+        prevModal,
+      })
+      setTimeout(() => {
+        modalCtx.toggleModal(prevModal, false, {})
+      })
+    }
+    onResolve({
+      ...results,
+      overall: Object.values(results).every(x => x === 'granted') ? 'granted' : 'denied',
+    })
+  }
+
+  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,65 @@
+import { onMount, onUpdate, usePrevious, useRef, useState } from '@codeleap/common'
+import { Animated, AppState, AppStateStatus } 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]
+  }
+}