@codeleap/mobile 1.9.28 → 1.9.31

package/src/modules/index.d.ts

@@ -494,3 +494,189 @@ declare module 'react-native-image-crop-picker' {
 
     export default ImageCropPicker
 }
+
+import * as React from 'react'
+import {
+  ScrollViewProps,
+  FlatListProps,
+  SectionListProps,
+} from 'react-native'
+export namespace KeyboardAwareScrollViewTypes {
+    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
+      }
+
+      declare class ScrollableComponent<P, S> extends React.Component<P, S> {
+        getScrollResponder: () => void
+
+        scrollToPosition: (x: number, y: number, animated?: boolean) => void
+
+        scrollToEnd: (animated?: boolean) => void
+
+        scrollForExtraHeightOnAndroid: (extraHeight: number) => void
+
+        scrollToFocusedInput: (
+          reactNode: Object,
+          extraHeight?: number,
+          keyboardOpeningTime?: number
+        ) => void
+      }
+
+      export class KeyboardAwareMixin {}
+      export class KeyboardAwareScrollView extends ScrollableComponent<
+        KeyboardAwareScrollViewProps,
+        KeyboardAwareState
+      > {}
+      export class KeyboardAwareFlatList extends ScrollableComponent<
+        KeyboardAwareFlatListProps<any>,
+        KeyboardAwareState
+      > {}
+      export class KeyboardAwareSectionList extends ScrollableComponent<
+        KeyboardAwareSectionListProps<any>,
+        KeyboardAwareState
+      > {}
+
+}

package/src/utils/ModalManager/components.tsx

@@ -2,19 +2,21 @@ import * as React from 'react'
 import { usePrevious, onMount, onUpdate, PropsOf } from '@codeleap/common'
 import { useModalContext } from './context'
 import { Portal } from '@gorhom/portal'
-import { Modal } from '../../components/Modal'
+import { Modal as _Modal } from '../../components/Modal'
 
-type AbsoluteModalProps = Omit<PropsOf<typeof Modal>, 'visible' | 'toggle'> & {
+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']
+  toggle?: PropsOf<typeof _Modal>['toggle']
 }
 
-export const AbsoluteModal:React.FC<AbsoluteModalProps> = ({
+export const Modal:React.FC<ManagedModalProps> = ({
   children,
   id,
+  absolute = true,
   initialVisible = false,
   parent,
   ...props
@@ -43,16 +45,25 @@ export const AbsoluteModal:React.FC<AbsoluteModalProps> = ({
 
   const visible = modalId ? modals.isVisible(modalId) : props.visible
 
-  return <Portal>
-    <Modal {...props} visible={visible} toggle={() => {
+  const ctxProps = modals?.state?.[modalId]?.props
+  const content = (
+    <_Modal {...props} {...ctxProps} visible={visible} toggle={() => {
       if (modalId) {
         modals.toggleModal(modalId)
       } else {
-        props.toggle()
+        props?.toggle?.()
       }
     }}>
       {children}
-    </Modal>
-  </Portal>
+    </_Modal>
+  )
+
+  if (absolute) {
+    return <Portal>
+      {content}
+    </Portal>
+  }
+
+  return content
 }
 

package/src/utils/ModalManager/context.tsx

@@ -1,25 +1,29 @@
 import * as React from 'react'
-import { AnyFunction, useCodeleapContext, useState } from '@codeleap/common'
+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) => void
-    setModal: (name: string, to: Partial<TModalState>) => void
-    currentModal: string
+  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
+  attach: (modal: string, to: string) => void
+  transitionDuration: number
 }
 
 const ModalContext = React.createContext({} as TModalContext)
@@ -32,7 +36,7 @@ export function Provider({ children }) {
     return !!modals[name]?.visible
   }
 
-  const toggleModal:TModalContext['toggleModal'] = (name, set?: boolean) => {
+  const toggleModal:TModalContext['toggleModal'] = (name, set?: boolean, props?: any) => {
     const visible = isVisible(name)
 
     const newVisible = typeof set === 'boolean' ? set : !visible
@@ -44,6 +48,7 @@ export function Provider({ children }) {
         [name]: {
           ...current[name],
           visible: newVisible,
+          props,
         },
         ...Object.fromEntries(attached),
       }
@@ -64,30 +69,37 @@ export function Provider({ children }) {
   }
 
   const codeleapCtx = useCodeleapContext()
-
+  const defaultDuration = codeleapCtx?.Theme?.values?.transitions?.modal?.duration || 300
   const transition:TModalContext['transition'] = (from, to, options) => {
-    const _options:ModalTransitionOptions = {
-      duration: codeleapCtx?.Theme?.values?.modalTransitionDuration || 300,
-      ...options,
-    }
-
-    const toVisible = isVisible(to)
-    const fromVisible = isVisible(from)
-    if (toVisible) return
-    if (!fromVisible && !toVisible) {
-      toggleModal(to)
-      return
-    }
-
-    toggleModal(from)
     return new Promise((resolve) => {
       setTimeout(() => {
-        if (to) {
-          toggleModal(to)
+
+        if (!from) {
+          toggleModal(to, true, options?.props)
+          return
+        }
+        const _options:ModalTransitionOptions = {
+          duration: defaultDuration,
+          ...options,
         }
-        resolve()
-      }, _options.duration)
 
+        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)
+
+      })
     })
   }
 
@@ -123,6 +135,7 @@ export function Provider({ children }) {
     attach,
     isVisible,
     transition,
+    transitionDuration: defaultDuration,
 
   }}>
     <PortalProvider>
@@ -143,6 +156,7 @@ export type UseModalSequenceOptions = {
   closeLastOnFinish?: boolean
   waitForLastToCloseBeforeCallingFinish?: boolean
   transitionOpts?: Partial<Parameters<TModalContext['transition']>[2]>
+  autoOpen?: boolean
 }
 
 export function useModalSequence(ids: string[], options?: UseModalSequenceOptions) {
@@ -163,7 +177,16 @@ export function useModalSequence(ids: string[], options?: UseModalSequenceOption
     nextId: ids[idx + 1],
     previousId: ids[idx - 1],
   }
-  function next() {
+
+  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(() => {
@@ -181,16 +204,31 @@ export function useModalSequence(ids: string[], options?: UseModalSequenceOption
       return
     } else {
       if (!state.nextId) return
-      modals.transition(ids[idx], ids[idx + 1])
+      modals.transition(ids[idx], state.nextId, props)
       setIdx(i => i + 1)
     }
   }
-  function previous() {
+  function previous(props?: any) {
     if (!state.previousId) return
-    modals.transition(ids[idx], ids[idx - 1])
+
+    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)
   }
@@ -200,6 +238,7 @@ export function useModalSequence(ids: string[], options?: UseModalSequenceOption
     next,
     previous,
     setModal: setIdx,
+    goto,
     currentIdx: idx,
     ...state,
 

package/src/utils/ModalManager/index.ts

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