From 7ef070195bbdec4d776d1fae8f98914fe2574d58 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 29 Jun 2020 10:58:34 -0700 Subject: [PATCH] [fix] setNativeProps and pointerEvent prop The pointerEvent prop is converted into a DOM style property and needs to be accounted for by setNativeProps. Close #1656 Fix #1655 --- .../src/exports/Picker/index.js | 10 ++++++---- .../react-native-web/src/exports/Text/index.js | 3 ++- .../src/exports/TextInput/index.js | 3 ++- .../react-native-web/src/exports/View/index.js | 3 ++- .../src/hooks/usePlatformMethods.js | 17 +++++++---------- 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/react-native-web/src/exports/Picker/index.js b/packages/react-native-web/src/exports/Picker/index.js index 8f3e7977..a3d7c4c9 100644 --- a/packages/react-native-web/src/exports/Picker/index.js +++ b/packages/react-native-web/src/exports/Picker/index.js @@ -54,8 +54,6 @@ const Picker = forwardRef((props, forwardedRef) => { } }); - usePlatformMethods(hostRef, [], style); - function handleChange(e: Object) { const { selectedIndex, value } = e.target; if (onValueChange) { @@ -63,7 +61,7 @@ const Picker = forwardRef((props, forwardedRef) => { } } - return createElement('select', { + const supportedProps = { children, disabled: enabled === false ? true : undefined, onChange: handleChange, @@ -72,7 +70,11 @@ const Picker = forwardRef((props, forwardedRef) => { testID, value: selectedValue, ...other - }); + }; + + usePlatformMethods(hostRef, supportedProps); + + return createElement('select', supportedProps); }); // $FlowFixMe diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index 02c396b4..29647d97 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -121,7 +121,6 @@ const Text = forwardRef((props, forwardedRef) => { ]; useElementLayout(hostRef, onLayout); - usePlatformMethods(hostRef, classList, style); useResponderEvents(hostRef, { onMoveShouldSetResponder, onMoveShouldSetResponderCapture, @@ -160,6 +159,8 @@ const Text = forwardRef((props, forwardedRef) => { supportedProps.ref = setRef; supportedProps.style = style; + usePlatformMethods(hostRef, supportedProps); + const element = createElement(component, supportedProps); return hasTextAncestor ? ( diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 9c68a7d5..83802792 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -330,7 +330,6 @@ const TextInput = forwardRef((props, forwardedRef) => { ); useElementLayout(hostRef, onLayout); - usePlatformMethods(hostRef, classList, style); useResponderEvents(hostRef, { onMoveShouldSetResponder, onMoveShouldSetResponderCapture, @@ -370,6 +369,8 @@ const TextInput = forwardRef((props, forwardedRef) => { supportedProps.style = style; supportedProps.type = multiline ? undefined : type; + usePlatformMethods(hostRef, supportedProps); + return createElement(component, supportedProps); }); diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js index 1db96aae..045f8eb8 100644 --- a/packages/react-native-web/src/exports/View/index.js +++ b/packages/react-native-web/src/exports/View/index.js @@ -116,7 +116,6 @@ const View = forwardRef((props, forwardedRef) => { ); useElementLayout(hostRef, onLayout); - usePlatformMethods(hostRef, classList, style); useResponderEvents(hostRef, { onMoveShouldSetResponder, onMoveShouldSetResponderCapture, @@ -141,6 +140,8 @@ const View = forwardRef((props, forwardedRef) => { supportedProps.ref = setRef; supportedProps.style = style; + usePlatformMethods(hostRef, supportedProps); + return createElement('div', supportedProps); }); diff --git a/packages/react-native-web/src/hooks/usePlatformMethods.js b/packages/react-native-web/src/hooks/usePlatformMethods.js index 4d975329..f98094ef 100644 --- a/packages/react-native-web/src/hooks/usePlatformMethods.js +++ b/packages/react-native-web/src/hooks/usePlatformMethods.js @@ -7,18 +7,18 @@ * @flow */ -import type { GenericStyleProp } from '../types'; import type { ElementRef } from 'react'; import UIManager from '../exports/UIManager'; import createDOMProps from '../modules/createDOMProps'; import { useImperativeHandle, useRef } from 'react'; -function setNativeProps(node, nativeProps, classList, style, previousStyleRef) { +function setNativeProps(node, nativeProps, classList, pointerEvents, style, previousStyleRef) { if (node != null && nativeProps) { const domProps = createDOMProps(null, { + pointerEvents, ...nativeProps, - classList: [nativeProps.className, classList], + classList: [classList, nativeProps.className], style: [style, nativeProps.style] }); @@ -45,12 +45,9 @@ function setNativeProps(node, nativeProps, classList, style, previousStyleRef) { * Adds non-standard methods to the hode element. This is temporarily until an * API like `ReactNative.measure(hostRef, callback)` is added to React Native. */ -export default function usePlatformMethods( - hostRef: ElementRef, - classList: Array, - style: GenericStyleProp -) { +export default function usePlatformMethods(hostRef: ElementRef, props: Object) { const previousStyleRef = useRef(null); + const { classList, style, pointerEvents } = props; useImperativeHandle( hostRef, @@ -61,9 +58,9 @@ export default function usePlatformMethods( UIManager.measureLayout(hostNode, relativeToNode, failure, success); hostNode.measureInWindow = callback => UIManager.measureInWindow(hostNode, callback); hostNode.setNativeProps = nativeProps => - setNativeProps(hostNode, nativeProps, classList, style, previousStyleRef); + setNativeProps(hostNode, nativeProps, classList, pointerEvents, style, previousStyleRef); return hostNode; }, - [classList, hostRef, style] + [hostRef, classList, pointerEvents, style] ); }