[change] update React and Touchables

Update to React@15.4. The 'EventConstants' module no longer exports a key-mirror, which was preventing the 'ResponderEventPlugin' from working as it did with React@15.3. Close #255
necolas · Dec 27, 2016 · 44ecbc0 · 44ecbc0
1 parent 4cf4905
commit 44ecbc0
Show file tree

Hide file tree

Showing 22 changed files with 263 additions and 295 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "deep-assign": "^2.0.0",
     "fbjs": "^0.8.4",
     "inline-style-prefixer": "^2.0.1",
-    "react-dom": "~15.3.2",
+    "react-dom": "~15.4.1",
     "react-textarea-autosize": "^4.0.4",
     "react-timer-mixin": "^0.13.3"
   },
@@ -49,15 +49,15 @@
     "file-loader": "^0.9.0",
     "jest": "^16.0.2",
     "node-libs-browser": "^0.5.3",
-    "react": "~15.3.2",
-    "react-addons-test-utils": "~15.3.2",
-    "react-test-renderer": "~15.3.2",
+    "react": "~15.4.1",
+    "react-addons-test-utils": "~15.4.1",
+    "react-test-renderer": "~15.4.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-bundle-analyzer": "^1.5.3"
   },
   "peerDependencies": {
-    "react": "~15.3.2"
+    "react": "~15.4.1"
   },
   "author": "Nicolas Gallagher",
   "license": "BSD-3-Clause",

diff --git a/src/apis/AppRegistry/index.js b/src/apis/AppRegistry/index.js
@@ -8,7 +8,7 @@
 
 import { Component } from 'react';
 import invariant from 'fbjs/lib/invariant';
-import { unmountComponentAtNode } from 'react/lib/ReactMount';
+import { unmountComponentAtNode } from 'react-dom/lib/ReactMount';
 import renderApplication, { getApplication } from './renderApplication';
 
 const emptyObject = {};

diff --git a/src/apis/AppRegistry/renderApplication.js b/src/apis/AppRegistry/renderApplication.js
@@ -7,7 +7,7 @@
  */
 
 import invariant from 'fbjs/lib/invariant';
-import { render } from 'react/lib/ReactMount';
+import { render } from 'react-dom/lib/ReactMount';
 import ReactNativeApp from './ReactNativeApp';
 import StyleSheet from '../../apis/StyleSheet';
 import React, { Component } from 'react';

diff --git a/src/apis/PanResponder/index.js b/src/apis/PanResponder/index.js
@@ -6,7 +6,7 @@
 
 "use strict";
 
-var TouchHistoryMath = require('react/lib/TouchHistoryMath');
+var TouchHistoryMath = require('react-dom/lib/TouchHistoryMath');
 
 var currentCentroidXOfTouchesChangedAfter =
   TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;

diff --git a/src/apis/StyleSheet/StyleSheetValidation.js b/src/apis/StyleSheet/StyleSheetValidation.js
@@ -9,8 +9,8 @@
 
 import { PropTypes } from 'react'
 import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes'
-import ReactPropTypeLocations from 'react/lib/ReactPropTypeLocations'
-import ReactPropTypesSecret from 'react/lib/ReactPropTypesSecret'
+import ReactPropTypeLocations from 'react-dom/lib/ReactPropTypeLocations'
+import ReactPropTypesSecret from 'react-dom/lib/ReactPropTypesSecret'
 import TextStylePropTypes from '../../components/Text/TextStylePropTypes'
 import ViewStylePropTypes from '../../components/View/ViewStylePropTypes'
 import warning from 'fbjs/lib/warning'

diff --git a/src/apis/UIManager/index.js b/src/apis/UIManager/index.js
@@ -1,5 +1,5 @@
 import createReactStyleObject from '../StyleSheet/createReactStyleObject';
-import CSSPropertyOperations from 'react/lib/CSSPropertyOperations';
+import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations';
 
 const _measureLayout = (node, relativeToNativeNode, callback) => {
   const relativeNode = relativeToNativeNode || node.parentNode;

diff --git a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap
@@ -67,7 +67,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#939393",
         "borderBottomLeftRadius": "10px",
@@ -112,7 +112,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "90%",
       }
     } />
@@ -130,7 +130,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
         "WebkitTransform": "translateX(0%)",
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#FAFAFA",
@@ -176,7 +176,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "transform": "translateX(0%)",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "20px",
       }
     } />
@@ -281,7 +281,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#D5D5D5",
         "borderBottomLeftRadius": "10px",
@@ -326,7 +326,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "90%",
       }
     } />
@@ -344,7 +344,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
         "WebkitTransform": "translateX(0%)",
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#BDBDBD",
@@ -390,7 +390,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "transform": "translateX(0%)",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "20px",
       }
     } />
@@ -495,7 +495,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#939393",
         "borderBottomLeftRadius": "10px",
@@ -540,7 +540,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "90%",
       }
     } />
@@ -558,7 +558,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
         "WebkitTransform": "translateX(0%)",
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#FAFAFA",
@@ -604,7 +604,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "transform": "translateX(0%)",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "20px",
       }
     } />
@@ -709,7 +709,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#A3D3CF",
         "borderBottomLeftRadius": "10px",
@@ -754,7 +754,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "90%",
       }
     } />
@@ -772,7 +772,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
         "WebkitTransform": "translateX(100%)",
-        "WebkitTransition": "0.1s",
+        "WebkitTransitionDuration": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#009688",
@@ -818,7 +818,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "textAlign": "inherit",
         "textDecoration": "none",
         "transform": "translateX(100%)",
-        "transition": "0.1s",
+        "transitionDuration": "0.1s",
         "width": "20px",
       }
     } />

diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js
@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     height: '70%',
     margin: 'auto',
-    transition: '0.1s',
+    transitionDuration: '0.1s',
     width: '90%'
   },
   disabledTrack: {
@@ -162,7 +162,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
     borderRadius: '100%',
     boxShadow: thumbDefaultBoxShadow,
-    transition: '0.1s'
+    transitionDuration: '0.1s'
   },
   disabledThumb: {
     backgroundColor: '#BDBDBD'

diff --git a/src/components/Touchable/BoundingDimensions.js b/src/components/Touchable/BoundingDimensions.js
@@ -6,7 +6,7 @@
 
 'use strict';
 
-var PooledClass = require('react/lib/PooledClass');
+var PooledClass = require('react-dom/lib/PooledClass');
 
 var twoArgumentPooler = PooledClass.twoArgumentPooler;
 

diff --git a/src/components/Touchable/Position.js b/src/components/Touchable/Position.js
@@ -6,7 +6,7 @@
 
 'use strict';
 
-var PooledClass = require('react/lib/PooledClass');
+var PooledClass = require('react-dom/lib/PooledClass');
 
 var twoArgumentPooler = PooledClass.twoArgumentPooler;
 

diff --git a/src/components/Touchable/Touchable.js b/src/components/Touchable/Touchable.js
@@ -566,13 +566,13 @@ var TouchableMixin = {
    * @sideeffects
    * @private
    */
-  _remeasureMetricsOnActivation: function(e) {
-    /* @edit begin */
-    UIManager.measure(
-      e.nativeEvent.target,
-      this._handleQueryLayout
-    );
-    /* @edit end */
+  _remeasureMetricsOnActivation: function() {
+    const tag = this.state.touchable.responderID;
+    if (tag == null) {
+      return;
+    }
+
+    UIManager.measure(tag, this._handleQueryLayout);
   },
 
   _handleQueryLayout: function(l, t, w, h, globalX, globalY) {
@@ -684,24 +684,17 @@ var TouchableMixin = {
     }
 
     if (!IsActive[curState] && IsActive[nextState]) {
-      this._remeasureMetricsOnActivation(e);
+      this._remeasureMetricsOnActivation();
     }
 
     if (IsPressingIn[curState] && signal === Signals.LONG_PRESS_DETECTED) {
       this.touchableHandleLongPress && this.touchableHandleLongPress(e);
     }
 
     if (newIsHighlight && !curIsHighlight) {
-      this._savePressInLocation(e);
-      this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
-    } else if (!newIsHighlight && curIsHighlight && this.touchableHandleActivePressOut) {
-      if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
-        this.pressOutDelayTimeout = setTimeout(() => {
-          this.touchableHandleActivePressOut(e);
-        }, this.touchableGetPressOutDelayMS());
-      } else {
-        this.touchableHandleActivePressOut(e);
-      }
+      this._startHighlight(e);
+    } else if (!newIsHighlight && curIsHighlight) {
+      this._endHighlight(e);
     }
 
     if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {
@@ -714,49 +707,40 @@ var TouchableMixin = {
 
       var shouldInvokePress =  !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
       if (shouldInvokePress && this.touchableHandlePress) {
+        if (!newIsHighlight && !curIsHighlight) {
+          // we never highlighted because of delay, but we should highlight now
+          this._startHighlight(e);
+          this._endHighlight(e);
+        }
         this.touchableHandlePress(e);
       }
     }
 
     this.touchableDelayTimeout && clearTimeout(this.touchableDelayTimeout);
     this.touchableDelayTimeout = null;
-  }
+  },
+
+  _startHighlight: function(e) {
+    this._savePressInLocation(e);
+    this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
+  },
+
+  _endHighlight: function(e) {
+    if (this.touchableHandleActivePressOut) {
+      if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
+        this.pressOutDelayTimeout = setTimeout(() => {
+          this.touchableHandleActivePressOut(e);
+        }, this.touchableGetPressOutDelayMS());
+      } else {
+        this.touchableHandleActivePressOut(e);
+      }
+    }
+  },
 
 };
 
 var Touchable = {
-  Mixin: TouchableMixin,
-  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
-  /**
-   * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
-   */
-  renderDebugView: ({color, hitSlop}) => {
-    if (!Touchable.TOUCH_TARGET_DEBUG) {
-      return null;
-    }
-    if (process.env.NODE_ENV === 'production') {
-      throw Error('Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!');
-    }
-    const debugHitSlopStyle = {};
-    hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
-    for (const key in hitSlop) {
-      debugHitSlopStyle[key] = -hitSlop[key];
-    }
-    const hexColor = '#' + ('00000000' + normalizeColor(color).toString(16)).substr(-8);
-    return (
-      <View
-        pointerEvents="none"
-        style={{
-          position: 'absolute',
-          borderColor: hexColor.slice(0, -2) + '55', // More opaque
-          borderWidth: 1,
-          borderStyle: 'dashed',
-          backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
-          ...debugHitSlopStyle
-        }}
-      />
-    );
-  }
+  Mixin: TouchableMixin
 };
 
 module.exports = Touchable;