feat(reactNativeWeb): support in Downshift and hooks (#1489)

Author: silviuaavram

package.json

@@ -9,9 +9,10 @@
   "sideEffects": false,
   "browserslist": [],
   "scripts": {
-    "build": "npm run build:web --silent && npm run build:native --silent",
+    "build": "npm run build:web --silent && npm run build:native --silent && npm run build:nativeWeb --silent",
     "build:web": "kcd-scripts build --bundle --p-react --no-clean --size-snapshot",
     "build:native": "cross-env BUILD_REACT_NATIVE=true BUILD_FILENAME_SUFFIX=.native kcd-scripts build --bundle cjs --no-clean",
+    "build:nativeWeb": "cross-env BUILD_REACT_NATIVE_WEB=true BUILD_FILENAME_SUFFIX=.nativeweb kcd-scripts build --bundle cjs --no-clean",
     "lint": "kcd-scripts lint",
     "test": "kcd-scripts test",
     "test:cover": "kcd-scripts test --coverage",

src/downshift.js

@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types'
 import {Component, cloneElement} from 'react'
 import {isForwardRef} from 'react-is'
-import {isPreact, isReactNative} from './is.macro'
+import {isPreact, isReactNative, isReactNativeWeb} from './is.macro'
 import setA11yStatus from './set-a11y-status'
 import * as stateChangeTypes from './stateChangeTypes'
 import {
@@ -682,17 +682,21 @@ class Downshift extends Component {
     ...rest
   } = {}) => {
     const {isOpen} = this.getState()
-    const enabledEventHandlers = isReactNative
-      ? /* istanbul ignore next (react-native) */
-        {
-          onPress: callAllEventHandlers(onPress, this.buttonHandleClick),
-        }
-      : {
-          onClick: callAllEventHandlers(onClick, this.buttonHandleClick),
-          onKeyDown: callAllEventHandlers(onKeyDown, this.buttonHandleKeyDown),
-          onKeyUp: callAllEventHandlers(onKeyUp, this.buttonHandleKeyUp),
-          onBlur: callAllEventHandlers(onBlur, this.buttonHandleBlur),
-        }
+    const enabledEventHandlers =
+      isReactNative || isReactNativeWeb
+        ? /* istanbul ignore next (react-native) */
+          {
+            onPress: callAllEventHandlers(onPress, this.buttonHandleClick),
+          }
+        : {
+            onClick: callAllEventHandlers(onClick, this.buttonHandleClick),
+            onKeyDown: callAllEventHandlers(
+              onKeyDown,
+              this.buttonHandleKeyDown,
+            ),
+            onKeyUp: callAllEventHandlers(onKeyUp, this.buttonHandleKeyUp),
+            onBlur: callAllEventHandlers(onBlur, this.buttonHandleBlur),
+          }
     const eventHandlers = rest.disabled ? {} : enabledEventHandlers
     return {
       type: 'button',
@@ -844,7 +848,7 @@ class Downshift extends Component {
     this.internalSetState({
       type: stateChangeTypes.changeInput,
       isOpen: true,
-      inputValue: isReactNative
+      inputValue: isReactNative || isReactNativeWeb
         ? /* istanbul ignore next (react-native) */ event.nativeEvent.text
         : event.target.value,
       highlightedIndex: this.props.defaultHighlightedIndex,
@@ -912,7 +916,7 @@ class Downshift extends Component {
       this.items[index] = item
     }
 
-    const onSelectKey = isReactNative
+    const onSelectKey = isReactNative || isReactNativeWeb
       ? /* istanbul ignore next (react-native) */ 'onPress'
       : 'onClick'
     const customClickHandler = isReactNative

src/hooks/useCombobox/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-statements */
 import {useRef, useEffect, useCallback, useMemo} from 'react'
-import {isPreact, isReactNative} from '../../is.macro'
+import {isPreact, isReactNative, isReactNativeWeb} from '../../is.macro'
 import {handleRefs, normalizeArrowKey, callAllEventHandlers} from '../../utils'
 import {
   useA11yMessageSetter,
@@ -303,7 +303,7 @@ function useCombobox(userProps = {}) {
         'Pass either item or index to getItemProps!',
       )
 
-      const onSelectKey = isReactNative
+      const onSelectKey = isReactNative || isReactNativeWeb
         ? /* istanbul ignore next (react-native) */ 'onPress'
         : 'onClick'
       const customClickHandler = isReactNative
@@ -371,7 +371,7 @@ function useCombobox(userProps = {}) {
         id: elementIds.toggleButtonId,
         tabIndex: -1,
         ...(!rest.disabled && {
-          ...(isReactNative
+          ...(isReactNative || isReactNativeWeb
             ? /* istanbul ignore next (react-native) */ {
                 onPress: callAllEventHandlers(onPress, toggleButtonHandleClick),
               }
@@ -411,7 +411,7 @@ function useCombobox(userProps = {}) {
       const inputHandleChange = event => {
         dispatch({
           type: stateChangeTypes.InputChange,
-          inputValue: isReactNative
+          inputValue: isReactNative || isReactNativeWeb
             ? /* istanbul ignore next (react-native) */ event.nativeEvent.text
             : event.target.value,
         })

src/hooks/useSelect/index.js

@@ -18,7 +18,7 @@ import {
   debounce,
   normalizeArrowKey,
 } from '../../utils'
-import {isReactNative} from '../../is.macro'
+import {isReactNative, isReactNativeWeb} from '../../is.macro'
 import downshiftSelectReducer from './reducer'
 import {validatePropTypes, defaultProps} from './utils'
 import * as stateChangeTypes from './stateChangeTypes'
@@ -407,7 +407,7 @@ function useSelect(userProps = {}) {
 
       if (!rest.disabled) {
         /* istanbul ignore if (react-native) */
-        if (isReactNative) {
+        if (isReactNative || isReactNativeWeb) {
           toggleProps.onPress = callAllEventHandlers(
             onPress,
             toggleButtonHandleClick,
@@ -496,7 +496,7 @@ function useSelect(userProps = {}) {
 
       if (!disabled) {
         /* istanbul ignore next (react-native) */
-        if (isReactNative) {
+        if (isReactNative || isReactNativeWeb) {
           itemProps.onPress = callAllEventHandlers(onPress, itemHandleClick)
         } else {
           itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick)

src/is.macro.js

@@ -3,6 +3,7 @@ const {createMacro, MacroError} = require('babel-plugin-macros')
 const importToEnvVar = {
   isPreact: 'BUILD_PREACT',
   isReactNative: 'BUILD_REACT_NATIVE',
+  isReactNativeWeb: 'BUILD_REACT_NATIVE_WEB',
 }
 
 const arrToStr = arr => arr.join(', ')