@codeleap/mobile 1.9.26 → 1.9.29

package/src/utils/ModalManager/components.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { usePrevious, onMount, onUpdate, PropsOf } from '@codeleap/common'
+import { useModalContext } from './context'
+import { Portal } from '@gorhom/portal'
+import { Modal as _Modal } from '../../components/Modal'
+
+export type ManagedModalProps<T = PropsOf<typeof _Modal>> = Omit<T, 'visible' | 'toggle'> & {
+  id?: string
+  initialVisible ?: boolean
+  parent?: string
+  absolute?: boolean
+  visible?: boolean
+  toggle?: PropsOf<typeof _Modal>['toggle']
+}
+
+export const Modal:React.FC<ManagedModalProps> = ({
+  children,
+  id,
+  absolute = true,
+  initialVisible = false,
+  parent,
+  ...props
+}) => {
+
+  const modalId = id
+  const modals = useModalContext()
+
+  onMount(() => {
+    if (!modalId) return
+    modals.setModal(modalId, {
+      attachedTo: [],
+      attachments: [],
+      visible: initialVisible,
+    })
+  })
+
+  const prevParent = usePrevious(parent)
+
+  onUpdate(() => {
+    if (!modalId) return
+    if (!!parent || !!prevParent) {
+      modals.attach(modalId, parent)
+    }
+  }, [parent])
+
+  const visible = modalId ? modals.isVisible(modalId) : props.visible
+
+  const ctxProps = modals?.state?.[modalId]?.props
+  const content = (
+    <_Modal {...props} {...ctxProps} visible={visible} toggle={() => {
+      if (modalId) {
+        modals.toggleModal(modalId)
+      } else {
+        props?.toggle?.()
+      }
+    }}>
+      {children}
+    </_Modal>
+  )
+
+  if (absolute) {
+    return <Portal>
+      {content}
+    </Portal>
+  }
+
+  return content
+}
+

package/src/utils/ModalManager/context.tsx

@@ -0,0 +1,247 @@
+import * as React from 'react'
+import { AnyFunction, onUpdate, TypeGuards, useCodeleapContext, useState } from '@codeleap/common'
+import { PortalProvider } from '@gorhom/portal'
+import { ModalProps } from '../../components/Modal'
+
+export type AppModalProps = {
+  visible: boolean
+  attachments: string[]
+  attachedTo: string[]
+  props?: any
+}
+type TModalState = AppModalProps
+type ModalTransitionOptions = {
+  duration?: number
+  props?: any
+}
+
+type TModalContext = {
+  state: Record<string, TModalState>
+  toggleModal: (name: string, setTo?: boolean, props?: any) => void
+  setModal: (name: string, to: Partial<TModalState>) => void
+  currentModal: string
+  isVisible: (name: string) => boolean
+  transition: (from: string, to: string, options?: ModalTransitionOptions) => Promise<void>
+  attach: (modal: string, to: string) => void
+  transitionDuration: number
+}
+
+const ModalContext = React.createContext({} as TModalContext)
+
+export function Provider({ children }) {
+  const [modals, setModals] = useState<TModalContext['state']>({})
+  const currentModal = Object.keys(modals).find(name => modals[name].visible)
+
+  function isVisible(name: string) {
+    return !!modals[name]?.visible
+  }
+
+  const toggleModal:TModalContext['toggleModal'] = (name, set?: boolean, props?: any) => {
+    const visible = isVisible(name)
+
+    const newVisible = typeof set === 'boolean' ? set : !visible
+
+    setModals((current) => {
+      const attached = newVisible ? [] : current[name].attachments.map(m => [m, { ...current[m], visible: false }])
+      return {
+        ...current,
+        [name]: {
+          ...current[name],
+          visible: newVisible,
+          props,
+        },
+        ...Object.fromEntries(attached),
+      }
+
+    })
+  }
+
+  const setModal:TModalContext['setModal'] = (name, to) => {
+
+    setModals((current) => ({
+      ...current,
+      [name]: {
+        ...current[name],
+        ...to,
+      },
+    }))
+
+  }
+
+  const codeleapCtx = useCodeleapContext()
+  const defaultDuration = codeleapCtx?.Theme?.values?.transitions?.modal?.duration || 300
+  const transition:TModalContext['transition'] = (from, to, options) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+
+        if (!from) {
+          toggleModal(to, true, options?.props)
+          return
+        }
+        const _options:ModalTransitionOptions = {
+          duration: defaultDuration,
+          ...options,
+        }
+
+        const toVisible = isVisible(to)
+        const fromVisible = isVisible(from)
+
+        // if (!fromVisible && !toVisible) {
+        //   toggleModal(to, true, options?.props)
+        //   return
+        // }
+
+        toggleModal(from, false)
+        setTimeout(() => {
+
+          toggleModal(to, true, options?.props)
+
+          resolve()
+        }, _options.duration)
+
+      })
+    })
+  }
+
+  function attach(modal: string, to: string) {
+    setModals((modals) => {
+      const toModal = modals[to]
+      const _modal = modals[modal]
+      if (!toModal || !_modal) return modals
+
+      const isAttached = toModal.attachments.includes(modal) || _modal.attachedTo.includes(to)
+
+      const newVal = { ...modals }
+      if (isAttached) {
+
+        newVal[to].attachments = newVal[to].attachments.filter(x => x !== modal)
+        newVal[modal].attachedTo = newVal[modal].attachedTo.filter(x => x !== to)
+
+      } else {
+
+        newVal[to].attachments.push(modal)
+        newVal[modal].attachedTo.push(to)
+
+      }
+      return newVal
+    })
+  }
+
+  return <ModalContext.Provider value={{
+    state: modals,
+    toggleModal,
+    setModal,
+    currentModal,
+    attach,
+    isVisible,
+    transition,
+    transitionDuration: defaultDuration,
+
+  }}>
+    <PortalProvider>
+
+      {children}
+    </PortalProvider>
+  </ModalContext.Provider>
+}
+
+export function useModalContext() {
+  const context = React.useContext(ModalContext)
+  return context
+}
+
+export type UseModalSequenceOptions = {
+  onFinish?: AnyFunction
+  resetOnFinish?: boolean
+  closeLastOnFinish?: boolean
+  waitForLastToCloseBeforeCallingFinish?: boolean
+  transitionOpts?: Partial<Parameters<TModalContext['transition']>[2]>
+  autoOpen?: boolean
+}
+
+export function useModalSequence(ids: string[], options?: UseModalSequenceOptions) {
+
+  const _options:UseModalSequenceOptions = {
+    closeLastOnFinish: true,
+    onFinish: () => {},
+    resetOnFinish: false,
+    waitForLastToCloseBeforeCallingFinish: true,
+    ...options,
+  }
+
+  const modals = useModalContext()
+  const [idx, setIdx] = useState(0)
+
+  const state = {
+    currentId: ids[idx],
+    nextId: ids[idx + 1],
+    previousId: ids[idx - 1],
+  }
+
+  onUpdate(() => {
+    if (_options.autoOpen && typeof ids?.[0] === 'number') {
+      if (!modals.isVisible(ids[0])) {
+        modals.toggleModal(ids[0])
+      }
+    }
+  }, [_options.autoOpen, ids?.[0]])
+
+  function next(props?: any) {
+    if (idx === ids.length - 1) {
+      if (_options.closeLastOnFinish) {
+        modals.transition(ids[idx], null).then(() => {
+          if (_options.waitForLastToCloseBeforeCallingFinish) {
+            _options.onFinish()
+          }
+        })
+      }
+      if (_options.resetOnFinish) {
+        reset()
+      }
+      if (!(_options.waitForLastToCloseBeforeCallingFinish && _options.closeLastOnFinish)) {
+        _options.onFinish()
+      }
+      return
+    } else {
+      if (!state.nextId) return
+      modals.transition(ids[idx], state.nextId, props)
+      setIdx(i => i + 1)
+    }
+  }
+  function previous(props?: any) {
+    if (!state.previousId) return
+
+    modals.transition(ids[idx], state.previousId, props)
+    setIdx(i => i - 1)
+
+  }
+
+  function goto(idxOrId: string | number, props?: any) {
+    let newId:string = null
+    if (TypeGuards.isString(idxOrId)) {
+      newId = idxOrId
+
+    } else {
+      newId = ids[idxOrId]
+    }
+    modals.transition(ids[idx], newId, {
+      props,
+    })
+    setIdx(ids.indexOf(newId))
+  }
+  function reset() {
+    setIdx(0)
+  }
+
+  return {
+    reset,
+    next,
+    previous,
+    setModal: setIdx,
+    goto,
+    currentIdx: idx,
+    ...state,
+
+  }
+
+}

package/src/utils/ModalManager/index.ts

@@ -0,0 +1,13 @@
+import { useModalContext, useModalSequence, Provider } from './context'
+import { Modal, ManagedModalProps } from './components'
+
+export const ModalManager = {
+  useModalContext,
+  Modal,
+  Provider,
+  useModalSequence,
+}
+
+export type {
+  ManagedModalProps,
+}

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('focus', () => {
+
+      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>
+>