diff --git a/package.json b/package.json index f179435c..bf7dc03e 100644 --- a/package.json +++ b/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", diff --git a/src/downshift.js b/src/downshift.js index 945d2f4d..03166bd2 100644 --- a/src/downshift.js +++ b/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 diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js index 6ad7034f..b08ebd2d 100644 --- a/src/hooks/useCombobox/index.js +++ b/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, }) diff --git a/src/hooks/useSelect/index.js b/src/hooks/useSelect/index.js index b72d0056..1abe269b 100644 --- a/src/hooks/useSelect/index.js +++ b/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) diff --git a/src/is.macro.js b/src/is.macro.js index 4e98d3a4..3bce6699 100644 --- a/src/is.macro.js +++ b/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(', ')