@hanzogui/react-native-web-internals 2.0.0

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

@@ -0,0 +1,342 @@
+/**
+ * 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 {
+  clearPointers,
+  createEventTarget,
+  describeWithPointerEvent,
+  setPointerEvent,
+} from 'dom-event-testing-library'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { act } from 'react-dom/test-utils'
+
+import { testOnly_resetActiveModality } from '../../modality/index'
+import useHover from '..'
+
+function createRoot(rootNode) {
+  return {
+    render(element) {
+      ReactDOM.render(element, rootNode)
+    },
+  }
+}
+
+describeWithPointerEvent('useHover', (hasPointerEvents) => {
+  let root
+  let rootNode
+
+  beforeEach(() => {
+    setPointerEvent(hasPointerEvents)
+    rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+    root = createRoot(rootNode)
+  })
+
+  afterEach(() => {
+    root.render(null)
+    document.body.removeChild(rootNode)
+    rootNode = null
+    root = null
+    testOnly_resetActiveModality()
+    // make sure all tests reset state machine tracking pointers on the mock surface
+    clearPointers()
+  })
+
+  describe('contain', () => {
+    let onHoverChange, onHoverStart, onHoverUpdate, onHoverEnd, ref, childRef
+
+    const componentInit = () => {
+      onHoverChange = jest.fn()
+      onHoverStart = jest.fn()
+      onHoverUpdate = jest.fn()
+      onHoverEnd = jest.fn()
+      ref = React.createRef()
+      childRef = React.createRef()
+      const Component = () => {
+        useHover(ref, {
+          onHoverChange,
+          onHoverStart,
+          onHoverUpdate,
+          onHoverEnd,
+        })
+        useHover(childRef, { contain: true })
+        return (
+          <div ref={ref}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+    }
+
+    test('contains the hover gesture', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      const child = createEventTarget(childRef.current)
+      act(() => {
+        target.pointerover()
+        target.pointerout()
+        child.pointerover()
+      })
+      expect(onHoverEnd).toBeCalled()
+      act(() => {
+        child.pointerout()
+      })
+      expect(onHoverStart).toBeCalled()
+    })
+  })
+
+  describe('disabled', () => {
+    let onHoverChange, onHoverStart, onHoverUpdate, onHoverEnd, ref
+
+    const componentInit = () => {
+      onHoverChange = jest.fn()
+      onHoverStart = jest.fn()
+      onHoverUpdate = jest.fn()
+      onHoverEnd = jest.fn()
+      ref = React.createRef()
+      const Component = () => {
+        useHover(ref, {
+          disabled: true,
+          onHoverChange,
+          onHoverStart,
+          onHoverUpdate,
+          onHoverEnd,
+        })
+        return <div ref={ref} />
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+    }
+
+    test('does not call callbacks', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerover()
+        target.pointerout()
+      })
+      expect(onHoverChange).not.toBeCalled()
+      expect(onHoverStart).not.toBeCalled()
+      expect(onHoverUpdate).not.toBeCalled()
+      expect(onHoverEnd).not.toBeCalled()
+    })
+  })
+
+  describe('onHoverStart', () => {
+    let onHoverStart, ref
+
+    const componentInit = () => {
+      onHoverStart = jest.fn()
+      ref = React.createRef()
+      const Component = () => {
+        useHover(ref, { onHoverStart })
+        return <div ref={ref} />
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+    }
+
+    test('is called for mouse pointers', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerover({ pointerType: 'mouse' })
+      })
+      expect(onHoverStart).toBeCalledTimes(1)
+    })
+
+    test('is not called for touch pointers', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerdown({ pointerType: 'touch' })
+        target.pointerup({ pointerType: 'touch' })
+      })
+      expect(onHoverStart).not.toBeCalled()
+    })
+
+    test('is called if a mouse pointer is used after a touch pointer', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerdown({ pointerType: 'touch' })
+        target.pointerup({ pointerType: 'touch' })
+        target.pointerover({ pointerType: 'mouse' })
+      })
+      expect(onHoverStart).toBeCalledTimes(1)
+    })
+  })
+
+  describe('onHoverChange', () => {
+    let onHoverChange, ref
+
+    const componentInit = () => {
+      onHoverChange = jest.fn()
+      ref = React.createRef()
+      const Component = () => {
+        useHover(ref, { onHoverChange })
+        return <div ref={ref} />
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+    }
+
+    test('is called for mouse pointers', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerover()
+      })
+      expect(onHoverChange).toBeCalledTimes(1)
+      expect(onHoverChange).toBeCalledWith(true)
+      act(() => {
+        target.pointerout()
+      })
+      expect(onHoverChange).toBeCalledTimes(2)
+      expect(onHoverChange).toBeCalledWith(false)
+    })
+
+    test('is not called for touch pointers', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerdown({ pointerType: 'touch' })
+        target.pointerup({ pointerType: 'touch' })
+      })
+      expect(onHoverChange).not.toBeCalled()
+    })
+  })
+
+  describe('onHoverEnd', () => {
+    let onHoverEnd, ref, childRef
+
+    const componentInit = () => {
+      onHoverEnd = jest.fn()
+      ref = React.createRef()
+      childRef = React.createRef()
+      const Component = () => {
+        useHover(ref, { onHoverEnd })
+        return (
+          <div ref={ref}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+    }
+
+    test('is called for mouse pointers', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerover()
+        target.pointerout()
+      })
+      expect(onHoverEnd).toBeCalledTimes(1)
+    })
+
+    test('is not called for touch pointers', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerdown({ pointerType: 'touch' })
+        target.pointerup({ pointerType: 'touch' })
+      })
+      expect(onHoverEnd).not.toBeCalled()
+    })
+
+    test('is not called when entering children of the target', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      const child = createEventTarget(childRef.current)
+      act(() => {
+        target.pointerover()
+        target.pointerout({ relatedTarget: childRef.current })
+        child.pointerover({ relatedTarget: target.node })
+      })
+      expect(onHoverEnd).not.toBeCalled()
+    })
+  })
+
+  describe('onHoverUpdate', () => {
+    test('is called after the active pointer moves"', () => {
+      const onHoverUpdate = jest.fn()
+      const ref = React.createRef()
+      const Component = () => {
+        useHover(ref, { onHoverUpdate })
+        return <div ref={ref} />
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerover()
+        target.pointerhover({ x: 0, y: 0 })
+        target.pointerhover({ x: 1, y: 1 })
+      })
+      expect(onHoverUpdate).toBeCalledTimes(2)
+    })
+  })
+
+  describe('repeat use', () => {
+    let onHoverChange, onHoverStart, onHoverUpdate, onHoverEnd, ref
+
+    const componentInit = () => {
+      onHoverChange = jest.fn()
+      onHoverStart = jest.fn()
+      onHoverUpdate = jest.fn()
+      onHoverEnd = jest.fn()
+      ref = React.createRef()
+      const Component = () => {
+        useHover(ref, {
+          onHoverChange,
+          onHoverStart,
+          onHoverUpdate,
+          onHoverEnd,
+        })
+        return <div ref={ref} />
+      }
+      act(() => {
+        root.render(<Component />)
+      })
+    }
+
+    test('callbacks are called each time', () => {
+      componentInit()
+      const target = createEventTarget(ref.current)
+      act(() => {
+        target.pointerover()
+        target.pointerhover({ x: 1, y: 1 })
+        target.pointerout()
+      })
+      expect(onHoverStart).toBeCalledTimes(1)
+      expect(onHoverUpdate).toBeCalledTimes(1)
+      expect(onHoverEnd).toBeCalledTimes(1)
+      expect(onHoverChange).toBeCalledTimes(2)
+      act(() => {
+        target.pointerover()
+        target.pointerhover({ x: 1, y: 1 })
+        target.pointerout()
+      })
+      expect(onHoverStart).toBeCalledTimes(2)
+      expect(onHoverUpdate).toBeCalledTimes(2)
+      expect(onHoverEnd).toBeCalledTimes(2)
+      expect(onHoverChange).toBeCalledTimes(4)
+    })
+  })
+})

package/src/modules/useHover/index.tsx

@@ -0,0 +1,181 @@
+/**
+ * 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 { getModality } from '../modality/index'
+import { useEvent } from '../useEvent/index'
+import { useLayoutEffectImpl as useLayoutEffect } from '../useLayoutEffect/index'
+
+/**
+ * Types
+ */
+
+export type HoverEventsConfig = {
+  contain?: boolean | null
+  disabled?: boolean | null
+  onHoverStart?: ((e: any) => void) | null
+  onHoverChange?: ((bool: boolean) => void) | null
+  onHoverUpdate?: ((e: any) => void) | null
+  onHoverEnd?: ((e: any) => void) | null
+}
+
+/**
+ * Implementation
+ */
+
+const emptyObject = {} as any
+const opts = { passive: true }
+const lockEventType = 'react-gui:hover:lock'
+const unlockEventType = 'react-gui:hover:unlock'
+const supportsPointerEvent = () =>
+  !!(typeof window !== 'undefined' && window.PointerEvent != null)
+
+function dispatchCustomEvent(
+  target: EventTarget,
+  type: string,
+  payload?: {
+    bubbles?: boolean
+    cancelable?: boolean
+    detail?: {
+      [K in string]: unknown
+    }
+  }
+) {
+  const event = document.createEvent('CustomEvent')
+  const { bubbles = true, cancelable = true, detail } = payload || emptyObject
+  event.initCustomEvent(type, bubbles, cancelable, detail)
+  target.dispatchEvent(event)
+}
+
+// This accounts for the non-PointerEvent fallback events.
+function getPointerType(event) {
+  const { pointerType } = event
+  return pointerType != null ? pointerType : getModality()
+}
+
+export function useHover(targetRef: any, config: HoverEventsConfig): void {
+  const { contain, disabled, onHoverStart, onHoverChange, onHoverUpdate, onHoverEnd } =
+    config
+
+  const canUsePE = supportsPointerEvent()
+
+  const addMoveListener = useEvent(canUsePE ? 'pointermove' : 'mousemove', opts)
+  const addEnterListener = useEvent(canUsePE ? 'pointerenter' : 'mouseenter', opts)
+  const addLeaveListener = useEvent(canUsePE ? 'pointerleave' : 'mouseleave', opts)
+  // These custom events are used to implement the "contain" prop.
+  const addLockListener = useEvent(lockEventType, opts)
+  const addUnlockListener = useEvent(unlockEventType, opts)
+
+  useLayoutEffect(() => {
+    const target = targetRef.current
+    if (target !== null) {
+      /**
+       * End the hover gesture
+       */
+      const hoverEnd = function (e) {
+        if (onHoverEnd != null) {
+          onHoverEnd(e)
+        }
+        if (onHoverChange != null) {
+          onHoverChange(false)
+        }
+        // Remove the listeners once finished.
+        addMoveListener(target, null)
+        addLeaveListener(target, null)
+      }
+
+      /**
+       * Leave element
+       */
+      const leaveListener = function (e) {
+        const target = targetRef.current
+        if (target != null && getPointerType(e) !== 'touch') {
+          if (contain) {
+            dispatchCustomEvent(target, unlockEventType)
+          }
+          hoverEnd(e)
+        }
+      }
+
+      /**
+       * Move within element
+       */
+      const moveListener = function (e) {
+        if (getPointerType(e) !== 'touch') {
+          if (onHoverUpdate != null) {
+            // Not all browsers have these properties
+            if (e.x == null) {
+              e.x = e.clientX
+            }
+            if (e.y == null) {
+              e.y = e.clientY
+            }
+            onHoverUpdate(e)
+          }
+        }
+      }
+
+      /**
+       * Start the hover gesture
+       */
+      const hoverStart = function (e) {
+        if (onHoverStart != null) {
+          onHoverStart(e)
+        }
+        if (onHoverChange != null) {
+          onHoverChange(true)
+        }
+        // Set the listeners needed for the rest of the hover gesture.
+        if (onHoverUpdate != null) {
+          addMoveListener(target, !disabled ? moveListener : null)
+        }
+        addLeaveListener(target, !disabled ? leaveListener : null)
+      }
+
+      /**
+       * Enter element
+       */
+      const enterListener = function (e) {
+        const target = targetRef.current
+        if (target != null && getPointerType(e) !== 'touch') {
+          if (contain) {
+            dispatchCustomEvent(target, lockEventType)
+          }
+          hoverStart(e)
+          const lockListener = function (lockEvent) {
+            if (lockEvent.target !== target) {
+              hoverEnd(e)
+            }
+          }
+          const unlockListener = function (lockEvent) {
+            if (lockEvent.target !== target) {
+              hoverStart(e)
+            }
+          }
+          addLockListener(target, !disabled ? lockListener : null)
+          addUnlockListener(target, !disabled ? unlockListener : null)
+        }
+      }
+
+      addEnterListener(target, !disabled ? enterListener : null)
+    }
+  }, [
+    addEnterListener,
+    addMoveListener,
+    addLeaveListener,
+    addLockListener,
+    addUnlockListener,
+    contain,
+    disabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverUpdate,
+    onHoverEnd,
+    targetRef,
+  ])
+}

package/src/modules/useLayoutEffect/index.ts

@@ -0,0 +1,15 @@
+import React from 'react' /**
+ * 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.
+ *
+ * useLayoutEffect throws an error on the server. On the few occasions where is
+ * problematic, use this hook.
+ *
+ * @flow
+ */
+
+import { canUseDOM } from '../canUseDOM'
+
+export const useLayoutEffectImpl = canUseDOM ? React.useLayoutEffect : React.useEffect

package/src/modules/useLocale/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react' /**
+ * 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
+ */
+
+import { isLocaleRTL } from './isLocaleRTL'
+
+type Locale = string
+type WritingDirection = 'ltr' | 'rtl'
+
+type LocaleValue = {
+  // Locale writing direction.
+  direction: WritingDirection
+  // Locale BCP47 language code: https://www.ietf.org/rfc/bcp/bcp47.txt
+  locale: Locale | null
+}
+
+type ProviderProps = {
+  children: any
+} & LocaleValue
+
+const defaultLocale = {
+  direction: 'ltr',
+  locale: 'en-US',
+}
+
+const LocaleContext = React.createContext<LocaleValue>(defaultLocale as any)
+
+export function getLocaleDirection(locale: Locale): WritingDirection {
+  return isLocaleRTL(locale) ? 'rtl' : 'ltr'
+}
+
+export function LocaleProvider(props: ProviderProps) {
+  const { direction, locale, children } = props
+  const needsContext = direction || locale
+
+  return needsContext ? (
+    <LocaleContext.Provider
+      value={{
+        direction: locale ? getLocaleDirection(locale) : direction,
+        locale,
+      }}
+    >
+      {children}
+    </LocaleContext.Provider>
+  ) : (
+    children
+  )
+}
+
+export function useLocaleContext(): LocaleValue {
+  return React.useContext(LocaleContext)
+}

package/src/modules/useLocale/isLocaleRTL.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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
+ */
+
+const rtlScripts = new Set([
+  'Arab',
+  'Syrc',
+  'Samr',
+  'Mand',
+  'Thaa',
+  'Mend',
+  'Nkoo',
+  'Adlm',
+  'Rohg',
+  'Hebr',
+])
+
+const rtlLangs = new Set([
+  'ae', // Avestan
+  'ar', // Arabic
+  'arc', // Aramaic
+  'bcc', // Southern Balochi
+  'bqi', // Bakthiari
+  'ckb', // Sorani
+  'dv', // Dhivehi
+  'fa',
+  'far', // Persian
+  'glk', // Gilaki
+  'he',
+  'iw', // Hebrew
+  'khw', // Khowar
+  'ks', // Kashmiri
+  'ku', // Kurdish
+  'mzn', // Mazanderani
+  'nqo', // N'Ko
+  'pnb', // Western Punjabi
+  'ps', // Pashto
+  'sd', // Sindhi
+  'ug', // Uyghur
+  'ur', // Urdu
+  'yi', // Yiddish
+])
+
+const cache = new Map()
+
+/**
+ * Determine the writing direction of a locale
+ */
+export function isLocaleRTL(locale: string): boolean {
+  const cachedRTL = cache.get(locale)
+  if (cachedRTL) {
+    return cachedRTL
+  }
+
+  let isRTL = false
+  // @ts-ignore
+  if (Intl.Locale) {
+    // @ts-ignore
+    const script = new Intl.Locale(locale).maximize().script
+    isRTL = rtlScripts.has(script as any)
+  } else {
+    // Fallback to inferring from language
+    const lang = locale.split('-')[0]
+    isRTL = rtlLangs.has(lang)
+  }
+
+  cache.set(locale, isRTL)
+  return isRTL
+}