@codeleap/mobile 1.9.33 → 2.0.2

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

@@ -3,25 +3,22 @@ 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'
 
-export type ManagedModalProps<T = PropsOf<typeof _Modal>> = Omit<T, 'visible' | 'toggle'> & {
+type UseManagedModalArgs = {
   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
-}) => {
-
+function useManagedModal(props:UseManagedModalArgs) {
+  const {
+    initialVisible = false,
+    parent,
+    id,
+  } = props
   const modalId = id
   const modals = useModalContext()
 
@@ -46,14 +43,33 @@ export const Modal:React.FC<ManagedModalProps> = ({
   const visible = modalId ? modals.isVisible(modalId) : props.visible
 
   const ctxProps = modals?.state?.[modalId]?.props
-  const content = (
-    <_Modal {...props} {...ctxProps} visible={visible} toggle={() => {
+
+  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>
   )
@@ -67,3 +83,30 @@ export const Modal:React.FC<ManagedModalProps> = ({
   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

@@ -23,6 +23,7 @@ type TModalContext = {
   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
 }
 
@@ -127,6 +128,14 @@ export function Provider({ children }) {
     })
   }
 
+  function remove(id: string) {
+    const newModals = { ...modals }
+
+    delete newModals[id]
+
+    setModals(newModals)
+  }
+
   return <ModalContext.Provider value={{
     state: modals,
     toggleModal,
@@ -134,6 +143,7 @@ export function Provider({ children }) {
     currentModal,
     attach,
     isVisible,
+    remove,
     transition,
     transitionDuration: defaultDuration,
 

package/src/utils/ModalManager/index.ts

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

package/src/utils/OSAlert.ts

@@ -16,14 +16,14 @@ import { Alert, AlertButton } from 'react-native'
 
 type NativeAlertArgs = Parameters<typeof Alert.alert>
 
-type OSAlertArgs = {
+export type OSAlertArgs = {
   title: NativeAlertArgs['0']
   body?: NativeAlertArgs['1']
   options?: NativeAlertArgs['2']
 }
-type AlertEvent = AlertButton['onPress']
-type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
-type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
+export type AlertEvent = AlertButton['onPress']
+export type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
+export type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
 
 const currentAlerts = {
 
@@ -57,7 +57,7 @@ function ask({ title, body, options = null }: OSAlertArgs) {
   if (!title) {
     title = 'Quick quetion'
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options,
@@ -84,7 +84,7 @@ function warn(args: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>) {
   if (!onReject) {
     onReject = () => null
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options: [
@@ -120,7 +120,7 @@ function info(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
   if (!title) {
     title = 'FYI'
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options: [
@@ -151,7 +151,7 @@ function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
   if (!body) {
     body = 'Something went wrong'
   }
-  OSAlert({
+  _OSAlert({
     title,
     body,
     options: [
@@ -166,13 +166,13 @@ function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
   })
 }
 
-function OSAlert(params: OSAlertArgs) {
+function _OSAlert(params: OSAlertArgs) {
   Alert.alert(params.title, params.body, params.options, {
     cancelable: false,
   })
 }
 
-export default {
+export const OSAlert = {
   ask,
   warn,
   info,

package/src/utils/PermissionManager/context.tsx

@@ -127,11 +127,7 @@ export const usePermissions:UsePermissions<any> = () => {
 
           onOpen = () => new Promise((resolve) => {
             setTimeout(() => {
-              console.log('transition', {
-                prevModal,
-                permissionModalName,
 
-              })
               modalCtx.transition(prevModal, permissionModalName, {
                 props: {
                   onPermissionResolve: (status) => {
@@ -163,9 +159,7 @@ export const usePermissions:UsePermissions<any> = () => {
       }
     }
     if (prevModal) {
-      console.log(`Close prev modal`, {
-        prevModal,
-      })
+
       setTimeout(() => {
         modalCtx.toggleModal(prevModal, false, {})
       })

package/src/utils/hooks.ts

@@ -1,5 +1,5 @@
-import { onMount, onUpdate, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus } from 'react-native'
+import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig } from 'react-native'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -63,3 +63,83 @@ export function useStaticAnimationStyles<T extends Record<string|number|symbol,
     [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,
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+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'

package/src/utils/misc.ts

@@ -1,4 +1,4 @@
-import { MobileInputFile, parseFilePathData } from '@codeleap/common'
+import { MobileFile, MobileInputFile, parseFilePathData, FileWithPreview } from '@codeleap/common'
 
 export const stringToFile = (str: string): MobileInputFile => {
   if (!str) {
@@ -9,7 +9,7 @@ export const stringToFile = (str: string): MobileInputFile => {
   }
   const fileData = parseFilePathData(str)
 
-  const data: MobileInputFile['file'] = {
+  const data: MobileFile = {
     name: fileData.name,
     type: 'image/' + fileData.extension,
     size: 1000,
@@ -22,3 +22,62 @@ export const stringToFile = (str: string): MobileInputFile => {
     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
+}