@hanzogui/react-native-web-lite 2.0.0-rc.41-hanzoai.5

package/src/AppState/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+import { canUseDOM, invariant } from '@hanzogui/react-native-web-internals'
+
+// Android 4.4 browser
+const isPrefixed =
+  // eslint-disable-next-line no-prototype-builtins
+  canUseDOM &&
+  !document.hasOwnProperty('hidden') &&
+  document.hasOwnProperty('webkitHidden')
+
+const EVENT_TYPES = ['change', 'memoryWarning']
+const VISIBILITY_CHANGE_EVENT = isPrefixed ? 'webkitvisibilitychange' : 'visibilitychange'
+const VISIBILITY_STATE_PROPERTY = isPrefixed ? 'webkitVisibilityState' : 'visibilityState'
+
+const AppStates = {
+  BACKGROUND: 'background',
+  ACTIVE: 'active',
+}
+
+class EventEmitter {
+  listeners = {}
+
+  addListener(type: string, handler: Function) {
+    this.listeners[type] ??= new Set()
+    this.listeners[type].add(handler)
+  }
+
+  emit(type: string, state: any) {
+    this.listeners[type]?.forEach((cb) => cb(state))
+  }
+
+  removeListener(type: string, handler: Function) {
+    this.listeners[type]?.delete(handler)
+  }
+}
+
+let hasBoundVisibilityChangeEvent = false
+
+const changeEmitter = new EventEmitter()
+
+export class AppState {
+  static isAvailable = canUseDOM && document[VISIBILITY_STATE_PROPERTY]
+
+  static get currentState() {
+    if (!AppState.isAvailable) {
+      return AppStates.ACTIVE
+    }
+
+    switch (document[VISIBILITY_STATE_PROPERTY]) {
+      case 'hidden':
+      case 'prerender':
+      case 'unloaded':
+        return AppStates.BACKGROUND
+      default:
+        return AppStates.ACTIVE
+    }
+  }
+
+  static addEventListener(type: string, handler: Function) {
+    if (AppState.isAvailable) {
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      )
+      if (type === 'change') {
+        if (!hasBoundVisibilityChangeEvent) {
+          hasBoundVisibilityChangeEvent = true
+          document.addEventListener(
+            VISIBILITY_CHANGE_EVENT,
+            () => {
+              if (changeEmitter) {
+                changeEmitter.emit('change', AppState.currentState)
+              }
+            },
+            false
+          )
+        }
+        return changeEmitter.addListener(type, handler)
+      }
+    }
+  }
+}

package/src/Appearance/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 } from '@hanzogui/react-native-web-internals'
+
+export type ColorSchemeName = 'light' | 'dark'
+
+export type AppearancePreferences = {
+  colorScheme: ColorSchemeName
+}
+
+type AppearanceListener = (preferences: AppearancePreferences) => void
+type DOMAppearanceListener = (ev: MediaQueryListEvent) => any
+
+function getQuery(): MediaQueryList | null {
+  return canUseDOM && window.matchMedia != null
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null
+}
+
+const query = getQuery()
+const listenerMapping = new WeakMap<AppearanceListener, DOMAppearanceListener>()
+
+export const Appearance = {
+  getColorScheme(): ColorSchemeName {
+    return query && query.matches ? 'dark' : 'light'
+  },
+
+  addChangeListener(listener: AppearanceListener): {
+    remove: () => void
+  } {
+    let mappedListener = listenerMapping.get(listener)
+    if (!mappedListener) {
+      mappedListener = ({ matches }: MediaQueryListEvent) => {
+        listener({ colorScheme: matches ? 'dark' : 'light' })
+      }
+      listenerMapping.set(listener, mappedListener)
+    }
+    if (query) {
+      query.addListener(mappedListener)
+    }
+
+    function remove(): void {
+      const mappedListener = listenerMapping.get(listener)
+      if (query && mappedListener) {
+        query.removeListener(mappedListener)
+      }
+      listenerMapping.delete(listener)
+    }
+
+    return { remove }
+  },
+}

package/src/BackHandler/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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
+ */
+
+function emptyFunction() {}
+
+export const BackHandler = {
+  exitApp: emptyFunction,
+  addEventListener(): {
+    remove: () => void
+  } {
+    return {
+      remove: emptyFunction,
+    }
+  },
+  removeEventListener: emptyFunction,
+}

package/src/Clipboard/index.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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
+ */
+
+let clipboardAvailable
+
+export class Clipboard {
+  static isAvailable(): boolean {
+    if (clipboardAvailable === undefined) {
+      clipboardAvailable =
+        typeof document.queryCommandSupported === 'function' &&
+        document.queryCommandSupported('copy')
+    }
+    return clipboardAvailable
+  }
+
+  static getString(): Promise<string> {
+    return Promise.resolve('')
+  }
+
+  static setString(text: string): boolean {
+    let success = false
+    const body = document.body
+
+    if (body) {
+      // add the text to a hidden node
+      const node = document.createElement('span')
+      node.textContent = text
+      node.style.opacity = '0'
+      node.style.position = 'absolute'
+      node.style.whiteSpace = 'pre-wrap'
+      node.style.userSelect = 'auto'
+      body.appendChild(node)
+
+      // select the text
+      const selection = window.getSelection() as any
+      selection.removeAllRanges()
+      const range = document.createRange()
+      range.selectNodeContents(node)
+      selection.addRange(range)
+
+      // attempt to copy
+      try {
+        document.execCommand('copy')
+        success = true
+      } catch (e) {}
+
+      // remove selection and node
+      selection.removeAllRanges()
+      body.removeChild(node)
+    }
+
+    return success
+  }
+}

package/src/DeviceEmitter.ts

@@ -0,0 +1,3 @@
+import { EventEmitter } from './vendor/react-native/emitter/_EventEmitter'
+
+export const DeviceEmitter = new EventEmitter()

package/src/DeviceInfo/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 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
+ */
+
+import { canUseDOM } from '@hanzogui/react-native-web-internals'
+
+import type { DisplayMetrics } from '../Dimensions/index'
+import { Dimensions } from '../Dimensions/index'
+
+export const DeviceInfo = {
+  Dimensions: {
+    get windowPhysicalPixels(): DisplayMetrics {
+      const { width, height, fontScale, scale } = Dimensions.get('window')
+      return {
+        width: width * scale,
+        height: height * scale,
+        scale,
+        fontScale,
+      }
+    },
+    get screenPhysicalPixels(): DisplayMetrics {
+      const { width, height, fontScale, scale } = Dimensions.get('screen')
+      return {
+        width: width * scale,
+        height: height * scale,
+        scale,
+        fontScale,
+      }
+    },
+  },
+
+  get locale(): string | void {
+    if (canUseDOM) {
+      if (navigator.languages) {
+        return navigator.languages[0]
+      } else {
+        return navigator.language
+      }
+    }
+  },
+
+  get totalMemory(): number | void {
+    // @ts-ignore
+    return canUseDOM ? navigator.deviceMemory : undefined
+  },
+
+  get userAgent(): string {
+    return canUseDOM ? navigator.userAgent : ''
+  },
+}

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Dimensions from '..'
+
+describe('apis/Dimensions/index.js', () => {
+  test('get', () => {
+    expect(Dimensions.get('screen')).toMatchInlineSnapshot(`
+      {
+        "fontScale": 1,
+        "height": 0,
+        "scale": 1,
+        "width": 0,
+      }
+    `)
+    expect(Dimensions.get('window')).toMatchInlineSnapshot(`
+      {
+        "fontScale": 1,
+        "height": 768,
+        "scale": 1,
+        "width": 1024,
+      }
+    `)
+  })
+
+  test('set', () => {
+    expect(() => Dimensions.set({})).toThrow()
+  })
+
+  test('addEventListener', () => {
+    const handler = jest.fn()
+    const subscription = Dimensions.addEventListener('change', handler)
+    Dimensions._update()
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(handler).toHaveBeenLastCalledWith({
+      window: Dimensions.get('window'),
+      screen: Dimensions.get('screen'),
+    })
+    subscription.remove()
+    Dimensions._update()
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  test('removeEventListener', () => {
+    const handler = jest.fn()
+    Dimensions.removeEventListener('change', handler)
+    Dimensions._update()
+    expect(handler).toHaveBeenCalledTimes(0)
+  })
+})

package/src/Dimensions/index.tsx

@@ -0,0 +1,129 @@
+/**
+ * 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'
+
+export type DisplayMetrics = {
+  fontScale: number
+  height: number
+  scale: number
+  width: number
+}
+
+type DimensionsValue = {
+  window: DisplayMetrics
+  screen: DisplayMetrics
+}
+
+type DimensionKey = 'window' | 'screen'
+type DimensionEventListenerType = 'change'
+
+const dimensions = {
+  window: {
+    fontScale: 1,
+    height: 0,
+    scale: 1,
+    width: 0,
+  },
+  screen: {
+    fontScale: 1,
+    height: 0,
+    scale: 1,
+    width: 0,
+  },
+}
+const listeners = {}
+
+let shouldInit = canUseDOM
+
+function update() {
+  if (!canUseDOM) {
+    return
+  }
+
+  const win = window
+  const docEl = win.document.documentElement
+
+  dimensions.window = {
+    fontScale: 1,
+    height: docEl.clientHeight,
+    scale: win.devicePixelRatio || 1,
+    width: docEl.clientWidth,
+  }
+
+  dimensions.screen = {
+    fontScale: 1,
+    height: win.screen.height,
+    scale: win.devicePixelRatio || 1,
+    width: win.screen.width,
+  }
+}
+
+function handleResize() {
+  update()
+  if (Array.isArray(listeners['change'])) {
+    listeners['change'].forEach((handler) => handler(dimensions))
+  }
+}
+
+export class Dimensions {
+  static get(dimension: DimensionKey): DisplayMetrics {
+    if (shouldInit) {
+      shouldInit = false
+      update()
+    }
+    invariant(dimensions[dimension], `No dimension set for key ${dimension}`)
+    return dimensions[dimension]
+  }
+
+  static set(initialDimensions: DimensionsValue | null): void {
+    if (initialDimensions) {
+      if (canUseDOM) {
+        invariant(false, 'Dimensions cannot be set in the browser')
+      } else {
+        if (initialDimensions.screen != null) {
+          dimensions.screen = initialDimensions.screen
+        }
+        if (initialDimensions.window != null) {
+          dimensions.window = initialDimensions.window
+        }
+      }
+    }
+  }
+
+  static addEventListener(
+    type: DimensionEventListenerType,
+    handler: (dimensionsValue: DimensionsValue) => void
+  ) {
+    listeners[type] = listeners[type] || []
+    listeners[type].push(handler)
+
+    return {
+      remove: () => {
+        this.removeEventListener(type, handler)
+      },
+    }
+  }
+
+  static removeEventListener(
+    type: DimensionEventListenerType,
+    handler: (dimensionsValue: DimensionsValue) => void
+  ): void {
+    if (Array.isArray(listeners[type])) {
+      listeners[type] = listeners[type].filter((_handler) => _handler !== handler)
+    }
+  }
+}
+
+if (canUseDOM) {
+  window.addEventListener('resize', handleResize, false)
+}
+
+export default Dimensions