@hanzogui/react-native-web-lite 2.0.0

package/src/InteractionManager/TaskQueue.tsx

@@ -0,0 +1,112 @@
+import { invariant } from '@hanzogui/react-native-web-internals'
+
+type SimpleTask = {
+  name: string
+  run: () => void
+}
+
+type PromiseTask = {
+  name: string
+  gen: () => Promise<void>
+}
+
+export type Task = SimpleTask | PromiseTask | (() => void)
+
+interface QueueItem {
+  tasks: Task[]
+  popable: boolean
+}
+
+export class TaskQueue {
+  private _queueStack: QueueItem[]
+  private _onMoreTasks: () => void
+
+  constructor({ onMoreTasks }: { onMoreTasks: () => void }) {
+    this._onMoreTasks = onMoreTasks
+    this._queueStack = [{ tasks: [], popable: true }]
+  }
+
+  enqueue(task: Task): void {
+    this._getCurrentQueue().push(task)
+  }
+
+  enqueueTasks(tasks: Task[]): void {
+    tasks.forEach((task) => this.enqueue(task))
+  }
+
+  cancelTasks(tasksToCancel: Task[]): void {
+    this._queueStack = this._queueStack
+      .map((queue) => ({
+        ...queue,
+        tasks: queue.tasks.filter((task) => !tasksToCancel.includes(task)),
+      }))
+      .filter((queue, idx) => queue.tasks.length > 0 || idx === 0)
+  }
+
+  hasTasksToProcess(): boolean {
+    return this._getCurrentQueue().length > 0
+  }
+
+  /**
+   * Executes the next task in the queue.
+   */
+  processNext(): void {
+    const queue = this._getCurrentQueue()
+    if (queue.length) {
+      const task = queue.shift()
+      try {
+        if (typeof task === 'object' && 'gen' in task) {
+          this._genPromise(task)
+        } else if (typeof task === 'object' && 'run' in task) {
+          task.run()
+        } else {
+          invariant(
+            typeof task === 'function',
+            'Expected Function, SimpleTask, or PromiseTask, but got:\n' +
+              JSON.stringify(task, null, 2)
+          )
+          ;(task as () => void)()
+        }
+      } catch (e) {
+        if (e instanceof Error) {
+          e.message =
+            'TaskQueue: Error with task ' + (task?.name || '') + ': ' + e.message
+        }
+        throw e
+      }
+    }
+  }
+
+  private _getCurrentQueue(): Task[] {
+    const stackIdx = this._queueStack.length - 1
+    const queue = this._queueStack[stackIdx]
+    if (queue.popable && queue.tasks.length === 0 && stackIdx > 0) {
+      this._queueStack.pop()
+      return this._getCurrentQueue()
+    } else {
+      return queue.tasks
+    }
+  }
+
+  private _genPromise(task: PromiseTask) {
+    const length = this._queueStack.push({ tasks: [], popable: false })
+    const stackIdx = length - 1
+    const stackItem = this._queueStack[stackIdx]
+    task
+      .gen()
+      .then(() => {
+        stackItem.popable = true
+        if (this.hasTasksToProcess()) {
+          this._onMoreTasks()
+        }
+      })
+      .catch((ex) => {
+        setTimeout(() => {
+          if (ex instanceof Error) {
+            ex.message = `TaskQueue: Error resolving Promise in task ${task.name}: ${ex.message}`
+          }
+          throw ex
+        }, 0)
+      })
+  }
+}

package/src/InteractionManager/index.tsx

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { invariant } from '@hanzogui/react-native-web-internals'
+import EventEmitter from '../vendor/react-native/emitter/_EventEmitter'
+import type { Task } from './TaskQueue'
+import { TaskQueue } from './TaskQueue'
+import { requestIdleCallback } from '../modules/requestIdleCallback'
+
+type EventSubscription = any
+
+const _emitter = new EventEmitter()
+
+const InteractionManager = {
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete',
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed.
+   */
+  runAfterInteractions(task?: Task): {
+    then: Function
+    done: Function
+    cancel: Function
+  } {
+    const tasks: Array<Task> = []
+    const promise = new Promise<void>((resolve) => {
+      _scheduleUpdate()
+      if (task) {
+        tasks.push(task)
+      }
+      tasks.push({
+        run: resolve,
+        name: 'resolve ' + ((task && task.name) || '?'),
+      })
+      _taskQueue.enqueueTasks(tasks)
+    })
+    return {
+      then: promise.then.bind(promise),
+      done: promise.then.bind(promise),
+      cancel: () => {
+        _taskQueue.cancelTasks(tasks)
+      },
+    }
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   */
+  createInteractionHandle(): number {
+    _scheduleUpdate()
+    const handle = ++_inc
+    _addInteractionSet.add(handle)
+    return handle
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   */
+  clearInteractionHandle(handle: number) {
+    invariant(!!handle, 'Must provide a handle to clear.')
+    _scheduleUpdate()
+    _addInteractionSet.delete(handle)
+    _deleteInteractionSet.add(handle)
+  },
+
+  addListener: _emitter.addListener.bind(_emitter) as (
+    ...args: Parameters<typeof _emitter.addListener>
+  ) => EventSubscription,
+
+  /**
+   *
+   * @param deadline
+   */
+  setDeadline(deadline: number) {
+    _deadline = deadline
+  },
+}
+
+const _interactionSet = new Set<number>()
+const _addInteractionSet = new Set<number>()
+const _deleteInteractionSet = new Set<number>()
+const _taskQueue = new TaskQueue({ onMoreTasks: _scheduleUpdate })
+let _nextUpdateHandle: number | ReturnType<typeof setTimeout> | null = null
+let _inc = 0
+let _deadline = -1
+
+/**
+ * Schedule an asynchronous update to the interaction state.
+ */
+function _scheduleUpdate() {
+  if (!_nextUpdateHandle) {
+    if (_deadline > 0) {
+      _nextUpdateHandle = setTimeout(_processUpdate)
+    } else {
+      _nextUpdateHandle = requestIdleCallback(_processUpdate)
+    }
+  }
+}
+
+/**
+ * Notify listeners, process queue, etc.
+ */
+function _processUpdate() {
+  _nextUpdateHandle = null
+  const interactionCount = _interactionSet.size
+  _addInteractionSet.forEach((handle) => _interactionSet.add(handle))
+  _deleteInteractionSet.forEach((handle) => _interactionSet.delete(handle))
+  const nextInteractionCount = _interactionSet.size
+
+  if (interactionCount !== 0 && nextInteractionCount === 0) {
+    _emitter.emit(InteractionManager.Events.interactionComplete)
+  } else if (interactionCount === 0 && nextInteractionCount !== 0) {
+    _emitter.emit(InteractionManager.Events.interactionStart)
+  }
+
+  if (nextInteractionCount === 0) {
+    // It seems that we can't know the running time of the current event loop,
+    // we can only calculate the running time of the current task queue.
+    const begin = Date.now()
+    while (_taskQueue.hasTasksToProcess()) {
+      _taskQueue.processNext()
+      if (_deadline > 0 && Date.now() - begin >= _deadline) {
+        _scheduleUpdate()
+        break
+      }
+    }
+  }
+  _addInteractionSet.clear()
+  _deleteInteractionSet.clear()
+}
+
+export { InteractionManager }

package/src/Keyboard/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { dismissKeyboard } from '@hanzogui/react-native-web-internals'
+
+export const Keyboard = {
+  addListener(): {
+    remove: () => void
+  } {
+    return { remove: () => {} }
+  },
+  dismiss() {
+    dismissKeyboard()
+  },
+  removeAllListeners() {},
+  removeListener() {},
+}

package/src/KeyboardAvoidingView/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react'
+
+import type { LayoutEvent, LayoutValue } from '../types'
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+type KeyboardAvoidingViewProps = ViewProps & {
+  behavior?: 'height' | 'padding' | 'position'
+  contentContainerStyle?: ViewProps['style']
+  keyboardVerticalOffset: number
+}
+
+export class KeyboardAvoidingView extends React.Component<KeyboardAvoidingViewProps> {
+  frame: LayoutValue | null = null
+
+  relativeKeyboardHeight(keyboardFrame: Record<string, any>): number {
+    const frame = this.frame
+    if (!frame || !keyboardFrame) {
+      return 0
+    }
+    const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset || 0)
+    return Math.max(frame.y + frame.height - keyboardY, 0)
+  }
+
+  onKeyboardChange(event: object) {}
+
+  onLayout: (event: LayoutEvent) => void = (event: LayoutEvent) => {
+    this.frame = event.nativeEvent.layout
+  }
+
+  render(): React.ReactNode {
+    const {
+      /* eslint-disable */
+      behavior,
+      contentContainerStyle,
+      keyboardVerticalOffset,
+      /* eslint-enable */
+      ...rest
+    } = this.props
+
+    return <View onLayout={this.onLayout} {...rest} />
+  }
+}
+
+export default KeyboardAvoidingView

package/src/Libraries/Pressability/Pressability.ts

@@ -0,0 +1,2 @@
+// shim for react-native/Libraries/Pressability/Pressability
+export default {} as any

package/src/Libraries/Pressability/usePressability.ts

@@ -0,0 +1,2 @@
+// shim for react-native/Libraries/Pressability/usePressability
+export default (config: any) => ({})

package/src/Linking/__tests__/index-test.tsx

@@ -0,0 +1,37 @@
+/* eslint-env jasmine, jest */
+
+import Linking from '..'
+
+describe('apis/Linking', () => {
+  describe('openURL', () => {
+    test('calls open with a url and target', (done) => {
+      jest.spyOn(window, 'open').mockImplementationOnce((url, target, opener) => {
+        expect(url).toBe('http://foo.com/')
+        expect(target).toBe('target_name')
+        expect(opener).toBe('noopener')
+        done()
+      })
+      Linking.openURL('http://foo.com', 'target_name')
+    })
+
+    test('defaults target to _blank if not provided', (done) => {
+      jest.spyOn(window, 'open').mockImplementationOnce((url, target, opener) => {
+        expect(url).toBe('http://foo.com/')
+        expect(target).toBe('_blank')
+        expect(opener).toBe('noopener')
+        done()
+      })
+      Linking.openURL('http://foo.com')
+    })
+
+    test('accepts undefined as a target', (done) => {
+      jest.spyOn(window, 'open').mockImplementationOnce((url, target, opener) => {
+        expect(url).toBe('http://foo.com/')
+        expect(target).toBe(undefined)
+        expect(opener).toBe('noopener')
+        done()
+      })
+      Linking.openURL('http://foo.com', undefined)
+    })
+  })
+})

package/src/Linking/index.tsx

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { canUseDOM, invariant } from '@hanzogui/react-native-web-internals'
+
+const initialURL = canUseDOM ? window.location.href : ''
+
+type Callback = (...args: any) => void
+
+type OnOpenCallback = (event: 'onOpen', callback: (url: string) => void) => void
+type GenericCallback = (event: string, callback: Callback) => void
+
+class Linking {
+  /**
+   * An object mapping of event name
+   * and all the callbacks subscribing to it
+   */
+  _eventCallbacks: { [key: string]: Array<Callback> } = {}
+
+  _dispatchEvent(event: string, ...data: any) {
+    const listeners = this._eventCallbacks[event]
+    if (listeners != null && Array.isArray(listeners)) {
+      listeners.map((listener) => {
+        listener(...data)
+      })
+    }
+  }
+
+  /**
+   * Adds a event listener for the specified event. The callback will be called when the
+   * said event is dispatched.
+   */
+  addEventListener: OnOpenCallback | GenericCallback = (
+    event: string,
+    callback: Callback
+  ) => {
+    if (!this._eventCallbacks[event]) {
+      this._eventCallbacks[event] = [callback]
+      return
+    }
+    this._eventCallbacks[event].push(callback)
+  }
+
+  /**
+   * Removes a previously added event listener for the specified event. The callback must
+   * be the same object as the one passed to `addEventListener`.
+   */
+  removeEventListener: OnOpenCallback | GenericCallback = (
+    event: string,
+    callback: Callback
+  ) => {
+    const callbacks = this._eventCallbacks[event]
+    const filteredCallbacks = callbacks.filter(
+      (c) => c.toString() !== callback.toString()
+    )
+    this._eventCallbacks[event] = filteredCallbacks
+  }
+
+  canOpenURL(): Promise<boolean> {
+    return Promise.resolve(true)
+  }
+
+  getInitialURL(): Promise<string> {
+    return Promise.resolve(initialURL)
+  }
+
+  /**
+   * Try to open the given url in a secure fashion. The method returns a Promise object.
+   * If a target is passed (including undefined) that target will be used, otherwise '_blank'.
+   * If the url opens, the promise is resolved. If not, the promise is rejected.
+   * Dispatches the `onOpen` event if `url` is opened successfully.
+   */
+  openURL(url: string, target?: string): Promise<object | void> {
+    if (arguments.length === 1) {
+      target = '_blank'
+    }
+    try {
+      open(url, target)
+      this._dispatchEvent('onOpen', url)
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  _validateURL(url: string) {
+    invariant(typeof url === 'string', 'Invalid URL: should be a string. Was: ' + url)
+    invariant(url, 'Invalid URL: cannot be empty')
+  }
+}
+
+const open = (url, target) => {
+  if (canUseDOM) {
+    // @ts-ignore
+    const urlToOpen = new URL(url, window.location).toString()
+    if (urlToOpen.indexOf('tel:') === 0) {
+      // @ts-ignore
+      window.location = urlToOpen
+    } else {
+      window.open(urlToOpen, target, 'noopener')
+    }
+  }
+}
+
+const LinkingInstance = new Linking()
+export { LinkingInstance as Linking }

package/src/LogBox/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2016-present, Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export const LogBox = {
+  ignoreLogs() {},
+  ignoreAllLogs() {},
+  uninstall() {},
+  install() {},
+}
+
+export default LogBox

package/src/Modal/ModalAnimation.js

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+import * as React from 'react'
+import { StyleSheet } from '@hanzogui/react-native-web-internals'
+
+import { createElement } from '../createElement/index'
+
+var ANIMATION_DURATION = 300
+
+function getAnimationStyle(animationType, visible) {
+  if (animationType === 'slide') {
+    return visible ? animatedSlideInStyles : animatedSlideOutStyles
+  }
+
+  if (animationType === 'fade') {
+    return visible ? animatedFadeInStyles : animatedFadeOutStyles
+  }
+
+  return visible ? styles.container : styles.hidden
+}
+
+export function ModalAnimation(props) {
+  var animationType = props.animationType,
+    children = props.children,
+    onDismiss = props.onDismiss,
+    onShow = props.onShow,
+    visible = props.visible
+
+  var _React$useState = React.useState(false),
+    isRendering = _React$useState[0],
+    setIsRendering = _React$useState[1]
+
+  var wasVisible = React.useRef(false)
+  var isAnimated = animationType && animationType !== 'none'
+  var animationEndCallback = React.useCallback(
+    (e) => {
+      if (e && e.currentTarget !== e.target) {
+        // If the event was generated for something NOT this element we
+        // should ignore it as it's not relevant to us
+        return
+      }
+
+      if (visible) {
+        if (onShow) {
+          onShow()
+        }
+      } else {
+        setIsRendering(false)
+
+        if (onDismiss) {
+          onDismiss()
+        }
+      }
+    },
+    [onDismiss, onShow, visible]
+  )
+  React.useEffect(() => {
+    if (visible) {
+      setIsRendering(true)
+    }
+
+    if (visible !== wasVisible.current && !isAnimated) {
+      // Manually call `animationEndCallback` if no animation is used
+      animationEndCallback()
+    }
+
+    wasVisible.current = visible
+  }, [isAnimated, visible, animationEndCallback])
+  return isRendering || visible
+    ? createElement('div', {
+        style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
+        onAnimationEnd: animationEndCallback,
+        children,
+      })
+    : null
+}
+
+var styles = StyleSheet.create({
+  container: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 9999,
+  },
+  animatedIn: {
+    animationDuration: ANIMATION_DURATION + 'ms',
+    animationTimingFunction: 'ease-in',
+  },
+  animatedOut: {
+    pointerEvents: 'none',
+    animationDuration: ANIMATION_DURATION + 'ms',
+    animationTimingFunction: 'ease-out',
+  },
+  fadeIn: {
+    opacity: 1,
+    animationKeyframes: {
+      '0%': {
+        opacity: 0,
+      },
+      '100%': {
+        opacity: 1,
+      },
+    },
+  },
+  fadeOut: {
+    opacity: 0,
+    animationKeyframes: {
+      '0%': {
+        opacity: 1,
+      },
+      '100%': {
+        opacity: 0,
+      },
+    },
+  },
+  slideIn: {
+    transform: [
+      {
+        translateY: '0%',
+      },
+    ],
+    animationKeyframes: {
+      '0%': {
+        transform: [
+          {
+            translateY: '100%',
+          },
+        ],
+      },
+      '100%': {
+        transform: [
+          {
+            translateY: '0%',
+          },
+        ],
+      },
+    },
+  },
+  slideOut: {
+    transform: [
+      {
+        translateY: '100%',
+      },
+    ],
+    animationKeyframes: {
+      '0%': {
+        transform: [
+          {
+            translateY: '0%',
+          },
+        ],
+      },
+      '100%': {
+        transform: [
+          {
+            translateY: '100%',
+          },
+        ],
+      },
+    },
+  },
+  hidden: {
+    opacity: 0,
+  },
+})
+var animatedSlideInStyles = [styles.container, styles.animatedIn, styles.slideIn]
+var animatedSlideOutStyles = [styles.container, styles.animatedOut, styles.slideOut]
+var animatedFadeInStyles = [styles.container, styles.animatedIn, styles.fadeIn]
+var animatedFadeOutStyles = [styles.container, styles.animatedOut, styles.fadeOut]