@codeleap/mobile 2.4.7 → 3.1.1

package/src/utils/KeyboardAware/lib/KeyboardAwareHOC.tsx

@@ -1,592 +0,0 @@
-/* eslint-disable max-lines */
-/* @flow */
-
-import React from 'react'
-
-import {
-  Keyboard,
-  Platform,
-  UIManager,
-  TextInput,
-  findNodeHandle,
-  Animated,
-  Dimensions,
-  KeyboardEventName,
-  EventSubscription,
-  KeyboardEventListener,
-  NativeSyntheticEvent,
-  ScrollView,
-} from 'react-native'
-import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
-export function isIphoneX() {
-  const dimen = Dimensions.get('window')
-  return (
-    Platform.OS === 'ios' &&
-      !Platform.isPad &&
-      !Platform.isTVOS &&
-      ((dimen.height === 780 || dimen.width === 780)
-        || (dimen.height === 812 || dimen.width === 812)
-        || (dimen.height === 844 || dimen.width === 844)
-        || (dimen.height === 896 || dimen.width === 896)
-        || (dimen.height === 926 || dimen.width === 926))
-  )
-}
-
-const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
-const _KAM_KEYBOARD_OPENING_TIME = 250
-const _KAM_EXTRA_HEIGHT = 75
-
-const supportedKeyboardEvents: KeyboardEventName[] = [
-  'keyboardWillShow',
-  'keyboardDidShow',
-  'keyboardWillHide',
-  'keyboardDidHide',
-  'keyboardWillChangeFrame',
-  'keyboardDidChangeFrame',
-]
-const keyboardEventToCallbackName = (eventName: string) => 'on' + eventName[0].toUpperCase() + eventName.substring(1)
-
-const keyboardAwareHOCTypeEvents = supportedKeyboardEvents.reduce(
-  (acc: Object, eventName: string) => ({
-    ...acc,
-    [keyboardEventToCallbackName(eventName)]: Function,
-  }),
-  {},
-)
-
-export type KeyboardAwareHOCProps = {
-  viewIsInsideTabBar?: boolean
-  resetScrollToCoords?: {
-    x: number
-    y: number
-  }
-  enableResetScrollToCoords?: boolean
-  enableAutomaticScroll?: boolean
-  extraHeight?: number
-  extraScrollHeight?: number
-  keyboardOpeningTime?: number
-  onScroll?: Function
-  update?: Function
-  contentContainerStyle?: any
-  enableOnAndroid?: boolean
-  Scrollable: any
-  innerRef?: Function
-  hocOptions?: any
-} & typeof keyboardAwareHOCTypeEvents
-export type KeyboardAwareHOCState = {
-  keyboardSpace: number
-}
-
-export type ElementLayout = {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export type ContentOffset = {
-  x: number
-  y: number
-}
-
-export type ScrollPosition = {
-  x: number
-  y: number
-  animated: boolean
-}
-
-export type ScrollIntoViewOptions = {
-  getScrollPosition?: (
-    parentLayout: ElementLayout,
-    childLayout: ElementLayout,
-    contentOffset: ContentOffset
-  ) => ScrollPosition
-}
-
-export type KeyboardAwareHOCOptions = {
-  enableOnAndroid: boolean
-  contentContainerStyle?: Object
-  enableAutomaticScroll: boolean
-  extraHeight: number
-  extraScrollHeight: number
-  enableResetScrollToCoords: boolean
-  keyboardOpeningTime: number
-  viewIsInsideTabBar: boolean
-  refPropName: string
-  extractNativeRef: Function
-}
-
-function getDisplayName(WrappedComponent: React.ComponentClass) {
-  return (
-    (WrappedComponent &&
-      (WrappedComponent.displayName || WrappedComponent.name)) ||
-    'Component'
-  )
-}
-
-const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = {
-  enableOnAndroid: false,
-  contentContainerStyle: undefined,
-  enableAutomaticScroll: true,
-  extraHeight: _KAM_EXTRA_HEIGHT,
-  extraScrollHeight: 0,
-  enableResetScrollToCoords: true,
-  keyboardOpeningTime: _KAM_KEYBOARD_OPENING_TIME,
-  viewIsInsideTabBar: false,
-
-  // The ref prop name that will be passed to the wrapped component to obtain a ref
-  // If your ScrollView is already wrapped, maybe the wrapper permit to get a ref
-  // For example, with glamorous-native ScrollView, you should use "innerRef"
-  refPropName: 'ref',
-  // Sometimes the ref you get is a ref to a wrapped view (ex: Animated.ScrollView)
-  // We need access to the imperative API of a real native ScrollView so we need extraction logic
-  extractNativeRef: (ref: any) => {
-    // getNode() permit to support Animated.ScrollView automatically, but is deprecated since RN 0.62
-    // see https://github.com/facebook/react-native/issues/19650
-    // see https://stackoverflow.com/questions/42051368/scrollto-is-undefined-on-animated-scrollview/48786374
-    // see https://github.com/facebook/react-native/commit/66e72bb4e00aafbcb9f450ed5db261d98f99f82a
-    const shouldCallGetNode = !Platform.constants || (Platform.constants.reactNativeVersion.major === 0 && Platform.constants.reactNativeVersion.minor < 62)
-    if (ref.getNode && shouldCallGetNode) {
-      return ref.getNode()
-    } else {
-      return ref
-    }
-  },
-}
-
-class KeyboardAwareScrollable extends React.Component<KeyboardAwareHOCProps, KeyboardAwareHOCState> implements KeyboardAwareInterface {
-    _rnkasv_keyboardView: any
-
-    keyboardWillShowEvent: EventSubscription
-
-    keyboardWillHideEvent: EventSubscription
-
-    position: ContentOffset
-
-    defaultResetScrollToCoords?: { x: number; y: number }
-
-    mountedComponent: boolean
-
-    handleOnScroll: Function
-
-    callbacks: Record<string, EventSubscription>
-
-    state: KeyboardAwareHOCState
-
-    static displayName = `KeyboardAware`
-
-
-
-    // HOC options are used to init default props, so that these options can be overriden with component props
-    static defaultProps = {
-      enableAutomaticScroll: ScrollIntoViewDefaultOptions.enableAutomaticScroll,
-      extraHeight: ScrollIntoViewDefaultOptions.extraHeight,
-      extraScrollHeight: ScrollIntoViewDefaultOptions.extraScrollHeight,
-      enableResetScrollToCoords: ScrollIntoViewDefaultOptions.enableResetScrollToCoords,
-      keyboardOpeningTime: ScrollIntoViewDefaultOptions.keyboardOpeningTime,
-      viewIsInsideTabBar: ScrollIntoViewDefaultOptions.viewIsInsideTabBar,
-      enableOnAndroid: ScrollIntoViewDefaultOptions.enableOnAndroid,
-    }
-
-    constructor(props: KeyboardAwareHOCProps) {
-      super(props)
-      this.keyboardWillShowEvent = undefined
-      this.keyboardWillHideEvent = undefined
-      this.callbacks = {}
-      this.position = { x: 0, y: 0 }
-      this.defaultResetScrollToCoords = null
-      const keyboardSpace: number = props.viewIsInsideTabBar
-        ? _KAM_DEFAULT_TAB_BAR_HEIGHT
-        : 0
-      this.state = { keyboardSpace }
-    }
-
-    componentDidMount() {
-      this.mountedComponent = true
-      // Keyboard events
-      if (Platform.OS === 'ios') {
-        this.keyboardWillShowEvent = Keyboard.addListener(
-          'keyboardWillShow',
-          this._updateKeyboardSpace,
-        )
-        this.keyboardWillHideEvent = Keyboard.addListener(
-          'keyboardWillHide',
-          this._resetKeyboardSpace,
-        )
-      } else if (Platform.OS === 'android' && this.props.enableOnAndroid) {
-        this.keyboardWillShowEvent = Keyboard.addListener(
-          'keyboardDidShow',
-          this._updateKeyboardSpace,
-        )
-        this.keyboardWillHideEvent = Keyboard.addListener(
-          'keyboardDidHide',
-          this._resetKeyboardSpace,
-        )
-      }
-
-      supportedKeyboardEvents.forEach((eventName) => {
-        const callbackName = keyboardEventToCallbackName(eventName)
-        if (this.props[callbackName]) {
-          this.callbacks[eventName] = Keyboard.addListener(
-            eventName,
-            this.props[callbackName],
-          )
-        }
-      })
-    }
-
-    componentDidUpdate(prevProps: KeyboardAwareHOCProps) {
-      if (this.props.viewIsInsideTabBar !== prevProps.viewIsInsideTabBar) {
-        const keyboardSpace: number = this.props.viewIsInsideTabBar
-          ? _KAM_DEFAULT_TAB_BAR_HEIGHT
-          : 0
-        if (this.state.keyboardSpace !== keyboardSpace) {
-          this.setState({ keyboardSpace })
-        }
-      }
-    }
-
-    componentWillUnmount() {
-      this.mountedComponent = false
-      this.keyboardWillShowEvent && this.keyboardWillShowEvent.remove()
-      this.keyboardWillHideEvent && this.keyboardWillHideEvent.remove()
-      Object.values(this.callbacks).forEach((callback) => callback.remove(),
-      )
-    }
-
-    getScrollResponder = () => {
-      return (
-        this._rnkasv_keyboardView &&
-        this._rnkasv_keyboardView.getScrollResponder &&
-        this._rnkasv_keyboardView.getScrollResponder()
-      )
-    }
-
-    scrollToPosition = (x: number, y: number, animated = true) => {
-      const responder = this.getScrollResponder()
-      if (!responder) {
-        return
-      }
-      if (responder.scrollResponderScrollTo) {
-        // React Native < 0.65
-        responder.scrollResponderScrollTo({ x, y, animated })
-      } else if (responder.scrollTo) {
-        // React Native >= 0.65
-        responder.scrollTo({ x, y, animated })
-      }
-    }
-
-    scrollToEnd = (animated = true) => {
-      const responder = this.getScrollResponder()
-      if (!responder) {
-        return
-      }
-      if (responder.scrollResponderScrollToEnd) {
-        // React Native < 0.65
-        responder.scrollResponderScrollToEnd({ animated })
-      } else if (responder.scrollToEnd) {
-        // React Native >= 0.65
-        responder.scrollToEnd({ animated })
-      }
-    }
-
-    scrollForExtraHeightOnAndroid = (extraHeight: number) => {
-      this.scrollToPosition(0, this.position.y + extraHeight, true)
-    }
-
-    /**
-     * @param keyboardOpeningTime: takes a different keyboardOpeningTime in consideration.
-     * @param extraHeight: takes an extra height in consideration.
-     */
-    scrollToFocusedInput = (
-      reactNode: any,
-      extraHeight?: number,
-      keyboardOpeningTime?: number,
-    ) => {
-      if (extraHeight === undefined) {
-        extraHeight = this.props.extraHeight || 0
-      }
-      if (keyboardOpeningTime === undefined) {
-        keyboardOpeningTime = this.props.keyboardOpeningTime || 0
-      }
-      setTimeout(() => {
-        if (!this.mountedComponent) {
-          return
-        }
-        const responder = this.getScrollResponder()
-        responder &&
-          responder.scrollResponderScrollNativeHandleToKeyboard(
-            reactNode,
-            extraHeight,
-            true,
-          )
-      }, keyboardOpeningTime)
-    }
-
-    scrollIntoView = async (
-      element: React.ComponentClass,
-      options: ScrollIntoViewOptions = {},
-    ) => {
-      if (!this._rnkasv_keyboardView || !element) {
-        return
-      }
-
-      const [parentLayout, childLayout] = await Promise.all([
-        this._measureElement(this._rnkasv_keyboardView),
-        this._measureElement(element),
-      ])
-
-      const getScrollPosition =
-        options.getScrollPosition || this._defaultGetScrollPosition
-      const { x, y, animated } = getScrollPosition(
-        parentLayout,
-        childLayout,
-        this.position,
-      )
-      this.scrollToPosition(x, y, animated)
-    }
-
-    _defaultGetScrollPosition = (
-      parentLayout: ElementLayout,
-      childLayout: ElementLayout,
-      contentOffset: ContentOffset,
-    ): ScrollPosition => {
-      return {
-        x: 0,
-        y: Math.max(0, childLayout.y - parentLayout.y + contentOffset.y),
-        animated: true,
-      }
-    }
-
-    _measureElement = (element: React.ComponentClass): Promise<ElementLayout> => {
-      const node = findNodeHandle(element)
-
-      return new Promise((resolve: (el: ElementLayout) => void) => {
-        UIManager.measureInWindow(
-          node,
-          (x: number, y: number, width: number, height: number) => {
-            resolve({ x, y, width, height })
-          },
-        )
-      })
-    }
-
-    // Keyboard actions
-    _updateKeyboardSpace = (frames: Parameters<KeyboardEventListener>['0']) => {
-      // Automatically scroll to focused TextInput
-      if (this.props.enableAutomaticScroll) {
-        let keyboardSpace: number =
-          frames.endCoordinates.height + this.props.extraScrollHeight
-        if (this.props.viewIsInsideTabBar) {
-          keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT
-        }
-        this.setState({ keyboardSpace })
-        const currentlyFocusedField = TextInput.State.currentlyFocusedInput ?
-          findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField()
-        const responder = this.getScrollResponder()
-        if (!currentlyFocusedField || !responder) {
-          return
-        }
-        // @ts-ignore
-        UIManager.viewIsDescendantOf(
-          currentlyFocusedField,
-          responder.getInnerViewNode(),
-          (isAncestor: boolean) => {
-            if (isAncestor) {
-              // Check if the TextInput will be hidden by the keyboard
-              UIManager.measureInWindow(
-                currentlyFocusedField,
-                (x: number, y: number, width: number, height: number) => {
-                  const textInputBottomPosition = y + height
-                  const keyboardPosition = frames.endCoordinates.screenY
-                  const totalExtraHeight =
-                    this.props.extraScrollHeight + this.props.extraHeight
-                  if (Platform.OS === 'ios') {
-                    if (
-                      textInputBottomPosition >
-                      keyboardPosition - totalExtraHeight
-                    ) {
-                      this._scrollToFocusedInputWithNodeHandle(
-                        currentlyFocusedField,
-                      )
-                    }
-                  } else {
-                    // On android, the system would scroll the text input just
-                    // above the keyboard so we just neet to scroll the extra
-                    // height part
-                    if (textInputBottomPosition > keyboardPosition) {
-                      // Since the system already scrolled the whole view up
-                      // we should reduce that amount
-                      keyboardSpace =
-                        keyboardSpace -
-                        (textInputBottomPosition - keyboardPosition)
-                      this.setState({ keyboardSpace })
-                      this.scrollForExtraHeightOnAndroid(totalExtraHeight)
-                    } else if (
-                      textInputBottomPosition >
-                      keyboardPosition - totalExtraHeight
-                    ) {
-                      this.scrollForExtraHeightOnAndroid(
-                        totalExtraHeight -
-                          (keyboardPosition - textInputBottomPosition),
-                      )
-                    }
-                  }
-                },
-              )
-            }
-          },
-        )
-      }
-      if (!this.props.resetScrollToCoords) {
-        if (!this.defaultResetScrollToCoords) {
-          this.defaultResetScrollToCoords = this.position
-        }
-      }
-    }
-
-    _resetKeyboardSpace = () => {
-      const keyboardSpace: number = this.props.viewIsInsideTabBar
-        ? _KAM_DEFAULT_TAB_BAR_HEIGHT
-        : 0
-      this.setState({ keyboardSpace })
-      // Reset scroll position after keyboard dismissal
-      if (this.props.enableResetScrollToCoords === false) {
-        this.defaultResetScrollToCoords = null
-        return
-      } else if (this.props.resetScrollToCoords) {
-        this.scrollToPosition(
-          this.props.resetScrollToCoords.x,
-          this.props.resetScrollToCoords.y,
-          true,
-        )
-      } else {
-        if (this.defaultResetScrollToCoords) {
-          this.scrollToPosition(
-            this.defaultResetScrollToCoords.x,
-            this.defaultResetScrollToCoords.y,
-            true,
-          )
-          this.defaultResetScrollToCoords = null
-        } else {
-          this.scrollToPosition(0, 0, true)
-        }
-      }
-    }
-
-    _scrollToFocusedInputWithNodeHandle = (
-      nodeID: number,
-      extraHeight?: number,
-      keyboardOpeningTime?: number,
-    ) => {
-      if (extraHeight === undefined) {
-        extraHeight = this.props.extraHeight
-      }
-      const reactNode = findNodeHandle(nodeID)
-      this.scrollToFocusedInput(
-        reactNode,
-        extraHeight + this.props.extraScrollHeight,
-        keyboardOpeningTime !== undefined
-          ? keyboardOpeningTime
-          : this.props.keyboardOpeningTime || 0,
-      )
-    }
-
-    _handleOnScroll = (
-      e: NativeSyntheticEvent<any> & { nativeEvent: { contentOffset: number } },
-    ) => {
-      this.position = e.nativeEvent.contentOffset
-    }
-
-    _handleRef = (ref: React.ComponentClass<any>) => {
-      this._rnkasv_keyboardView = ref ? this.props.hocOptions.extractNativeRef(ref) : ref
-      if (this.props.innerRef) {
-        this.props.innerRef(this._rnkasv_keyboardView)
-      }
-    }
-
-    update = () => {
-      const currentlyFocusedField = TextInput.State.currentlyFocusedInput ?
-        findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField()
-      const responder = this.getScrollResponder()
-
-      if (!currentlyFocusedField || !responder) {
-        return
-      }
-
-      this._scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
-    }
-
-    render() {
-      const { enableOnAndroid, contentContainerStyle, onScroll, Scrollable } = this.props
-      let newContentContainerStyle
-      if (Platform.OS === 'android' && enableOnAndroid) {
-        newContentContainerStyle = [].concat(contentContainerStyle).concat({
-          paddingBottom:
-            ((contentContainerStyle || {}).paddingBottom || 0) +
-            this.state.keyboardSpace,
-        })
-      }
-      const refProps = { [this.props.hocOptions.refPropName]: this._handleRef }
-      return (
-        <Scrollable
-          {...refProps}
-          keyboardDismissMode='interactive'
-          contentInset={{ bottom: this.state.keyboardSpace }}
-          automaticallyAdjustContentInsets={false}
-          showsVerticalScrollIndicator={true}
-          scrollEventThrottle={1}
-          {...this.props}
-          contentContainerStyle={
-            newContentContainerStyle || contentContainerStyle
-          }
-          keyboardSpace={this.state.keyboardSpace}
-          getScrollResponder={this.getScrollResponder}
-          scrollToPosition={this.scrollToPosition}
-          scrollToEnd={this.scrollToEnd}
-          scrollForExtraHeightOnAndroid={this.scrollForExtraHeightOnAndroid}
-          scrollToFocusedInput={this.scrollToFocusedInput}
-          scrollIntoView={this.scrollIntoView}
-          resetKeyboardSpace={this._resetKeyboardSpace}
-          handleOnScroll={this._handleOnScroll}
-          update={this.update}
-          // @ts-ignore
-          onScroll={Animated.forkEvent(onScroll, this._handleOnScroll)}
-        />
-      )
-    }
-}
-
-function KeyboardAwareHOC(
-  ScrollableComponent: React.ComponentClass<any>,
-  userOptions = ScrollIntoViewDefaultOptions,
-) {
-
-  const hocOptions: KeyboardAwareHOCOptions = {
-    ...ScrollIntoViewDefaultOptions,
-    ...userOptions,
-  }
-
-  return React.forwardRef((props, ref) => <KeyboardAwareScrollable
-    hocOptions={hocOptions}
-    // @ts-ignore
-    ref={ref}
-    Scrollable={ScrollableComponent}
-    {...props}
-  />)
-}
-
-// Allow to pass options, without breaking change, and curried for composition
-// listenToKeyboardEvents(ScrollView);
-// listenToKeyboardEvents(options)(Comp);
-const listenToKeyboardEvents = <C extends React.ComponentType | React.ComponentClass>(configOrComp: C) => {
-  //@ts-ignore
-  if (typeof configOrComp === 'object' && !configOrComp.displayName) {
-    return ((Comp: Function) => KeyboardAwareHOC(Comp as React.ComponentClass, configOrComp)) as unknown as C
-  } else {
-    //@ts-ignore
-    return KeyboardAwareHOC(configOrComp) as C
-  }
-}
-
-export default listenToKeyboardEvents

package/src/utils/KeyboardAware/lib/KeyboardAwareInterface.ts

@@ -1,13 +0,0 @@
-/* @flow */
-
-export interface KeyboardAwareInterface {
-  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
-}

package/src/utils/KeyboardAware/lib/KeyboardAwareScrollView.ts

@@ -1,6 +0,0 @@
-/* @flow */
-
-import { ScrollView } from 'react-native'
-import listenToKeyboardEvents from './KeyboardAwareHOC'
-
-export default listenToKeyboardEvents(ScrollView)

package/src/utils/KeyboardAware/lib/KeyboardAwareSectionList.ts

@@ -1,6 +0,0 @@
-/* @flow */
-
-import { SectionList } from 'react-native'
-import listenToKeyboardEvents from './KeyboardAwareHOC'
-
-export default listenToKeyboardEvents(SectionList)