@hanzogui/react-native-web-internals 2.0.0

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

@@ -0,0 +1,459 @@
+/**
+ * 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-local
+ */
+
+import { createEventTarget } from 'dom-event-testing-library'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import * as ReactDOMServer from 'react-dom/server'
+import { act } from 'react-dom/test-utils'
+
+import createEventHandle from '..'
+
+function createRoot(rootNode) {
+  return {
+    render(element) {
+      ReactDOM.render(element, rootNode)
+    },
+  }
+}
+
+describe('create-event-handle', () => {
+  let root
+  let rootNode
+
+  beforeEach(() => {
+    rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+    root = createRoot(rootNode)
+  })
+
+  afterEach(() => {
+    root.render(null)
+    document.body.removeChild(rootNode)
+    rootNode = null
+    root = null
+  })
+
+  test('can render correctly using ReactDOMServer', () => {
+    const listener = jest.fn()
+    const targetRef = React.createRef()
+    const addClickListener = createEventHandle('click')
+
+    function Component() {
+      React.useEffect(() => {
+        return addClickListener(targetRef.current, listener)
+      })
+      return <div ref={targetRef} />
+    }
+
+    const output = ReactDOMServer.renderToString(<Component />)
+    expect(output).toBe('<div data-reactroot=""></div>')
+  })
+
+  describe('createEventTarget()', () => {
+    test('event dispatched on target', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+
+      function Component() {
+        React.useEffect(() => {
+          return addClickListener(targetRef.current, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const target = createEventTarget(targetRef.current)
+
+      act(() => {
+        target.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('event dispatched on parent', () => {
+      const listener = jest.fn()
+      const listenerCapture = jest.fn()
+      const targetRef = React.createRef()
+      const parentRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+      const addClickCaptureListener = createEventHandle('click', {
+        capture: true,
+      })
+
+      function Component() {
+        React.useEffect(() => {
+          const removeClickListener = addClickListener(targetRef.current, listener)
+          const removeClickCaptureListener = addClickCaptureListener(
+            targetRef.current,
+            listenerCapture
+          )
+          return () => {
+            removeClickListener()
+            removeClickCaptureListener()
+          }
+        })
+        return (
+          <div ref={parentRef}>
+            <div ref={targetRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const parent = createEventTarget(parentRef.current)
+
+      act(() => {
+        parent.click()
+      })
+
+      expect(listener).toBeCalledTimes(0)
+      expect(listenerCapture).toBeCalledTimes(0)
+    })
+
+    test('event dispatched on child', () => {
+      const log = []
+      const listener = jest.fn(() => {
+        log.push('bubble')
+      })
+      const listenerCapture = jest.fn(() => {
+        log.push('capture')
+      })
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+      const addClickCaptureListener = createEventHandle('click', {
+        capture: true,
+      })
+
+      function Component() {
+        React.useEffect(() => {
+          const removeClickListener = addClickListener(targetRef.current, listener)
+          const removeClickCaptureListener = addClickCaptureListener(
+            targetRef.current,
+            listenerCapture
+          )
+          return () => {
+            removeClickListener()
+            removeClickCaptureListener()
+          }
+        })
+        return (
+          <div ref={targetRef}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(listenerCapture).toBeCalledTimes(1)
+      expect(listener).toBeCalledTimes(1)
+      expect(log).toEqual(['capture', 'bubble'])
+    })
+
+    test('event dispatched on text node', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+
+      function Component() {
+        React.useEffect(() => {
+          return addClickListener(targetRef.current, listener)
+        })
+        return (
+          <div ref={targetRef}>
+            <div ref={childRef}>text</div>
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const text = createEventTarget(childRef.current.firstChild)
+
+      act(() => {
+        text.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listener can be attached to document', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+
+      function Component({ target }) {
+        React.useEffect(() => {
+          return addClickListener(target, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component target={document} />)
+      })
+      const target = createEventTarget(targetRef.current)
+      act(() => {
+        target.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listener can be attached to window ', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+
+      function Component({ target }) {
+        React.useEffect(() => {
+          return addClickListener(target, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component target={window} />)
+      })
+      const target = createEventTarget(targetRef.current)
+      act(() => {
+        target.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('custom event dispatched on target', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+      const addMagicEventListener = createEventHandle('magic-event')
+
+      function Component() {
+        React.useEffect(() => {
+          return addMagicEventListener(targetRef.current, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      act(() => {
+        const event = new CustomEvent('magic-event', { bubbles: true })
+        targetRef.current.dispatchEvent(event)
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listeners can be set on multiple targets simultaneously', () => {
+      const log = []
+      const targetRef = React.createRef()
+      const parentRef = React.createRef()
+      const childRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+      const addClickCaptureListener = createEventHandle('click', {
+        capture: true,
+      })
+      const listener = jest.fn((e) => {
+        log.push(['bubble', e.currentTarget.id])
+      })
+      const listenerCapture = jest.fn((e) => {
+        log.push(['capture', e.currentTarget.id])
+      })
+
+      function Component() {
+        React.useEffect(() => {
+          // the same event handle is used to set listeners on different targets
+          addClickListener(targetRef.current, listener)
+          addClickListener(parentRef.current, listener)
+          addClickCaptureListener(targetRef.current, listenerCapture)
+          addClickCaptureListener(parentRef.current, listenerCapture)
+        })
+        return (
+          <div id="parent" ref={parentRef}>
+            <div id="target" ref={targetRef}>
+              <div ref={childRef} />
+            </div>
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(listenerCapture).toBeCalledTimes(2)
+      expect(listener).toBeCalledTimes(2)
+      expect(log).toEqual([
+        ['capture', 'parent'],
+        ['capture', 'target'],
+        ['bubble', 'target'],
+        ['bubble', 'parent'],
+      ])
+    })
+
+    test('listeners are specific to each event handle', () => {
+      const log = []
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+      const addClickAltListener = createEventHandle('click')
+      const addClickCaptureListener = createEventHandle('click', {
+        capture: true,
+      })
+      const addClickCaptureAltListener = createEventHandle('click', {
+        capture: true,
+      })
+      const listener = jest.fn((e) => {
+        log.push(['bubble', 'target'])
+      })
+      const listenerAlt = jest.fn((e) => {
+        log.push(['bubble', 'target-alt'])
+      })
+      const listenerCapture = jest.fn((e) => {
+        log.push(['capture', 'target'])
+      })
+      const listenerCaptureAlt = jest.fn((e) => {
+        log.push(['capture', 'target-alt'])
+      })
+
+      function Component() {
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener)
+          addClickAltListener(targetRef.current, listenerAlt)
+          addClickCaptureListener(targetRef.current, listenerCapture)
+          addClickCaptureAltListener(targetRef.current, listenerCaptureAlt)
+        })
+        return (
+          <div id="target" ref={targetRef}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(listenerCapture).toBeCalledTimes(1)
+      expect(listenerCaptureAlt).toBeCalledTimes(1)
+      expect(listener).toBeCalledTimes(1)
+      expect(listenerAlt).toBeCalledTimes(1)
+      expect(log).toEqual([
+        ['capture', 'target'],
+        ['capture', 'target-alt'],
+        ['bubble', 'target'],
+        ['bubble', 'target-alt'],
+      ])
+    })
+  })
+
+  describe('stopPropagation and stopImmediatePropagation', () => {
+    test('stopPropagation works as expected', () => {
+      const childListener = jest.fn((e) => {
+        e.stopPropagation()
+      })
+      const targetListener = jest.fn()
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+      const addClickListener = createEventHandle('click')
+
+      function Component() {
+        React.useEffect(() => {
+          addClickListener(childRef.current, childListener)
+          addClickListener(targetRef.current, targetListener)
+        })
+        return (
+          <div ref={targetRef}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(childListener).toBeCalledTimes(1)
+      expect(targetListener).toBeCalledTimes(0)
+    })
+
+    test('stopImmediatePropagation works as expected', () => {
+      const firstListener = jest.fn((e) => {
+        e.stopImmediatePropagation()
+      })
+      const secondListener = jest.fn()
+      const targetRef = React.createRef()
+      const addFirstClickListener = createEventHandle('click')
+      const addSecondClickListener = createEventHandle('click')
+
+      function Component() {
+        React.useEffect(() => {
+          addFirstClickListener(targetRef.current, firstListener)
+          addSecondClickListener(targetRef.current, secondListener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const target = createEventTarget(targetRef.current)
+
+      act(() => {
+        target.click()
+      })
+
+      expect(firstListener).toBeCalledTimes(1)
+      expect(secondListener).toBeCalledTimes(0)
+    })
+  })
+})

package/src/modules/createEventHandle/index.tsx

@@ -0,0 +1,100 @@
+// @ts-nocheck
+/**
+ * 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
+ */
+
+'use strict'
+
+import { canUseDOM } from '../canUseDOM'
+
+type Listener = (e: any) => void
+type EventHandle = (target: EventTarget, callback: Listener | null) => () => void
+
+export type EventOptions = {
+  capture?: boolean
+  passive?: boolean
+}
+
+const emptyFunction = () => {}
+
+function supportsPassiveEvents(): boolean {
+  let supported = false
+  // Check if browser supports event with passive listeners
+  // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+  if (canUseDOM) {
+    try {
+      const options = {}
+      Object.defineProperty(options, 'passive', {
+        get() {
+          supported = true
+          return false
+        },
+      })
+      window.addEventListener('test', null, options)
+      window.removeEventListener('test', null, options)
+    } catch (e) {}
+  }
+  return supported
+}
+
+const canUsePassiveEvents = supportsPassiveEvents()
+
+function getOptions(options: EventOptions | null): EventOptions | boolean {
+  if (options == null) {
+    return false
+  }
+  return canUsePassiveEvents ? options : Boolean(options.capture)
+}
+
+/**
+ * Shim generic API compatibility with ReactDOM's synthetic events, without needing the
+ * large amount of code ReactDOM uses to do this. Ideally we wouldn't use a synthetic
+ * event wrapper at all.
+ */
+function isPropagationStopped() {
+  return this.cancelBubble
+}
+function isDefaultPrevented() {
+  return this.defaultPrevented
+}
+function normalizeEvent(event: any) {
+  event.nativeEvent = event
+  event.persist = emptyFunction
+  event.isDefaultPrevented = isDefaultPrevented
+  event.isPropagationStopped = isPropagationStopped
+  return event
+}
+
+/**
+ *
+ */
+export function createEventHandle(
+  type: string,
+  options?: EventOptions | null
+): EventHandle {
+  const opts = getOptions(options)
+
+  return function (target: EventTarget, listener: Listener | null) {
+    if (target == null || typeof target.addEventListener !== 'function') {
+      throw new Error('createEventHandle: called on an invalid target.')
+    }
+
+    const element = target as any
+    if (listener != null) {
+      const compatListener = (e) => listener(normalizeEvent(e))
+      element.addEventListener(type, compatListener, opts)
+      return function removeListener() {
+        if (element != null) {
+          element.removeEventListener(type, compatListener, opts)
+        }
+      }
+    } else {
+      return emptyFunction
+    }
+  }
+}

package/src/modules/dismissKeyboard/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
+ */
+
+import { TextInputState } from '../TextInputState/index'
+
+export const dismissKeyboard = () => {
+  TextInputState.blurTextInput(TextInputState.currentlyFocusedField())
+}

package/src/modules/forwardedProps/index.tsx

@@ -0,0 +1,145 @@
+/**
+ * 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-local
+ */
+
+export const defaultProps = {
+  children: true,
+  dataSet: true,
+  nativeID: true,
+  ref: true,
+  suppressHydrationWarning: true,
+  testID: true,
+  id: true,
+}
+
+export const accessibilityProps = {
+  accessibilityActiveDescendant: true,
+  accessibilityAtomic: true,
+  accessibilityAutoComplete: true,
+  accessibilityBusy: true,
+  accessibilityChecked: true,
+  accessibilityColumnCount: true,
+  accessibilityColumnIndex: true,
+  accessibilityColumnSpan: true,
+  accessibilityControls: true,
+  accessibilityCurrent: true,
+  accessibilityDescribedBy: true,
+  accessibilityDetails: true,
+  accessibilityDisabled: true,
+  accessibilityErrorMessage: true,
+  accessibilityExpanded: true,
+  accessibilityFlowTo: true,
+  accessibilityHasPopup: true,
+  accessibilityHidden: true,
+  accessibilityInvalid: true,
+  accessibilityKeyShortcuts: true,
+  accessibilityLabel: true,
+  accessibilityLabelledBy: true,
+  accessibilityLevel: true,
+  accessibilityLiveRegion: true,
+  accessibilityModal: true,
+  accessibilityMultiline: true,
+  accessibilityMultiSelectable: true,
+  accessibilityOrientation: true,
+  accessibilityOwns: true,
+  accessibilityPlaceholder: true,
+  accessibilityPosInSet: true,
+  accessibilityPressed: true,
+  accessibilityReadOnly: true,
+  accessibilityRequired: true,
+  accessibilityRole: true,
+  accessibilityRoleDescription: true,
+  accessibilityRowCount: true,
+  accessibilityRowIndex: true,
+  accessibilityRowSpan: true,
+  accessibilitySelected: true,
+  accessibilitySetSize: true,
+  accessibilitySort: true,
+  accessibilityValueMax: true,
+  accessibilityValueMin: true,
+  accessibilityValueNow: true,
+  accessibilityValueText: true,
+  dir: true,
+  focusable: true,
+}
+
+export const clickProps = {
+  onClick: true,
+  onClickCapture: true,
+  onContextMenu: true,
+}
+
+export const focusProps = {
+  onBlur: true,
+  onFocus: true,
+}
+
+export const keyboardProps = {
+  onKeyDown: true,
+  onKeyDownCapture: true,
+  onKeyUp: true,
+  onKeyUpCapture: true,
+}
+
+export const mouseProps = {
+  onMouseDown: true,
+  onMouseEnter: true,
+  onMouseLeave: true,
+  onMouseMove: true,
+  onMouseOver: true,
+  onMouseOut: true,
+  onMouseUp: true,
+}
+
+export const touchProps = {
+  onTouchCancel: true,
+  onTouchCancelCapture: true,
+  onTouchEnd: true,
+  onTouchEndCapture: true,
+  onTouchMove: true,
+  onTouchMoveCapture: true,
+  onTouchStart: true,
+  onTouchStartCapture: true,
+}
+
+export const styleProps = {
+  classList: true,
+  className: true,
+  style: true,
+}
+
+export const forwardedProps = {
+  defaultProps,
+  accessibilityProps,
+  clickProps,
+  focusProps,
+  keyboardProps,
+  mouseProps,
+  touchProps,
+  styleProps,
+}
+
+export const forwardPropsListText = {
+  ...defaultProps,
+  ...accessibilityProps,
+  ...clickProps,
+  ...focusProps,
+  ...keyboardProps,
+  ...mouseProps,
+  ...touchProps,
+  ...styleProps,
+  href: true,
+  lang: true,
+  pointerEvents: true,
+}
+
+export const forwardPropsListView = {
+  ...forwardPropsListText,
+  onScroll: true,
+  onWheel: true,
+}