facebook · nissy-dev · Oct 30, 2018
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExApp.js b/RNTester/js/AnimatedGratuitousApp/AnExApp.js
@@ -10,15 +10,15 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative;
 
-var AnExSet = require('AnExSet');
+const AnExSet = require('AnExSet');
 
-var CIRCLE_SIZE = 80;
-var CIRCLE_MARGIN = 18;
-var NUM_CIRCLES = 30;
+const CIRCLE_SIZE = 80;
+const CIRCLE_MARGIN = 18;
+const NUM_CIRCLES = 30;
 
 class Circle extends React.Component<any, any> {
   longTimer: number;
@@ -37,7 +37,7 @@ class Circle extends React.Component<any, any> {
   }
 
   _onLongPress(): void {
-    var config = {tension: 40, friction: 3};
+    const config = {tension: 40, friction: 3};
     this.state.pan.addListener(value => {
       // Async listener for state changes  (step1: uncomment)
       this.props.onMove && this.props.onMove(value);
@@ -77,9 +77,11 @@ class Circle extends React.Component<any, any> {
   }
 
   render(): React.Node {
+    let handlers;
+    let dragStyle = null;
     if (this.state.panResponder) {
-      var handlers = this.state.panResponder.panHandlers;
-      var dragStyle = {
+      handlers = this.state.panResponder.panHandlers;
+      dragStyle = {
         //  Used to position while dragging
         position: 'absolute', //  Hoist out of layout                    (step1: uncomment)
         ...this.state.pan.getLayout(), //  Convenience converter                  (step1: uncomment)
@@ -106,7 +108,7 @@ class Circle extends React.Component<any, any> {
         },
       };
     }
-    var animatedStyle: Object = {
+    const animatedStyle: Object = {
       shadowOpacity: this.state.pop, // no need for interpolation            (step2d: uncomment)
       transform: [
         {
@@ -117,11 +119,12 @@ class Circle extends React.Component<any, any> {
         },
       ],
     };
-    var openVal = this.props.openVal;
+    const openVal = this.props.openVal;
+    let innerOpenStyle = null;
     if (this.props.dummy) {
       animatedStyle.opacity = 0;
     } else if (this.state.isActive) {
-      var innerOpenStyle = [
+      innerOpenStyle = [
         styles.open,
         {
           // (step4: uncomment)
@@ -175,7 +178,7 @@ class Circle extends React.Component<any, any> {
     );
   }
   _toggleIsActive(velocity) {
-    var config = {tension: 30, friction: 7};
+    const config = {tension: 30, friction: 7};
     if (this.state.isActive) {
       Animated.spring(this.props.openVal, {toValue: 0, ...config}).start(() => {
         // (step4: uncomment)
@@ -200,8 +203,8 @@ class AnExApp extends React.Component<any, any> {
   _onMove: (position: Point) => void;
   constructor(props: any): void {
     super(props);
-    var keys = [];
-    for (var idx = 0; idx < NUM_CIRCLES; idx++) {
+    const keys = [];
+    for (let idx = 0; idx < NUM_CIRCLES; idx++) {
       keys.push('E' + idx);
     }
     this.state = {
@@ -213,13 +216,14 @@ class AnExApp extends React.Component<any, any> {
   }
 
   render(): React.Node {
-    var circles = this.state.keys.map((key, idx) => {
+    const circles = this.state.keys.map((key, idx) => {
       if (key === this.state.activeKey) {
         return <Circle key={key + 'd'} dummy={true} />;
       } else {
+        let onLayout = null;
         if (!this.state.restLayouts[idx]) {
-          var onLayout = function(index, e) {
-            var layout = e.nativeEvent.layout;
+          onLayout = function(index, e) {
+            const layout = e.nativeEvent.layout;
             this.setState(state => {
               state.restLayouts[index] = layout;
               return state;
@@ -274,7 +278,7 @@ class AnExApp extends React.Component<any, any> {
   }
 
   _onMove(position: Point): void {
-    var newKeys = moveToClosest(this.state, position);
+    const newKeys = moveToClosest(this.state, position);
     if (newKeys !== this.state.keys) {
       LayoutAnimation.easeInEaseOut(); // animates layout update as one batch (step3: uncomment)
       this.setState({keys: newKeys});
@@ -284,18 +288,18 @@ class AnExApp extends React.Component<any, any> {
 
 type Point = {x: number, y: number};
 function distance(p1: Point, p2: Point): number {
-  var dx = p1.x - p2.x;
-  var dy = p1.y - p2.y;
+  const dx = p1.x - p2.x;
+  const dy = p1.y - p2.y;
   return dx * dx + dy * dy;
 }
 
 function moveToClosest({activeKey, keys, restLayouts}, position) {
-  var activeIdx = -1;
-  var closestIdx = activeIdx;
-  var minDist = Infinity;
-  var newKeys = [];
+  const activeIdx = -1;
+  let closestIdx = activeIdx;
+  let minDist = Infinity;
+  const newKeys = [];
   keys.forEach((key, idx) => {
-    var dist = distance(position, restLayouts[idx]);
+    const dist = distance(position, restLayouts[idx]);
     if (key === activeKey) {
       idx = activeIdx;
     } else {
@@ -314,7 +318,7 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
   },

diff --git a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js
@@ -10,14 +10,14 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, PanResponder, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, PanResponder, StyleSheet, View} = ReactNative;
 
-var NUM_BOBBLES = 5;
-var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
-var RADIUS = 160;
-var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {
+const NUM_BOBBLES = 5;
+const RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
+const RADIUS = 160;
+const BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {
   // static positions
   return i === 0
     ? {x: 0, y: 0}
@@ -36,12 +36,12 @@ class AnExBobble extends React.Component<Object, any> {
       return new Animated.ValueXY();
     });
     this.state.selectedBobble = null;
-    var bobblePanListener = (e, gestureState) => {
+    const bobblePanListener = (e, gestureState) => {
       // async events => change selection
-      var newSelected = computeNewSelected(gestureState);
+      const newSelected = computeNewSelected(gestureState);
       if (this.state.selectedBobble !== newSelected) {
         if (this.state.selectedBobble !== null) {
-          var restSpot = BOBBLE_SPOTS[this.state.selectedBobble];
+          const restSpot = BOBBLE_SPOTS[this.state.selectedBobble];
           Animated.spring(this.state.bobbles[this.state.selectedBobble], {
             toValue: restSpot, // return previously selected bobble to rest position
           }).start();
@@ -54,7 +54,7 @@ class AnExBobble extends React.Component<Object, any> {
         this.state.selectedBobble = newSelected;
       }
     };
-    var releaseBobble = () => {
+    const releaseBobble = () => {
       this.state.bobbles.forEach((bobble, i) => {
         Animated.spring(bobble, {
           toValue: {x: 0, y: 0}, // all bobbles return to zero
@@ -84,8 +84,8 @@ class AnExBobble extends React.Component<Object, any> {
     return (
       <View style={styles.bobbleContainer}>
         {this.state.bobbles.map((_, i) => {
-          var j = this.state.bobbles.length - i - 1; // reverse so lead on top
-          var handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers;
+          const j = this.state.bobbles.length - i - 1; // reverse so lead on top
+          const handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers;
           return (
             <Animated.Image
               {...handlers}
@@ -106,7 +106,7 @@ class AnExBobble extends React.Component<Object, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   circle: {
     position: 'absolute',
     height: 60,
@@ -125,14 +125,14 @@ var styles = StyleSheet.create({
 });
 
 function computeNewSelected(gestureState: Object): ?number {
-  var {dx, dy} = gestureState;
-  var minDist = Infinity;
-  var newSelected = null;
-  var pointRadius = Math.sqrt(dx * dx + dy * dy);
+  const {dx, dy} = gestureState;
+  let minDist = Infinity;
+  let newSelected = null;
+  const pointRadius = Math.sqrt(dx * dx + dy * dy);
   if (Math.abs(RADIUS - pointRadius) < 80) {
     BOBBLE_SPOTS.forEach((spot, idx) => {
-      var delta = {x: spot.x - dx, y: spot.y - dy};
-      var dist = delta.x * delta.x + delta.y * delta.y;
+      const delta = {x: spot.x - dx, y: spot.y - dy};
+      const dist = delta.x * delta.x + delta.y * delta.y;
       if (dist < minDist) {
         minDist = dist;
         newSelected = idx;
@@ -143,11 +143,11 @@ function computeNewSelected(gestureState: Object): ?number {
 }
 
 function randColor(): string {
-  var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
+  const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
   return 'rgb(' + colors.join(',') + ')';
 }
 
-var BOBBLE_IMGS = [
+const BOBBLE_IMGS = [
   'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xpf1/t39.1997-6/10173489_272703316237267_1025826781_n.png',
   'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/l/t39.1997-6/p240x240/851578_631487400212668_2087073502_n.png',
   'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/p240x240/851583_654446917903722_178118452_n.png',

diff --git a/RNTester/js/AnimatedGratuitousApp/AnExChained.js b/RNTester/js/AnimatedGratuitousApp/AnExChained.js
@@ -10,27 +10,27 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, PanResponder, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, PanResponder, StyleSheet, View} = ReactNative;
 
 class AnExChained extends React.Component<Object, any> {
   constructor(props: Object) {
     super(props);
     this.state = {
       stickers: [new Animated.ValueXY()], // 1 leader
     };
-    var stickerConfig = {tension: 2, friction: 3}; // soft spring
-    for (var i = 0; i < 4; i++) {
+    const stickerConfig = {tension: 2, friction: 3}; // soft spring
+    for (let i = 0; i < 4; i++) {
       // 4 followers
-      var sticker = new Animated.ValueXY();
+      const sticker = new Animated.ValueXY();
       Animated.spring(sticker, {
         ...stickerConfig,
         toValue: this.state.stickers[i], // Animated toValue's are tracked
       }).start();
       this.state.stickers.push(sticker); // push on the followers
     }
-    var releaseChain = (e, gestureState) => {
+    const releaseChain = (e, gestureState) => {
       this.state.stickers[0].flattenOffset(); // merges offset into value and resets
       Animated.sequence([
         // spring to start after decay finishes
@@ -64,8 +64,8 @@ class AnExChained extends React.Component<Object, any> {
     return (
       <View style={styles.chained}>
         {this.state.stickers.map((_, i) => {
-          var j = this.state.stickers.length - i - 1; // reverse so leader is on top
-          var handlers = j === 0 ? this.state.chainResponder.panHandlers : {};
+          const j = this.state.stickers.length - i - 1; // reverse so leader is on top
+          const handlers = j === 0 ? this.state.chainResponder.panHandlers : {};
           return (
             <Animated.Image
               {...handlers}
@@ -85,7 +85,7 @@ class AnExChained extends React.Component<Object, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   chained: {
     alignSelf: 'flex-end',
     top: -160,
@@ -99,7 +99,7 @@ var styles = StyleSheet.create({
   },
 });
 
-var CHAIN_IMGS = [
+const CHAIN_IMGS = [
   require('../hawk.png'),
   require('../bunny.png'),
   require('../relay.png'),

diff --git a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js
@@ -10,15 +10,15 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative;
 
 class AnExScroll extends React.Component<$FlowFixMeProps, any> {
   state: any = {scrollX: new Animated.Value(0)};
 
   render() {
-    var width = this.props.panelWidth;
+    const width = this.props.panelWidth;
     return (
       <View style={styles.container}>
         <ScrollView
@@ -80,7 +80,7 @@ class AnExScroll extends React.Component<$FlowFixMeProps, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',
     flex: 1,
@@ -104,11 +104,11 @@ var styles = StyleSheet.create({
   },
 });
 
-var HAWK_PIC = {
+const HAWK_PIC = {
   uri:
     'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xfa1/t39.1997-6/10734304_1562225620659674_837511701_n.png',
 };
-var BUNNY_PIC = {
+const BUNNY_PIC = {
   uri:
     'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png',
 };