[fix] only call 'getBoundingClientRect' if nativeEvent.location{X,Y} …

…is accessed Calculating the `location{X,Y}` values for events requires a call to `getBoundingClientRect`. To prevent unnecessary performance costs, these values are implemented as getters and will only make the DOM API call when accessed in application code. Close #1157
necolas · Nov 1, 2018 · 40c433c · 40c433c
1 parent 9888c2a
commit 40c433c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/packages/react-native-web/src/exports/Touchable/index.js b/packages/react-native-web/src/exports/Touchable/index.js
@@ -696,9 +696,16 @@ const TouchableMixin = {
     const touch = TouchEventUtils.extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
     const pageY = touch && touch.pageY;
-    const locationX = touch && touch.locationX;
-    const locationY = touch && touch.locationY;
-    this.pressInLocation = { pageX, pageY, locationX, locationY };
+    this.pressInLocation = {
+      pageX,
+      pageY,
+      get locationX() {
+        return touch && touch.locationX;
+      },
+      get locationY() {
+        return touch && touch.locationY;
+      }
+    };
   },
 
   _getDistanceBetweenPoints: function(aX: number, aY: number, bX: number, bY: number) {

diff --git a/packages/react-native-web/src/modules/normalizeNativeEvent/index.js b/packages/react-native-web/src/modules/normalizeNativeEvent/index.js
@@ -78,18 +78,23 @@ function normalizeTouchEvent(nativeEvent) {
     typeof nativeEvent.stopPropagation === 'function'
       ? nativeEvent.stopPropagation.bind(nativeEvent)
       : emptyFunction;
+  const singleChangedTouch = changedTouches[0];
 
   const event = {
     _normalized: true,
     bubbles: nativeEvent.bubbles,
     cancelable: nativeEvent.cancelable,
     changedTouches,
     defaultPrevented: nativeEvent.defaultPrevented,
-    identifier: undefined,
-    locationX: undefined,
-    locationY: undefined,
-    pageX: nativeEvent.pageX,
-    pageY: nativeEvent.pageY,
+    identifier: singleChangedTouch ? singleChangedTouch.identifier : undefined,
+    get locationX() {
+      return singleChangedTouch ? singleChangedTouch.locationX : undefined;
+    },
+    get locationY() {
+      return singleChangedTouch ? singleChangedTouch.locationY : undefined;
+    },
+    pageX: singleChangedTouch ? singleChangedTouch.pageX : nativeEvent.pageX,
+    pageY: singleChangedTouch ? singleChangedTouch.pageY : nativeEvent.pageY,
     preventDefault,
     stopImmediatePropagation,
     stopPropagation,
@@ -102,14 +107,6 @@ function normalizeTouchEvent(nativeEvent) {
     which: nativeEvent.which
   };
 
-  if (changedTouches[0]) {
-    event.identifier = changedTouches[0].identifier;
-    event.pageX = changedTouches[0].pageX;
-    event.pageY = changedTouches[0].pageY;
-    event.locationX = changedTouches[0].locationX;
-    event.locationY = changedTouches[0].locationY;
-  }
-
   return event;
 }
 
@@ -164,8 +161,12 @@ function normalizeMouseEvent(nativeEvent) {
     changedTouches: touches,
     defaultPrevented: nativeEvent.defaultPrevented,
     identifier: touches[0].identifier,
-    locationX: touches[0].locationX,
-    locationY: touches[0].locationY,
+    get locationX() {
+      return touches[0].locationX;
+    },
+    get locationY() {
+      return touches[0].locationY;
+    },
     pageX: nativeEvent.pageX,
     pageY: nativeEvent.pageY,
     preventDefault,