@codeleap/mobile 2.3.7 → 2.3.10

package/src/utils/KeyboardAware/types.ts

@@ -0,0 +1,159 @@
+// Type definitions for react-native-keyboard-aware-scroll-view
+// Project: https://github.com/APSL/react-native-keyboard-aware-scroll-view
+// Definitions by: Kyle Roach <https://github.com/iRoachie>
+// TypeScript Version: 2.3.2
+
+import * as React from 'react'
+import {
+  ScrollViewProps,
+  FlatListProps,
+  SectionListProps,
+} from 'react-native'
+
+interface KeyboardAwareProps {
+  /**
+   * Catches the reference of the component.
+   *
+   *
+   * @type {function}
+   * @memberof KeyboardAwareProps
+   */
+  innerRef?: (ref: JSX.Element) => void
+  /**
+   * Adds an extra offset that represents the TabBarIOS height.
+   *
+   * Default is false
+   * @type {boolean}
+   * @memberof KeyboardAwareProps
+   */
+  viewIsInsideTabBar?: boolean
+
+  /**
+   * Coordinates that will be used to reset the scroll when the keyboard hides.
+   *
+   * @type {{
+   *         x: number,
+   *         y: number
+   *     }}
+   * @memberof KeyboardAwareProps
+   */
+  resetScrollToCoords?: {
+    x: number
+    y: number
+  }
+
+  /**
+   * Lets the user enable or disable automatic resetScrollToCoords
+   *
+   * @type {boolean}
+   * @memberof KeyboardAwareProps
+   */
+  enableResetScrollToCoords?: boolean
+
+  /**
+   * When focus in TextInput will scroll the position
+   *
+   * Default is true
+   *
+   * @type {boolean}
+   * @memberof KeyboardAwareProps
+   */
+
+  enableAutomaticScroll?: boolean
+  /**
+   * Enables keyboard aware settings for Android
+   *
+   * Default is false
+   *
+   * @type {boolean}
+   * @memberof KeyboardAwareProps
+   */
+  enableOnAndroid?: boolean
+
+  /**
+   * Adds an extra offset when focusing the TextInputs.
+   *
+   * Default is 75
+   * @type {number}
+   * @memberof KeyboardAwareProps
+   */
+  extraHeight?: number
+
+  /**
+   * Adds an extra offset to the keyboard.
+   * Useful if you want to stick elements above the keyboard.
+   *
+   * Default is 0
+   *
+   * @type {number}
+   * @memberof KeyboardAwareProps
+   */
+  extraScrollHeight?: number
+
+  /**
+   * Sets the delay time before scrolling to new position
+   *
+   * Default is 250
+   *
+   * @type {number}
+   * @memberof KeyboardAwareProps
+   */
+  keyboardOpeningTime?: number
+
+  /**
+   * Callback when the keyboard will show.
+   *
+   * @param frames Information about the keyboard frame and animation.
+   */
+  onKeyboardWillShow?: (frames: Object) => void
+
+  /**
+   * Callback when the keyboard did show.
+   *
+   * @param frames Information about the keyboard frame and animation.
+   */
+  onKeyboardDidShow?: (frames: Object) => void
+
+  /**
+   * Callback when the keyboard will hide.
+   *
+   * @param frames Information about the keyboard frame and animation.
+   */
+  onKeyboardWillHide?: (frames: Object) => void
+
+  /**
+   * Callback when the keyboard did hide.
+   *
+   * @param frames Information about the keyboard frame and animation.
+   */
+  onKeyboardDidHide?: (frames: Object) => void
+
+  /**
+   * Callback when the keyboard frame will change.
+   *
+   * @param frames Information about the keyboard frame and animation.
+   */
+  onKeyboardWillChangeFrame?: (frames: Object) => void
+
+  /**
+   * Callback when the keyboard frame did change.
+   *
+   * @param frames Information about the keyboard frame and animation.
+   */
+  onKeyboardDidChangeFrame?: (frames: Object) => void
+}
+
+interface KeyboardAwareScrollViewProps
+  extends KeyboardAwareProps,
+    ScrollViewProps {}
+interface KeyboardAwareFlatListProps<ItemT>
+  extends KeyboardAwareProps,
+    FlatListProps<ItemT> {}
+interface KeyboardAwareSectionListProps<ItemT>
+  extends KeyboardAwareProps,
+    SectionListProps<ItemT> {}
+
+interface KeyboardAwareState {
+  keyboardSpace: number
+}
+

package/src/utils/ModalManager/components.tsx

@@ -0,0 +1,112 @@
+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'
+import { Drawer as _Drawer } from '../../components/Drawer'
+
+type UseManagedModalArgs = {
+  id?: string
+  initialVisible ?: boolean
+  parent?: string
+  visible?: boolean
+  toggle?: PropsOf<typeof _Modal>['toggle']
+}
+
+function useManagedModal(props:UseManagedModalArgs) {
+  const {
+    initialVisible = false,
+    parent,
+    id,
+  } = 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 componentProps = {
+    ...props, ...ctxProps, visible: visible, toggle: () => {
+      if (modalId) {
+        modals.toggleModal(modalId)
+      } else {
+        props?.toggle?.()
+      }
+    },
+  }
+
+  return componentProps
+}
+export type ManagedModalProps<T = PropsOf<typeof _Modal>> = Omit<T, 'visible' | 'toggle'> & UseManagedModalArgs & {
+
+  absolute?: boolean
+
+}
+export const Modal:React.FC<ManagedModalProps> = ({
+  children,
+  absolute = true,
+  ...props
+}) => {
+  const componentProps = useManagedModal(props)
+
+  const content = (
+    <_Modal {...componentProps}>
+      {children}
+    </_Modal>
+  )
+
+  if (absolute) {
+    return <Portal>
+      {content}
+    </Portal>
+  }
+
+  return content
+}
+
+export type ManagedDrawerProps<T = PropsOf<typeof _Drawer>> = Omit<T, 'visible' | 'toggle'> & UseManagedModalArgs & {
+
+  absolute?: boolean
+
+}
+
+export const Drawer:React.FC<ManagedDrawerProps> = ({
+  children,
+  absolute = true,
+  ...props
+}) => {
+  const componentProps = useManagedModal(props)
+
+  const content = (
+    <_Drawer {...componentProps}>
+      {children}
+    </_Drawer>
+  )
+
+  if (absolute) {
+    return <Portal>
+      {content}
+    </Portal>
+  }
+
+  return content
+}

package/src/utils/ModalManager/context.tsx

@@ -0,0 +1,260 @@
+import * as React from 'react'
+import { AnyFunction, onUpdate, TypeGuards, useCodeleapContext, useState } from '@codeleap/common'
+import { PortalProvider } from '@gorhom/portal'
+import { KeyboardProvider } from '../KeyboardAware'
+
+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
+  remove(name: 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
+    })
+  }
+
+  function remove(id: string) {
+    const newModals = { ...modals }
+
+    delete newModals[id]
+
+    setModals(newModals)
+  }
+
+  return <KeyboardProvider>
+    <ModalContext.Provider value={{
+      state: modals,
+      toggleModal,
+      setModal,
+      currentModal,
+      attach,
+      isVisible,
+      remove,
+      transition,
+      transitionDuration: defaultDuration,
+
+    }}>
+      <PortalProvider>
+
+        {children}
+      </PortalProvider>
+    </ModalContext.Provider>
+  </KeyboardProvider>
+
+}
+
+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,16 @@
+import { useModalContext, useModalSequence, Provider } from './context'
+import { Modal, ManagedModalProps, Drawer, ManagedDrawerProps } from './components'
+
+export const ModalManager = {
+  useModalContext,
+  Modal,
+  Drawer,
+  Provider,
+  useModalSequence,
+}
+
+export type {
+  ManagedModalProps,
+  ManagedDrawerProps,
+
+}

package/src/utils/OSAlert.ts

@@ -0,0 +1,180 @@
+/* eslint no-restricted-imports: 'off' */
+/* eslint prefer-const: 'off' */
+import { Alert, AlertButton } from 'react-native'
+
+/**
+ * Alert.{function} receives three parameters, the last one being an object:
+ *
+ * @param {string} title text to appear in title
+ * @param {string} body text to appear in body
+ * @param {object} options array of buttons and callbacks
+ *
+ * options properties
+ * @property {string} name object description
+ * @property {function} run callback function to run on press
+ */
+
+type NativeAlertArgs = Parameters<typeof Alert.alert>
+
+export type OSAlertArgs = {
+  title: NativeAlertArgs['0']
+  body?: NativeAlertArgs['1']
+  options?: NativeAlertArgs['2']
+}
+export type AlertEvent = AlertButton['onPress']
+export type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
+export type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
+
+const currentAlerts = {
+
+}
+
+function generateAlertID(from:OSAlertArgs & {type: OSAlertType}) {
+  return [
+    from.type,
+    from.title,
+    from.body,
+  ].join('-')
+}
+
+function shouldShowAlert(args:OSAlertArgs, type: OSAlertType) {
+  const alertId = generateAlertID({ ...args, type })
+
+  if (!Object.keys(currentAlerts).includes(alertId)) {
+    currentAlerts[alertId] = true
+
+    return alertId
+  }
+
+  return ''
+}
+
+function popAlert(id:string) {
+  delete currentAlerts[id]
+}
+
+function ask({ title, body, options = null }: OSAlertArgs) {
+  if (!title) {
+    title = 'Quick quetion'
+  }
+  _OSAlert({
+    title,
+    body,
+    options,
+  })
+}
+
+function warn(args: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>) {
+  const id = shouldShowAlert(args, 'warn')
+
+  if (!id) return
+  let {
+    title,
+    body,
+    onAccept,
+    onReject,
+  } = args
+
+  if (!title) {
+    title = 'Hang on'
+  }
+  if (!body) {
+    body = 'Are you sure?'
+  }
+  if (!onReject) {
+    onReject = () => null
+  }
+  _OSAlert({
+    title,
+    body,
+    options: [
+      {
+        text: 'Cancel',
+        onPress: () => {
+          popAlert(id)
+          onReject()
+        },
+      },
+      {
+        text: 'OK',
+        style: 'destructive',
+        onPress: () => {
+          popAlert(id)
+          onAccept?.()
+        },
+      },
+    ],
+  })
+}
+
+function info(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
+  const id = shouldShowAlert(args, 'info')
+
+  if (!id) return
+  let {
+    title,
+    body,
+    onDismiss = () => null,
+  } = args
+
+  if (!title) {
+    title = 'FYI'
+  }
+  _OSAlert({
+    title,
+    body,
+    options: [
+      {
+        text: 'OK',
+        onPress: () => {
+          popAlert(id)
+          onDismiss?.()
+        },
+      },
+    ],
+  })
+}
+
+function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
+  const id = shouldShowAlert(args, 'error')
+
+  if (!id) return
+
+  let {
+    title,
+    body,
+  } = args
+
+  if (!title) {
+    title = 'Whoops!'
+  }
+  if (!body) {
+    body = 'Something went wrong'
+  }
+  _OSAlert({
+    title,
+    body,
+    options: [
+      {
+        text: 'OK',
+        onPress: () => {
+          popAlert(id)
+          args?.onDismiss?.()
+        },
+      },
+    ],
+  })
+}
+
+function _OSAlert(params: OSAlertArgs) {
+  Alert.alert(params.title, params.body, params.options, {
+    cancelable: false,
+  })
+}
+
+export const OSAlert = {
+  ask,
+  warn,
+  info,
+  error: OSError,
+}