From 41eb2da33bafc450d5fcf03990d4dbeac5d5a5e6 Mon Sep 17 00:00:00 2001
From: Ignacio Olaciregui <ignacioola@gmail.com>
Date: Tue, 6 Nov 2018 14:30:28 -0800
Subject: [PATCH] Fix inline styles warning in Libraries (#22161)

Summary:
Fixes `react-native/no-inline-styles` eslint warnings in the `Libraries` module.
Pull Request resolved: https://github.com/facebook/react-native/pull/22161

Differential Revision: D12946899

Pulled By: TheSavior

fbshipit-source-id: c97ffa50dd90529dabf30a3d2cb09476acc568cb
---
 Libraries/Components/Touchable/Touchable.js | 25 ++++--
 Libraries/Experimental/WindowedListView.js  |  9 +--
 Libraries/Lists/VirtualizedList.js          | 88 +++++++++++++--------
 3 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index 8fc27be8882e63..e6b8fb19cc059b 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/Libraries/Components/Touchable/Touchable.js
@@ -14,6 +14,7 @@ const Platform = require('Platform');
 const Position = require('Position');
 const React = require('React');
 const ReactNative = require('ReactNative');
+const StyleSheet = require('StyleSheet');
 const TVEventHandler = require('TVEventHandler');
 const TouchEventUtils = require('fbjs/lib/TouchEventUtils');
 const UIManager = require('UIManager');
@@ -858,17 +859,25 @@ const Touchable = {
     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,
-        }}
+        style={[
+          styles.debug,
+          {
+            borderColor: hexColor.slice(0, -2) + '55', // More opaque
+            backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
+            ...debugHitSlopStyle,
+          },
+        ]}
       />
     );
   },
 };
 
+const styles = StyleSheet.create({
+  debug: {
+    position: 'absolute',
+    borderWidth: 1,
+    borderStyle: 'dashed',
+  },
+});
+
 module.exports = Touchable;
diff --git a/Libraries/Experimental/WindowedListView.js b/Libraries/Experimental/WindowedListView.js
index aefb8469386d42..8ce5b44c07b052 100644
--- a/Libraries/Experimental/WindowedListView.js
+++ b/Libraries/Experimental/WindowedListView.js
@@ -777,11 +777,7 @@ class CellRenderer extends React.Component<CellProps> {
     if (DEBUG) {
       infoLog('render cell ' + this.props.rowIndex);
       const Text = require('Text');
-      debug = (
-        <Text style={{backgroundColor: 'lightblue'}}>
-          Row: {this.props.rowIndex}
-        </Text>
-      );
+      debug = <Text style={styles.debug}>Row: {this.props.rowIndex}</Text>;
     }
     const style = this._includeInLayoutLatch ? styles.include : styles.remove;
     return (
@@ -819,6 +815,9 @@ const styles = StyleSheet.create({
     right: -removedXOffset,
     opacity: DEBUG ? 0.1 : 0,
   },
+  debug: {
+    backgroundColor: 'lightblue',
+  },
 });
 
 module.exports = WindowedListView;
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
index 89df0dab803a7a..9e10cbee414208 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -954,7 +954,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     );
     if (this.props.debug) {
       return (
-        <View style={{flex: 1}}>
+        <View style={styles.debug}>
           {ret}
           {this._renderDebugOverlay()}
         </View>
@@ -1194,47 +1194,41 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const windowLen = frameLast.offset + frameLast.length - windowTop;
     const visTop = this._scrollMetrics.offset;
     const visLen = this._scrollMetrics.visibleLength;
-    const baseStyle = {position: 'absolute', top: 0, right: 0};
+
     return (
-      <View
-        style={{
-          ...baseStyle,
-          bottom: 0,
-          width: 20,
-          borderColor: 'blue',
-          borderWidth: 1,
-        }}>
+      <View style={[styles.debugOverlayBase, styles.debugOverlay]}>
         {framesInLayout.map((f, ii) => (
           <View
             key={'f' + ii}
-            style={{
-              ...baseStyle,
-              left: 0,
-              top: f.offset * normalize,
-              height: f.length * normalize,
-              backgroundColor: 'orange',
-            }}
+            style={[
+              styles.debugOverlayBase,
+              styles.debugOverlayFrame,
+              {
+                top: f.offset * normalize,
+                height: f.length * normalize,
+              },
+            ]}
           />
         ))}
         <View
-          style={{
-            ...baseStyle,
-            left: 0,
-            top: windowTop * normalize,
-            height: windowLen * normalize,
-            borderColor: 'green',
-            borderWidth: 2,
-          }}
+          style={[
+            styles.debugOverlayBase,
+            styles.debugOverlayFrameLast,
+            {
+              top: windowTop * normalize,
+              height: windowLen * normalize,
+            },
+          ]}
         />
         <View
-          style={{
-            ...baseStyle,
-            left: 0,
-            top: visTop * normalize,
-            height: visLen * normalize,
-            borderColor: 'red',
-            borderWidth: 2,
-          }}
+          style={[
+            styles.debugOverlayBase,
+            styles.debugOverlayFrameVis,
+            {
+              top: visTop * normalize,
+              height: visLen * normalize,
+            },
+          ]}
         />
       </View>
     );
@@ -1785,6 +1779,34 @@ const styles = StyleSheet.create({
   horizontallyInverted: {
     transform: [{scaleX: -1}],
   },
+  debug: {
+    flex: 1,
+  },
+  debugOverlayBase: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  debugOverlay: {
+    bottom: 0,
+    width: 20,
+    borderColor: 'blue',
+    borderWidth: 1,
+  },
+  debugOverlayFrame: {
+    left: 0,
+    backgroundColor: 'orange',
+  },
+  debugOverlayFrameLast: {
+    left: 0,
+    borderColor: 'green',
+    borderWidth: 2,
+  },
+  debugOverlayFrameVis: {
+    left: 0,
+    borderColor: 'red',
+    borderWidth: 2,
+  },
 });
 
 module.exports = VirtualizedList;