From 2648f47a4edd38433f48f56267f8ab0794404e67 Mon Sep 17 00:00:00 2001
From: nd-02110114 <nd.12021218@gmail.com>
Date: Tue, 30 Oct 2018 14:22:46 -0700
Subject: [PATCH] Remove var in RNTester (#22015)

Summary:
I removed `var` in RNTester.

- [x] npm run prettier
- [x] npm run flow-check-ios
- [x] npm run flow-check-android

[GENERAL] [ENHANCEMENT] [RNTester] - remove `var`
Pull Request resolved: https://github.com/facebook/react-native/pull/22015

Differential Revision: D12843132

Pulled By: TheSavior

fbshipit-source-id: ef835b25bc078fc870127946d013e01e34672b1b
---
 RNTester/js/TextInputExample.android.js      | 46 ++++++++++++--------
 RNTester/js/TextInputExample.ios.js          | 34 +++++++--------
 RNTester/js/TimePickerAndroidExample.js      | 14 +++---
 RNTester/js/TimerExample.js                  | 21 ++++-----
 RNTester/js/ToastAndroidExample.android.js   | 12 ++---
 RNTester/js/ToolbarAndroidExample.android.js | 20 ++++-----
 RNTester/js/TouchableExample.js              | 26 ++++++-----
 RNTester/js/TransformExample.js              |  8 ++--
 RNTester/js/TransparentHitTestExample.js     |  6 +--
 9 files changed, 99 insertions(+), 88 deletions(-)

diff --git a/RNTester/js/TextInputExample.android.js b/RNTester/js/TextInputExample.android.js
index 882c343e8..d8c26ecaa 100644
--- a/RNTester/js/TextInputExample.android.js
+++ b/RNTester/js/TextInputExample.android.js
@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Text, TextInput, View, StyleSheet, Slider, Switch} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Text, TextInput, View, StyleSheet, Slider, Switch} = ReactNative;
 
 class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -80,9 +80,9 @@ class RewriteExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
     this.state = {text: ''};
   }
   render() {
-    var limit = 20;
-    var remainder = limit - this.state.text.length;
-    var remainderColor = remainder > 5 ? 'blue' : 'red';
+    const limit = 20;
+    const remainder = limit - this.state.text.length;
+    const remainderColor = remainder > 5 ? 'blue' : 'red';
     return (
       /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
        * when making Flow check .android.js files. */
@@ -273,7 +273,7 @@ class SelectionExample extends React.Component<
   }
 
   getRandomPosition() {
-    var length = this.state.value.length;
+    const length = this.state.value.length;
     return Math.round(Math.random() * length);
   }
 
@@ -283,7 +283,10 @@ class SelectionExample extends React.Component<
   }
 
   selectRandom() {
-    var positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
+    const positions = [
+      this.getRandomPosition(),
+      this.getRandomPosition(),
+    ].sort();
     this.select(...positions);
   }
 
@@ -296,7 +299,7 @@ class SelectionExample extends React.Component<
   }
 
   render() {
-    var length = this.state.value.length;
+    const length = this.state.value.length;
 
     return (
       <View>
@@ -358,7 +361,7 @@ class AutogrowingTextInputExample extends React.Component<{}> {
   render() {
     /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
      * when making Flow check .android.js files. */
-    var {style, multiline, ...props} = this.props;
+    const {style, multiline, ...props} = this.props;
     return (
       <View>
         <Text>Width:</Text>
@@ -410,7 +413,7 @@ class AutogrowingTextInputExample extends React.Component<{}> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   multiline: {
     height: 60,
     fontSize: 16,
@@ -458,8 +461,8 @@ exports.examples = [
   {
     title: 'Auto-capitalize',
     render: function() {
-      var autoCapitalizeTypes = ['none', 'sentences', 'words', 'characters'];
-      var examples = autoCapitalizeTypes.map(type => {
+      const autoCapitalizeTypes = ['none', 'sentences', 'words', 'characters'];
+      const examples = autoCapitalizeTypes.map(type => {
         return (
           <TextInput
             key={type}
@@ -494,8 +497,13 @@ exports.examples = [
   {
     title: 'Keyboard types',
     render: function() {
-      var keyboardTypes = ['default', 'email-address', 'numeric', 'phone-pad'];
-      var examples = keyboardTypes.map(type => {
+      const keyboardTypes = [
+        'default',
+        'email-address',
+        'numeric',
+        'phone-pad',
+      ];
+      const examples = keyboardTypes.map(type => {
         return (
           <TextInput
             key={type}
@@ -763,7 +771,7 @@ exports.examples = [
   {
     title: 'Return key',
     render: function() {
-      var returnKeyTypes = [
+      const returnKeyTypes = [
         'none',
         'go',
         'search',
@@ -772,8 +780,8 @@ exports.examples = [
         'previous',
         'next',
       ];
-      var returnKeyLabels = ['Compile', 'React Native'];
-      var examples = returnKeyTypes.map(type => {
+      const returnKeyLabels = ['Compile', 'React Native'];
+      const examples = returnKeyTypes.map(type => {
         return (
           <TextInput
             key={type}
@@ -783,7 +791,7 @@ exports.examples = [
           />
         );
       });
-      var types = returnKeyLabels.map(type => {
+      const types = returnKeyLabels.map(type => {
         return (
           <TextInput
             key={type}
diff --git a/RNTester/js/TextInputExample.ios.js b/RNTester/js/TextInputExample.ios.js
index 88eb0dc01..d2654924c 100644
--- a/RNTester/js/TextInputExample.ios.js
+++ b/RNTester/js/TextInputExample.ios.js
@@ -12,9 +12,9 @@
 
 const Button = require('Button');
 const InputAccessoryView = require('InputAccessoryView');
-var React = require('react');
-var ReactNative = require('react-native');
-var {Text, TextInput, View, StyleSheet, Slider, Switch} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Text, TextInput, View, StyleSheet, Slider, Switch} = ReactNative;
 
 class WithLabel extends React.Component<$FlowFixMeProps> {
   render() {
@@ -126,9 +126,9 @@ class RewriteExample extends React.Component<$FlowFixMeProps, any> {
     this.state = {text: ''};
   }
   render() {
-    var limit = 20;
-    var remainder = limit - this.state.text.length;
-    var remainderColor = remainder > 5 ? 'blue' : 'red';
+    const limit = 20;
+    const remainder = limit - this.state.text.length;
+    const remainderColor = remainder > 5 ? 'blue' : 'red';
     return (
       <View style={styles.rewriteContainer}>
         <TextInput
@@ -356,7 +356,7 @@ class SelectionExample extends React.Component<
   }
 
   getRandomPosition() {
-    var length = this.state.value.length;
+    const length = this.state.value.length;
     return Math.round(Math.random() * length);
   }
 
@@ -366,7 +366,7 @@ class SelectionExample extends React.Component<
   }
 
   selectRandom() {
-    var positions = [this.getRandomPosition(), this.getRandomPosition()].sort(
+    const positions = [this.getRandomPosition(), this.getRandomPosition()].sort(
       (a, b) => a - b,
     );
     this.select(...positions);
@@ -381,7 +381,7 @@ class SelectionExample extends React.Component<
   }
 
   render() {
-    var length = this.state.value.length;
+    const length = this.state.value.length;
 
     return (
       <View>
@@ -436,7 +436,7 @@ class AutogrowingTextInputExample extends React.Component<
   }
 
   render() {
-    var {style, multiline, ...props} = this.props;
+    const {style, multiline, ...props} = this.props;
     return (
       <View>
         <Text>Width:</Text>
@@ -471,7 +471,7 @@ class AutogrowingTextInputExample extends React.Component<
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   page: {
     paddingBottom: 300,
   },
@@ -643,7 +643,7 @@ exports.examples = [
   {
     title: 'Keyboard types',
     render: function() {
-      var keyboardTypes = [
+      const keyboardTypes = [
         'default',
         'ascii-capable',
         'numbers-and-punctuation',
@@ -657,7 +657,7 @@ exports.examples = [
         'web-search',
         'numeric',
       ];
-      var examples = keyboardTypes.map(type => {
+      const examples = keyboardTypes.map(type => {
         return (
           <WithLabel key={type} label={type}>
             <TextInput keyboardType={type} style={styles.default} />
@@ -670,8 +670,8 @@ exports.examples = [
   {
     title: 'Keyboard appearance',
     render: function() {
-      var keyboardAppearance = ['default', 'light', 'dark'];
-      var examples = keyboardAppearance.map(type => {
+      const keyboardAppearance = ['default', 'light', 'dark'];
+      const examples = keyboardAppearance.map(type => {
         return (
           <WithLabel key={type} label={type}>
             <TextInput keyboardAppearance={type} style={styles.default} />
@@ -684,7 +684,7 @@ exports.examples = [
   {
     title: 'Return key types',
     render: function() {
-      var returnKeyTypes = [
+      const returnKeyTypes = [
         'default',
         'go',
         'google',
@@ -697,7 +697,7 @@ exports.examples = [
         'done',
         'emergency-call',
       ];
-      var examples = returnKeyTypes.map(type => {
+      const examples = returnKeyTypes.map(type => {
         return (
           <WithLabel key={type} label={type}>
             <TextInput returnKeyType={type} style={styles.default} />
diff --git a/RNTester/js/TimePickerAndroidExample.js b/RNTester/js/TimePickerAndroidExample.js
index 76232ecf8..e2b56d9dc 100644
--- a/RNTester/js/TimePickerAndroidExample.js
+++ b/RNTester/js/TimePickerAndroidExample.js
@@ -9,17 +9,17 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   TimePickerAndroid,
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
 } = ReactNative;
 
-var RNTesterBlock = require('./RNTesterBlock');
-var RNTesterPage = require('./RNTesterPage');
+const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterPage = require('./RNTesterPage');
 
 class TimePickerAndroidExample extends React.Component {
   static title = 'TimePickerAndroid';
@@ -39,7 +39,7 @@ class TimePickerAndroidExample extends React.Component {
   showPicker = async (stateKey, options) => {
     try {
       const {action, minute, hour} = await TimePickerAndroid.open(options);
-      var newState = {};
+      const newState = {};
       if (action === TimePickerAndroid.timeSetAction) {
         newState[stateKey + 'Text'] = _formatTime(hour, minute);
         newState[stateKey + 'Hour'] = hour;
@@ -111,7 +111,7 @@ function _formatTime(hour, minute) {
   return hour + ':' + (minute < 10 ? '0' + minute : minute);
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   text: {
     color: 'black',
   },
diff --git a/RNTester/js/TimerExample.js b/RNTester/js/TimerExample.js
index 023b2decf..f1be0ece8 100644
--- a/RNTester/js/TimerExample.js
+++ b/RNTester/js/TimerExample.js
@@ -10,11 +10,11 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {AlertIOS, Platform, ToastAndroid, Text, View} = ReactNative;
-var RNTesterButton = require('./RNTesterButton');
-var performanceNow = require('fbjs/lib/performanceNow');
+const React = require('react');
+const ReactNative = require('react-native');
+const {AlertIOS, Platform, ToastAndroid, Text, View} = ReactNative;
+const RNTesterButton = require('./RNTesterButton');
+const performanceNow = require('fbjs/lib/performanceNow');
 
 function burnCPU(milliseconds) {
   const start = performanceNow();
@@ -153,7 +153,8 @@ class TimerTester extends React.Component<TimerTesterProps> {
   _timerFn: ?() => any = null;
 
   render() {
-    var args = 'fn' + (this.props.dt !== undefined ? ', ' + this.props.dt : '');
+    const args =
+      'fn' + (this.props.dt !== undefined ? ', ' + this.props.dt : '');
     return (
       <RNTesterButton onPress={this._run}>
         Measure: {this.props.type}({args}) - {this._ii || 0}
@@ -185,7 +186,7 @@ class TimerTester extends React.Component<TimerTesterProps> {
 
   _run = () => {
     if (!this._start) {
-      var d = new Date();
+      const d = new Date();
       this._start = d.getTime();
       this._iters = 100;
       this._ii = 0;
@@ -214,9 +215,9 @@ class TimerTester extends React.Component<TimerTesterProps> {
       }
     }
     if (this._ii >= this._iters && this._intervalId == null) {
-      var d = new Date();
-      var e = d.getTime() - this._start;
-      var msg =
+      const d = new Date();
+      const e = d.getTime() - this._start;
+      const msg =
         'Finished ' +
         this._ii +
         ' ' +
diff --git a/RNTester/js/ToastAndroidExample.android.js b/RNTester/js/ToastAndroidExample.android.js
index fb440f736..7894ba0c3 100644
--- a/RNTester/js/ToastAndroidExample.android.js
+++ b/RNTester/js/ToastAndroidExample.android.js
@@ -10,12 +10,12 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, ToastAndroid, TouchableWithoutFeedback} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, Text, ToastAndroid, TouchableWithoutFeedback} = ReactNative;
 
-var RNTesterBlock = require('RNTesterBlock');
-var RNTesterPage = require('RNTesterPage');
+const RNTesterBlock = require('RNTesterBlock');
+const RNTesterPage = require('RNTesterPage');
 
 class ToastExample extends React.Component<{}, $FlowFixMeState> {
   static title = 'Toast Example';
@@ -117,7 +117,7 @@ class ToastExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   text: {
     color: 'black',
   },
diff --git a/RNTester/js/ToolbarAndroidExample.android.js b/RNTester/js/ToolbarAndroidExample.android.js
index 8c39831e6..4e1c5338e 100644
--- a/RNTester/js/ToolbarAndroidExample.android.js
+++ b/RNTester/js/ToolbarAndroidExample.android.js
@@ -10,16 +10,16 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 
-var nativeImageSource = require('nativeImageSource');
-var {StyleSheet, Text, View} = ReactNative;
-var RNTesterBlock = require('./RNTesterBlock');
-var RNTesterPage = require('./RNTesterPage');
+const nativeImageSource = require('nativeImageSource');
+const {StyleSheet, Text, View} = ReactNative;
+const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterPage = require('./RNTesterPage');
 
-var Switch = require('Switch');
-var ToolbarAndroid = require('ToolbarAndroid');
+const Switch = require('Switch');
+const ToolbarAndroid = require('ToolbarAndroid');
 
 class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
   static title = '<ToolbarAndroid>';
@@ -141,7 +141,7 @@ class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
   };
 }
 
-var toolbarActions = [
+const toolbarActions = [
   {
     title: 'Create',
     icon: nativeImageSource({
@@ -163,7 +163,7 @@ var toolbarActions = [
   },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   toolbar: {
     backgroundColor: '#e9eaed',
     height: 56,
diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js
index fa52cac64..fe6aad74d 100644
--- a/RNTester/js/TouchableExample.js
+++ b/RNTester/js/TouchableExample.js
@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   Animated,
   Image,
   StyleSheet,
@@ -169,7 +169,7 @@ class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> {
   };
 
   render() {
-    var textLog = '';
+    let textLog = '';
     if (this.state.timesPressed > 1) {
       textLog = this.state.timesPressed + 'x TouchableWithoutFeedback onPress';
     } else if (this.state.timesPressed > 0) {
@@ -203,7 +203,7 @@ class TextOnPressBox extends React.Component<{}, $FlowFixMeState> {
   };
 
   render() {
-    var textLog = '';
+    let textLog = '';
     if (this.state.timesPressed > 1) {
       textLog = this.state.timesPressed + 'x text onPress';
     } else if (this.state.timesPressed > 0) {
@@ -254,8 +254,8 @@ class TouchableFeedbackEvents extends React.Component<{}, $FlowFixMeState> {
   }
 
   _appendEvent = eventName => {
-    var limit = 6;
-    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    const limit = 6;
+    const eventLog = this.state.eventLog.slice(0, limit - 1);
     eventLog.unshift(eventName);
     this.setState({eventLog});
   };
@@ -293,8 +293,8 @@ class TouchableDelayEvents extends React.Component<{}, $FlowFixMeState> {
   }
 
   _appendEvent = eventName => {
-    var limit = 6;
-    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    const limit = 6;
+    const eventLog = this.state.eventLog.slice(0, limit - 1);
     eventLog.unshift(eventName);
     this.setState({eventLog});
   };
@@ -346,7 +346,7 @@ class TouchableHitSlop extends React.Component<{}, $FlowFixMeState> {
   };
 
   render() {
-    var log = '';
+    let log = '';
     if (this.state.timesPressed > 1) {
       log = this.state.timesPressed + 'x onPress';
     } else if (this.state.timesPressed > 0) {
@@ -458,9 +458,11 @@ class TouchableDisabled extends React.Component<{}> {
   }
 }
 
-var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
+const heartImage = {
+  uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small',
+};
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   row: {
     justifyContent: 'center',
     flexDirection: 'row',
diff --git a/RNTester/js/TransformExample.js b/RNTester/js/TransformExample.js
index 7359462c8..90737e8e3 100644
--- a/RNTester/js/TransformExample.js
+++ b/RNTester/js/TransformExample.js
@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, StyleSheet, Text, View} = ReactNative;
 
 class Flip extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -76,7 +76,7 @@ class Flip extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     height: 500,
   },
diff --git a/RNTester/js/TransparentHitTestExample.js b/RNTester/js/TransparentHitTestExample.js
index 50c49b9ab..34fa7387c 100644
--- a/RNTester/js/TransparentHitTestExample.js
+++ b/RNTester/js/TransparentHitTestExample.js
@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Text, View, TouchableOpacity} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Text, View, TouchableOpacity} = ReactNative;
 
 class TransparentHitTestExample extends React.Component<{}> {
   render() {