From 22931664cfc313dbffaeb25acf9ab8d2ef782b88 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 11 May 2018 20:23:15 +0200 Subject: [PATCH] Make the change backwards compatible --- .../injectResponderEventPlugin/index.js | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js b/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js index 036635f3c1..900f586672 100644 --- a/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js +++ b/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js @@ -7,6 +7,44 @@ import ReactDOMUnstableNativeDependencies from 'react-dom/unstable-native-depend const { EventPluginHub } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; const { ResponderEventPlugin, ResponderTouchHistoryStore } = ReactDOMUnstableNativeDependencies; +// On older versions of React (< 16.4.0) we have to inject the dependencies in order for the plugin +// to work properly in the browser. +// This version still uses `top*` strings to identify the internal event names. +// https://github.com/facebook/react/pull/12629 +if (!ResponderEventPlugin.eventTypes.responderMove.dependencies){ + const topMouseDown = 'topMouseDown'; + const topMouseMove = 'topMouseMove'; + const topMouseUp = 'topMouseUp'; + const topScroll = 'topScroll'; + const topSelectionChange = 'topSelectionChange'; + const topTouchCancel = 'topTouchCancel'; + const topTouchEnd = 'topTouchEnd'; + const topTouchMove = 'topTouchMove'; + const topTouchStart = 'topTouchStart'; + + const endDependencies = [topTouchCancel, topTouchEnd, topMouseUp]; + const moveDependencies = [topTouchMove, topMouseMove]; + const startDependencies = [topTouchStart, topMouseDown]; + + /** + * Setup ResponderEventPlugin dependencies + */ + ResponderEventPlugin.eventTypes.responderMove.dependencies = moveDependencies; + ResponderEventPlugin.eventTypes.responderEnd.dependencies = endDependencies; + ResponderEventPlugin.eventTypes.responderStart.dependencies = startDependencies; + ResponderEventPlugin.eventTypes.responderRelease.dependencies = endDependencies; + ResponderEventPlugin.eventTypes.responderTerminationRequest.dependencies = []; + ResponderEventPlugin.eventTypes.responderGrant.dependencies = []; + ResponderEventPlugin.eventTypes.responderReject.dependencies = []; + ResponderEventPlugin.eventTypes.responderTerminate.dependencies = []; + ResponderEventPlugin.eventTypes.moveShouldSetResponder.dependencies = moveDependencies; + ResponderEventPlugin.eventTypes.selectionChangeShouldSetResponder.dependencies = [ + topSelectionChange + ]; + ResponderEventPlugin.eventTypes.scrollShouldSetResponder.dependencies = [topScroll]; + ResponderEventPlugin.eventTypes.startShouldSetResponder.dependencies = startDependencies; +} + const originalExtractEvents = ResponderEventPlugin.extractEvents; ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nativeEventTarget) => { const hasActiveTouches = ResponderTouchHistoryStore.touchHistory.numberActiveTouches > 0;