@hanzogui/react-native-web-internals 2.0.0

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

@@ -0,0 +1,45 @@
+/**
+ * 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 Platform from '..'
+
+describe('apis/Platform', () => {
+  describe('select', () => {
+    test('supports "default"', () => {
+      expect(Platform.select({ default: 'default' })).toEqual('default')
+    })
+
+    test('chooses "web"', () => {
+      expect(
+        Platform.select({
+          android: 'android',
+          ios: 'ios',
+          web: 'web',
+          default: 'default',
+        })
+      ).toEqual('web')
+    })
+  })
+
+  describe('isTesting', () => {
+    const NODE_ENV_BACKUP = process.env.NODE_ENV
+
+    afterEach(() => {
+      process.env.NODE_ENV = NODE_ENV_BACKUP
+    })
+
+    test('true when NODE_ENV is "test"', () => {
+      process.env.NODE_ENV = 'test'
+      expect(Platform.isTesting).toEqual(true)
+    })
+
+    test('false when NODE_ENV is not "test"', () => {
+      process.env.NODE_ENV = 'development'
+      expect(Platform.isTesting).toEqual(false)
+    })
+  })
+})

package/src/modules/Platform/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+export const Platform = {
+  OS: 'web',
+  select: (obj: any): any => ('web' in obj ? obj.web : obj.default),
+  isTesting: process.env.NODE_ENV === 'test',
+}

package/src/modules/TextInputState/index.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 { UIManager } from '../UIManager'
+
+/**
+ * This class is responsible for coordinating the "focused"
+ * state for TextInputs. All calls relating to the keyboard
+ * should be funneled through here
+ */
+export const TextInputState = {
+  /**
+   * Internal state
+   */
+  _currentlyFocusedNode: null as object | null,
+
+  /**
+   * Returns the ID of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedField(): object | null {
+    if (document.activeElement !== this._currentlyFocusedNode) {
+      this._currentlyFocusedNode = null
+    }
+    return this._currentlyFocusedNode
+  },
+
+  /**
+   * @param {Object} TextInputID id of the text field to focus
+   * Focuses the specified text field
+   * noop if the text field was already focused
+   */
+  focusTextInput(textFieldNode: object | null) {
+    if (textFieldNode !== null) {
+      this._currentlyFocusedNode = textFieldNode
+      if (document.activeElement !== textFieldNode) {
+        UIManager.focus(textFieldNode)
+      }
+    }
+  },
+
+  /**
+   * @param {Object} textFieldNode id of the text field to focus
+   * Unfocuses the specified text field
+   * noop if it wasn't focused
+   */
+  blurTextInput(textFieldNode: object | null) {
+    if (textFieldNode !== null) {
+      this._currentlyFocusedNode = null
+      if (document.activeElement === textFieldNode) {
+        UIManager.blur(textFieldNode)
+      }
+    }
+  },
+}

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

@@ -0,0 +1,87 @@
+/**
+ * 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 UIManager from '..'
+
+const createStyledNode = (name = 'div', style = {}) => {
+  const root = document.createElement(name)
+  Object.keys(style).forEach((prop) => {
+    root.style[prop] = style[prop]
+  })
+  return root
+}
+
+const componentStub = {
+  _reactInternalInstance: {
+    _currentElement: { _owner: {} },
+    _debugID: 1,
+  },
+}
+
+describe('apis/UIManager', () => {
+  describe('focus', () => {
+    test('sets tabIndex="-1" on elements not programmatically focusable by default', () => {
+      const node = createStyledNode()
+      UIManager.focus(node)
+      expect(node.getAttribute('tabIndex')).toEqual('-1')
+    })
+
+    test('doesn\'t set tabIndex="-1" on elements with an existing tabIndex', () => {
+      const node = createStyledNode()
+      node.tabIndex = 0
+      UIManager.focus(node)
+      expect(node.getAttribute('tabIndex')).toEqual('0')
+    })
+
+    test('doesn\'t set tabIndex="-1" on elements focusable by default', () => {
+      ;['a', 'input', 'select', 'textarea'].forEach((name) => {
+        const node = createStyledNode(name)
+        UIManager.focus(node)
+        expect(node.getAttribute('tabIndex')).toBeNull()
+      })
+    })
+  })
+
+  describe('updateView', () => {
+    test('supports className alias for class', () => {
+      const node = createStyledNode()
+      const props = { className: 'extra' }
+      UIManager.updateView(node, props, componentStub)
+      expect(node.getAttribute('class')).toEqual('extra')
+    })
+
+    test('adds correct DOM styles to existing style', () => {
+      const node = createStyledNode('div', { color: 'red' })
+      const props = { style: { marginTop: 0, marginBottom: 0, opacity: 0 } }
+      UIManager.updateView(node, props, componentStub)
+      expect(node.getAttribute('style')).toEqual(
+        'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;'
+      )
+    })
+
+    test('replaces input and textarea text', () => {
+      const node = createStyledNode('textarea')
+      node.value = 'initial'
+      const textProp = { text: 'expected-text' }
+      const valueProp = { value: 'expected-value' }
+
+      UIManager.updateView(node, textProp)
+      expect(node.value).toEqual('expected-text')
+
+      UIManager.updateView(node, valueProp)
+      expect(node.value).toEqual('expected-value')
+    })
+
+    test('sets other attribute values', () => {
+      const node = createStyledNode()
+      const props = { 'aria-level': '4', 'data-of-type': 'string' }
+      UIManager.updateView(node, props)
+      expect(node.getAttribute('aria-level')).toEqual('4')
+      expect(node.getAttribute('data-of-type')).toEqual('string')
+    })
+  })
+})

package/src/modules/UIManager/index.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+/**
+ * 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
+ */
+
+import { measure, measureInWindow } from '@hanzogui/use-element-layout'
+
+const focusableElements = {
+  A: true,
+  INPUT: true,
+  SELECT: true,
+  TEXTAREA: true,
+}
+
+export const UIManager = {
+  blur(node) {
+    try {
+      node.blur()
+    } catch (err) {
+      //
+    }
+  },
+
+  focus(node) {
+    try {
+      const name = node.nodeName
+      // A tabIndex of -1 allows element to be programmatically focused but
+      // prevents keyboard focus, so we don't want to set the value on elements
+      // that support keyboard focus by default.
+      if (node.getAttribute('tabIndex') == null && focusableElements[name] == null) {
+        node.setAttribute('tabIndex', '-1')
+      }
+      node.focus()
+    } catch (err) {
+      //
+    }
+  },
+
+  measure(node, callback) {
+    return measure(node, callback)
+  },
+
+  measureInWindow(node, callback) {
+    return measureInWindow(node, callback)
+  },
+
+  // note its flipped fail and success on purpose lol
+  async measureLayout(
+    node: HTMLElement,
+    relativeToNativeNode: HTMLElement | undefined,
+    onFail: () => void,
+    onSuccess: (x: number, y: number, width: number, height: number) => void
+  ) {
+    return measureLayout(node, relativeToNativeNode, onSuccess)
+  },
+
+  configureNextLayoutAnimation(config, onAnimationDidEnd) {
+    onAnimationDidEnd()
+  },
+
+  // mocks
+  setLayoutAnimationEnabledExperimental() {},
+}

package/src/modules/canUseDOM.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+
+export const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)

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

@@ -0,0 +1,138 @@
+/**
+ * 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 createDOMProps from '..'
+
+const createProps = (props) => createDOMProps(null, props)
+
+describe('modules/createDOMProps', () => {
+  describe('focus-related accessibility attributes', () => {
+    test('with no accessibility props', () => {
+      expect(createProps({})).toEqual({})
+    })
+
+    describe('"accessibilityRole" of "link"', () => {
+      const accessibilityRole = 'link'
+
+      test('default case', () => {
+        expect(createProps({ accessibilityRole })).toEqual(
+          expect.not.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "focusable" is true', () => {
+        expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+          expect.not.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "focusable" is false', () => {
+        expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+          expect.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "accessibilityDisabled" is true', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+          expect.objectContaining({ 'aria-disabled': true })
+        )
+      })
+
+      test('when "disabled" is false', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+          expect.not.objectContaining({ tabIndex: '-1' })
+        )
+      })
+    })
+
+    const testFocusableRole = (accessibilityRole) => {
+      test('default case', () => {
+        expect(createProps({ accessibilityRole })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+
+      test('when "focusable" is true', () => {
+        expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+
+      test('when "focusable" is false', () => {
+        expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+          expect.objectContaining({ tabIndex: '-1' })
+        )
+      })
+
+      test('when "accessibilityDisabled" is true', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+          expect.objectContaining({ 'aria-disabled': true })
+        )
+      })
+
+      test('when "accessibilityDisabled" is false', () => {
+        expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+    }
+
+    describe('"accessibilityRole" of "button"', () => {
+      testFocusableRole('button')
+    })
+
+    describe('with unfocusable accessibilityRole', () => {
+      test('when "focusable" is true', () => {
+        expect(createProps({ focusable: true })).toEqual(
+          expect.objectContaining({ tabIndex: '0' })
+        )
+      })
+
+      test('when "focusable" is false', () => {
+        expect(createProps({ focusable: false })).toEqual(
+          expect.objectContaining({ tabIndex: '-1' })
+        )
+      })
+    })
+  })
+
+  test('prop "accessibilityLabel" becomes "aria-label"', () => {
+    const accessibilityLabel = 'accessibilityLabel'
+    const props = createProps({ accessibilityLabel })
+    expect(props['aria-label']).toEqual(accessibilityLabel)
+  })
+
+  test('prop "accessibilityLiveRegion" becomes "aria-live"', () => {
+    const accessibilityLiveRegion = 'none'
+    const props = createProps({ accessibilityLiveRegion })
+    expect(props['aria-live']).toEqual('off')
+  })
+
+  test('prop "accessibilityRole" becomes "role"', () => {
+    const accessibilityRole = 'button'
+    const props = createProps({ accessibilityRole })
+    expect(props.role).toEqual('button')
+  })
+
+  test('prop "className" is preserved', () => {
+    const className = 'external-class-name'
+    const props = createProps({ className })
+    expect(props.className).toEqual(className)
+  })
+
+  test('prop "nativeID" becomes "id"', () => {
+    const nativeID = 'Example.nativeID'
+    const props = createProps({ nativeID })
+    expect(props.id).toEqual(nativeID)
+  })
+
+  test('prop "testID" becomes "data-testid"', () => {
+    const testID = 'Example.testID'
+    const props = createProps({ testID })
+    expect(props['data-testid']).toEqual(testID)
+  })
+})