@hanzogui/react-native-web-internals 2.0.0

package/src/modules/getBoundingClientRect/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * 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 strict
+ */
+
+export const getBoundingClientRect = (node: HTMLElement | null): void | ClientRect => {
+  if (node != null) {
+    const isElement = node.nodeType === 1 /* Node.ELEMENT_NODE */
+    if (isElement && typeof node.getBoundingClientRect === 'function') {
+      return node.getBoundingClientRect()
+    }
+  }
+}

package/src/modules/invariant.ts

@@ -0,0 +1,23 @@
+export function invariant(condition: any, log: string, ...logVars: string[]) {
+  if (!condition) {
+    throw new Error(
+      process.env.NODE_ENV === 'development'
+        ? log
+            .split('%s')
+            .flatMap((chunk, i) => [chunk, logVars[i]])
+            .join('')
+        : log
+    )
+  }
+}
+
+export function warning(condition: any, log: string, ...logVars: string[]) {
+  if (process.env.NODE_ENV === 'development') {
+    try {
+      invariant(condition, log, ...logVars)
+    } catch (err) {
+      console.warn(err)
+      // allow to pass through
+    }
+  }
+}

package/src/modules/isSelectionValid/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+export function isSelectionValid(): boolean {
+  const selection = window.getSelection()
+  if (!selection) return false
+  const string = selection.toString()
+  const anchorNode = selection.anchorNode
+  const focusNode = selection.focusNode
+  const isTextNode =
+    (anchorNode && anchorNode.nodeType === window.Node.TEXT_NODE) ||
+    (focusNode && focusNode.nodeType === window.Node.TEXT_NODE)
+  return string.length >= 1 && string !== '\n' && !!isTextNode
+}

package/src/modules/isWebColor/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+
+export const isWebColor = (color: string): boolean =>
+  color === 'currentcolor' ||
+  color === 'currentColor' ||
+  color === 'inherit' ||
+  color.startsWith('var(')

package/src/modules/mergeRefs/__tests__/index-test.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { render } from '@testing-library/react'
+import * as React from 'react'
+
+import mergeRefs from '..'
+
+describe('modules/mergeRefs', () => {
+  test('merges refs of different types', () => {
+    const ref = React.createRef(null)
+    let functionRefValue = null
+    let hookRef
+    function Component() {
+      const functionRef = (x) => {
+        functionRefValue = x
+      }
+      hookRef = React.useRef(null)
+      return <div ref={mergeRefs(ref, hookRef, functionRef)} />
+    }
+
+    render(<Component />)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    expect(hookRef.current).toBeInstanceOf(HTMLDivElement)
+    expect(functionRefValue).toBeInstanceOf(HTMLDivElement)
+  })
+})

package/src/modules/mergeRefs/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 strict
+ */
+
+import type * as React from 'react'
+
+export function mergeRefs(
+  ...args: ReadonlyArray<React.Ref<any>>
+): (node: HTMLElement | null) => void {
+  return function forwardRef(node: HTMLElement | null) {
+    args.forEach((ref: React.Ref<any>) => {
+      if (ref == null) {
+        return
+      }
+      if (typeof ref === 'function') {
+        ref(node)
+        return
+      }
+      if (typeof ref === 'object') {
+        // @ts-ignore
+        ref.current = node
+        return
+      }
+      console.error(
+        `mergeRefs cannot handle Refs of type boolean, number or string, received ref ${String(
+          ref
+        )}`
+      )
+    })
+  }
+}

package/src/modules/modality/__tests__/index-test.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 {
+  clearPointers,
+  createEventTarget,
+  describeWithPointerEvent,
+  setPointerEvent,
+  testWithPointerType,
+} from 'dom-event-testing-library'
+
+import { getActiveModality, getModality, testOnly_resetActiveModality } from '..'
+
+describeWithPointerEvent('modules/modality', (hasPointerEvent) => {
+  let rootNode
+
+  beforeEach(() => {
+    setPointerEvent(hasPointerEvent)
+    rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+  })
+
+  afterEach(() => {
+    document.body.removeChild(rootNode)
+    rootNode = null
+    clearPointers()
+    testOnly_resetActiveModality()
+  })
+
+  describe('getModality', () => {
+    testWithPointerType('reflects currently-in-use modality', (pointerType) => {
+      const target = createEventTarget(rootNode)
+      expect(getModality()).toBe('keyboard')
+      target.pointerdown({ pointerType })
+      expect(getModality()).toBe(pointerType)
+      target.pointerup({ pointerType })
+      target.keydown()
+      expect(getModality()).toBe('keyboard')
+      if (pointerType !== 'touch') {
+        target.pointermove({ pointerType })
+        expect(getModality()).toBe(pointerType)
+        target.keydown()
+        expect(getModality()).toBe('keyboard')
+      }
+    })
+  })
+
+  describe('getActiveModality', () => {
+    testWithPointerType('reflects last actively used modality', (pointerType) => {
+      const target = createEventTarget(rootNode)
+      expect(getActiveModality()).toBe('keyboard')
+      target.pointerdown({ pointerType })
+      expect(getActiveModality()).toBe(pointerType)
+      target.pointerup({ pointerType })
+      target.keydown()
+      if (pointerType !== 'touch') {
+        target.pointermove({ pointerType })
+        expect(getActiveModality()).toBe('keyboard')
+      }
+    })
+  })
+})

package/src/modules/modality/index.tsx

@@ -0,0 +1,228 @@
+/**
+ * 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 '../canUseDOM'
+import { createEventHandle } from '../createEventHandle/index'
+
+export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen'
+
+const supportsPointerEvent = () =>
+  !!(typeof window !== 'undefined' && window.PointerEvent != null)
+
+let activeModality = 'keyboard'
+let modality = 'keyboard'
+let previousModality
+let previousActiveModality
+let isEmulatingMouseEvents = false
+const listeners = new Set()
+
+const KEYBOARD = 'keyboard'
+const MOUSE = 'mouse'
+const TOUCH = 'touch'
+
+const BLUR = 'blur'
+const CONTEXTMENU = 'contextmenu'
+const FOCUS = 'focus'
+const KEYDOWN = 'keydown'
+const MOUSEDOWN = 'mousedown'
+const MOUSEMOVE = 'mousemove'
+const MOUSEUP = 'mouseup'
+const POINTERDOWN = 'pointerdown'
+const POINTERMOVE = 'pointermove'
+const SCROLL = 'scroll'
+const SELECTIONCHANGE = 'selectionchange'
+const TOUCHCANCEL = 'touchcancel'
+const TOUCHMOVE = 'touchmove'
+const TOUCHSTART = 'touchstart'
+const VISIBILITYCHANGE = 'visibilitychange'
+
+const bubbleOptions = { passive: true }
+const captureOptions = { capture: true, passive: true }
+
+// Window events
+const addBlurListener = createEventHandle(BLUR, bubbleOptions)
+const addFocusListener = createEventHandle(FOCUS, bubbleOptions)
+// Must be capture phase because 'stopPropagation' might prevent these
+// events bubbling to the document.
+const addVisibilityChangeListener = createEventHandle(VISIBILITYCHANGE, captureOptions)
+const addKeyDownListener = createEventHandle(KEYDOWN, captureOptions)
+const addPointerDownListener = createEventHandle(POINTERDOWN, captureOptions)
+const addPointerMoveListener = createEventHandle(POINTERMOVE, captureOptions)
+// Fallback events
+const addContextMenuListener = createEventHandle(CONTEXTMENU, captureOptions)
+const addMouseDownListener = createEventHandle(MOUSEDOWN, captureOptions)
+const addMouseMoveListener = createEventHandle(MOUSEMOVE, captureOptions)
+const addMouseUpListener = createEventHandle(MOUSEUP, captureOptions)
+const addScrollListener = createEventHandle(SCROLL, captureOptions)
+const addSelectiomChangeListener = createEventHandle(SELECTIONCHANGE, captureOptions)
+const addTouchCancelListener = createEventHandle(TOUCHCANCEL, captureOptions)
+const addTouchMoveListener = createEventHandle(TOUCHMOVE, captureOptions)
+const addTouchStartListener = createEventHandle(TOUCHSTART, captureOptions)
+
+function restoreModality() {
+  if (previousModality != null || previousActiveModality != null) {
+    if (previousModality != null) {
+      modality = previousModality
+      previousModality = null
+    }
+    if (previousActiveModality != null) {
+      activeModality = previousActiveModality
+      previousActiveModality = null
+    }
+    callListeners()
+  }
+}
+
+function onBlurWindow() {
+  previousModality = modality
+  previousActiveModality = activeModality
+  activeModality = KEYBOARD
+  modality = KEYBOARD
+  callListeners()
+  // for fallback events
+  isEmulatingMouseEvents = false
+}
+
+function onFocusWindow() {
+  restoreModality()
+}
+
+function onKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return
+  }
+  if (modality !== KEYBOARD) {
+    modality = KEYBOARD
+    activeModality = KEYBOARD
+    callListeners()
+  }
+}
+
+function onVisibilityChange() {
+  if (document.visibilityState !== 'hidden') {
+    restoreModality()
+  }
+}
+
+function onPointerish(event: any) {
+  const eventType = event.type
+
+  if (supportsPointerEvent()) {
+    if (eventType === POINTERDOWN) {
+      if (activeModality !== event.pointerType) {
+        modality = event.pointerType
+        activeModality = event.pointerType
+        callListeners()
+      }
+      return
+    }
+    if (eventType === POINTERMOVE) {
+      if (modality !== event.pointerType) {
+        modality = event.pointerType
+        callListeners()
+      }
+      return
+    }
+  }
+  // Fallback for non-PointerEvent environment
+  else {
+    if (!isEmulatingMouseEvents) {
+      if (eventType === MOUSEDOWN) {
+        if (activeModality !== MOUSE) {
+          modality = MOUSE
+          activeModality = MOUSE
+          callListeners()
+        }
+      }
+      if (eventType === MOUSEMOVE) {
+        if (modality !== MOUSE) {
+          modality = MOUSE
+          callListeners()
+        }
+      }
+    }
+
+    // Flag when browser may produce emulated events
+    if (eventType === TOUCHSTART) {
+      isEmulatingMouseEvents = true
+      if (event.touches && event.touches.length > 1) {
+        isEmulatingMouseEvents = false
+      }
+      if (activeModality !== TOUCH) {
+        modality = TOUCH
+        activeModality = TOUCH
+        callListeners()
+      }
+      return
+    }
+
+    // Remove flag after emulated events are finished or cancelled, and if an
+    // event occurs that cuts short a touch event sequence.
+    if (
+      eventType === CONTEXTMENU ||
+      eventType === MOUSEUP ||
+      eventType === SELECTIONCHANGE ||
+      eventType === SCROLL ||
+      eventType === TOUCHCANCEL ||
+      eventType === TOUCHMOVE
+    ) {
+      isEmulatingMouseEvents = false
+    }
+  }
+}
+
+if (canUseDOM) {
+  addBlurListener(window, onBlurWindow)
+  addFocusListener(window, onFocusWindow)
+  addKeyDownListener(document, onKeyDown)
+  addPointerDownListener(document, onPointerish)
+  addPointerMoveListener(document, onPointerish)
+  addVisibilityChangeListener(document, onVisibilityChange)
+  // fallbacks
+  addContextMenuListener(document, onPointerish)
+  addMouseDownListener(document, onPointerish)
+  addMouseMoveListener(document, onPointerish)
+  addMouseUpListener(document, onPointerish)
+  addTouchCancelListener(document, onPointerish)
+  addTouchMoveListener(document, onPointerish)
+  addTouchStartListener(document, onPointerish)
+  addSelectiomChangeListener(document, onPointerish)
+  addScrollListener(document, onPointerish)
+}
+
+function callListeners() {
+  const value = { activeModality, modality }
+  listeners.forEach((listener) => {
+    // @ts-ignore
+    listener(value)
+  })
+}
+
+export function getActiveModality() {
+  return activeModality as Modality
+}
+
+export function getModality() {
+  return modality as Modality
+}
+
+export function addModalityListener(
+  listener: (arg0: { activeModality: Modality; modality: Modality }) => void
+): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function testOnly_resetActiveModality() {
+  isEmulatingMouseEvents = false
+  activeModality = KEYBOARD
+  modality = KEYBOARD
+}

package/src/modules/multiplyStyleLengthValue/__tests__/index-test.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 multiplyStyleLengthValue from '..'
+
+describe('modules/multiplyStyleLengthValue', () => {
+  test('number', () => {
+    expect(multiplyStyleLengthValue(2, -1)).toEqual(-2)
+    expect(multiplyStyleLengthValue(2, 2)).toEqual(4)
+    expect(multiplyStyleLengthValue(2.5, 2)).toEqual(5)
+  })
+
+  test('length', () => {
+    expect(multiplyStyleLengthValue('2rem', -1)).toEqual('-2rem')
+    expect(multiplyStyleLengthValue('2px', 2)).toEqual('4px')
+    expect(multiplyStyleLengthValue('2.5em', 2)).toEqual('5em')
+    expect(multiplyStyleLengthValue('2e3px', 2)).toEqual('4000px')
+  })
+})

package/src/modules/multiplyStyleLengthValue/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/
+
+const getUnit = (str) => str.match(CSS_UNIT_RE)[1]
+
+const isNumeric = (n) => {
+  return !isNaN(parseFloat(n)) && isFinite(n)
+}
+
+export const multiplyStyleLengthValue = (value: string | number, multiple) => {
+  if (typeof value === 'string') {
+    const number = parseFloat(value) * multiple
+    const unit = getUnit(value)
+    return `${number}${unit}`
+  } else if (isNumeric(value)) {
+    return value * multiple
+  }
+}

package/src/modules/normalizeColor/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { isWebColor } from '../isWebColor/index'
+import { processColor } from '../processColor/index'
+
+export const normalizeColor = (
+  color: number | string | null | undefined,
+  opacity = 1
+): void | string => {
+  if (color == null) return
+
+  if (typeof color === 'string' && isWebColor(color)) {
+    return color
+  }
+
+  const colorInt = processColor(color)
+  if (colorInt != null) {
+    const r = (colorInt >> 16) & 255
+    const g = (colorInt >> 8) & 255
+    const b = colorInt & 255
+    const a = ((colorInt >> 24) & 255) / 255
+    const alpha = (a * opacity).toFixed(2)
+    return `rgba(${r},${g},${b},${alpha})`
+  }
+}

package/src/modules/pick/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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
+ */
+
+export function pick(
+  obj: object,
+  list: {
+    [K in string]: boolean
+  }
+): object {
+  const nextObj = {}
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (list[key] === true) {
+        nextObj[key] = obj[key]
+      }
+    }
+  }
+  return nextObj
+}

package/src/modules/processColor/__tests__/index-test.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 processColor from '..'
+
+const platformSpecific = (x) => x
+
+describe('processColor', () => {
+  describe('predefined color names', () => {
+    it('should convert red', () => {
+      const colorFromString = processColor('red')
+      const expectedInt = 0xffff0000
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+
+    it('should convert white', () => {
+      const colorFromString = processColor('white')
+      const expectedInt = 0xffffffff
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+
+    it('should convert black', () => {
+      const colorFromString = processColor('black')
+      const expectedInt = 0xff000000
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+
+    it('should convert transparent', () => {
+      const colorFromString = processColor('transparent')
+      const expectedInt = 0x00000000
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+  })
+
+  describe('RGB strings', () => {
+    it('should convert rgb(x, y, z)', () => {
+      const colorFromString = processColor('rgb(10, 20, 30)')
+      const expectedInt = 0xff0a141e
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+  })
+
+  describe('RGBA strings', () => {
+    it('should convert rgba(x, y, z, a)', () => {
+      const colorFromString = processColor('rgba(10, 20, 30, 0.4)')
+      const expectedInt = 0x660a141e
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+  })
+
+  describe('HSL strings', () => {
+    it('should convert hsl(x, y%, z%)', () => {
+      const colorFromString = processColor('hsl(318, 69%, 55%)')
+      const expectedInt = 0xffdb3dac
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+  })
+
+  describe('HSLA strings', () => {
+    it('should convert hsla(x, y%, z%, a)', () => {
+      const colorFromString = processColor('hsla(318, 69%, 55%, 0.25)')
+      const expectedInt = 0x40db3dac
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+  })
+
+  describe('hex strings', () => {
+    it('should convert #xxxxxx', () => {
+      const colorFromString = processColor('#1e83c9')
+      const expectedInt = 0xff1e83c9
+      expect(colorFromString).toEqual(platformSpecific(expectedInt))
+    })
+  })
+})

package/src/modules/processColor/index.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/**
+ * 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 normalizeColor from '@hanzogui/normalize-css-color'
+
+export const processColor = (color?: string | number): number | null => {
+  if (color === undefined || color === null) {
+    return color
+  }
+
+  // convert number and hex
+  let int32Color = normalizeColor(color)
+  if (int32Color === undefined || int32Color === null) {
+    return undefined
+  }
+
+  int32Color = ((int32Color << 24) | (int32Color >>> 8)) >>> 0
+
+  return int32Color
+}

package/src/modules/requestIdleCallback/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 '../canUseDOM'
+
+const _requestIdleCallback = function (cb: Function, options?: object) {
+  return setTimeout(() => {
+    const start = Date.now()
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start))
+      },
+    })
+  }, 1)
+}
+
+const _cancelIdleCallback = function (id) {
+  clearTimeout(id)
+}
+
+const isSupported = canUseDOM && typeof window.requestIdleCallback !== 'undefined'
+
+export const requestIdleCallback = isSupported
+  ? window.requestIdleCallback
+  : _requestIdleCallback
+
+export const cancelIdleCallback = isSupported
+  ? window.cancelIdleCallback
+  : _cancelIdleCallback