Skip to content

Commit 811a99c

Browse files
nissy-devfacebook-github-bot
nissy-dev
authored and
facebook-github-bot
committed
Remove var in RNTester (#22013)
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: #22013 Differential Revision: D12849927 Pulled By: TheSavior fbshipit-source-id: 4a2fd11939bd8ae8604ef59512f532adc0a09eda
1 parent ce86080 commit 811a99c

File tree

7 files changed

+90
-86
lines changed

7 files changed

+90
-86
lines changed

‎RNTester/js/AnimatedGratuitousApp/AnExApp.js

+32-28
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010

1111
'use strict';
1212

13-
var React = require('react');
14-
var ReactNative = require('react-native');
15-
var {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative;
13+
const React = require('react');
14+
const ReactNative = require('react-native');
15+
const {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative;
1616

17-
var AnExSet = require('AnExSet');
17+
const AnExSet = require('AnExSet');
1818

19-
var CIRCLE_SIZE = 80;
20-
var CIRCLE_MARGIN = 18;
21-
var NUM_CIRCLES = 30;
19+
const CIRCLE_SIZE = 80;
20+
const CIRCLE_MARGIN = 18;
21+
const NUM_CIRCLES = 30;
2222

2323
class Circle extends React.Component<any, any> {
2424
longTimer: number;
@@ -37,7 +37,7 @@ class Circle extends React.Component<any, any> {
3737
}
3838

3939
_onLongPress(): void {
40-
var config = {tension: 40, friction: 3};
40+
const config = {tension: 40, friction: 3};
4141
this.state.pan.addListener(value => {
4242
// Async listener for state changes (step1: uncomment)
4343
this.props.onMove && this.props.onMove(value);
@@ -77,9 +77,11 @@ class Circle extends React.Component<any, any> {
7777
}
7878

7979
render(): React.Node {
80+
let handlers;
81+
let dragStyle = null;
8082
if (this.state.panResponder) {
81-
var handlers = this.state.panResponder.panHandlers;
82-
var dragStyle = {
83+
handlers = this.state.panResponder.panHandlers;
84+
dragStyle = {
8385
// Used to position while dragging
8486
position: 'absolute', // Hoist out of layout (step1: uncomment)
8587
...this.state.pan.getLayout(), // Convenience converter (step1: uncomment)
@@ -106,7 +108,7 @@ class Circle extends React.Component<any, any> {
106108
},
107109
};
108110
}
109-
var animatedStyle: Object = {
111+
const animatedStyle: Object = {
110112
shadowOpacity: this.state.pop, // no need for interpolation (step2d: uncomment)
111113
transform: [
112114
{
@@ -117,11 +119,12 @@ class Circle extends React.Component<any, any> {
117119
},
118120
],
119121
};
120-
var openVal = this.props.openVal;
122+
const openVal = this.props.openVal;
123+
let innerOpenStyle = null;
121124
if (this.props.dummy) {
122125
animatedStyle.opacity = 0;
123126
} else if (this.state.isActive) {
124-
var innerOpenStyle = [
127+
innerOpenStyle = [
125128
styles.open,
126129
{
127130
// (step4: uncomment)
@@ -175,7 +178,7 @@ class Circle extends React.Component<any, any> {
175178
);
176179
}
177180
_toggleIsActive(velocity) {
178-
var config = {tension: 30, friction: 7};
181+
const config = {tension: 30, friction: 7};
179182
if (this.state.isActive) {
180183
Animated.spring(this.props.openVal, {toValue: 0, ...config}).start(() => {
181184
// (step4: uncomment)
@@ -200,8 +203,8 @@ class AnExApp extends React.Component<any, any> {
200203
_onMove: (position: Point) => void;
201204
constructor(props: any): void {
202205
super(props);
203-
var keys = [];
204-
for (var idx = 0; idx < NUM_CIRCLES; idx++) {
206+
const keys = [];
207+
for (let idx = 0; idx < NUM_CIRCLES; idx++) {
205208
keys.push('E' + idx);
206209
}
207210
this.state = {
@@ -213,13 +216,14 @@ class AnExApp extends React.Component<any, any> {
213216
}
214217

215218
render(): React.Node {
216-
var circles = this.state.keys.map((key, idx) => {
219+
const circles = this.state.keys.map((key, idx) => {
217220
if (key === this.state.activeKey) {
218221
return <Circle key={key + 'd'} dummy={true} />;
219222
} else {
223+
let onLayout = null;
220224
if (!this.state.restLayouts[idx]) {
221-
var onLayout = function(index, e) {
222-
var layout = e.nativeEvent.layout;
225+
onLayout = function(index, e) {
226+
const layout = e.nativeEvent.layout;
223227
this.setState(state => {
224228
state.restLayouts[index] = layout;
225229
return state;
@@ -274,7 +278,7 @@ class AnExApp extends React.Component<any, any> {
274278
}
275279

276280
_onMove(position: Point): void {
277-
var newKeys = moveToClosest(this.state, position);
281+
const newKeys = moveToClosest(this.state, position);
278282
if (newKeys !== this.state.keys) {
279283
LayoutAnimation.easeInEaseOut(); // animates layout update as one batch (step3: uncomment)
280284
this.setState({keys: newKeys});
@@ -284,18 +288,18 @@ class AnExApp extends React.Component<any, any> {
284288

285289
type Point = {x: number, y: number};
286290
function distance(p1: Point, p2: Point): number {
287-
var dx = p1.x - p2.x;
288-
var dy = p1.y - p2.y;
291+
const dx = p1.x - p2.x;
292+
const dy = p1.y - p2.y;
289293
return dx * dx + dy * dy;
290294
}
291295

292296
function moveToClosest({activeKey, keys, restLayouts}, position) {
293-
var activeIdx = -1;
294-
var closestIdx = activeIdx;
295-
var minDist = Infinity;
296-
var newKeys = [];
297+
const activeIdx = -1;
298+
let closestIdx = activeIdx;
299+
let minDist = Infinity;
300+
const newKeys = [];
297301
keys.forEach((key, idx) => {
298-
var dist = distance(position, restLayouts[idx]);
302+
const dist = distance(position, restLayouts[idx]);
299303
if (key === activeKey) {
300304
idx = activeIdx;
301305
} else {
@@ -314,7 +318,7 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
314318
}
315319
}
316320

317-
var styles = StyleSheet.create({
321+
const styles = StyleSheet.create({
318322
container: {
319323
flex: 1,
320324
},

‎RNTester/js/AnimatedGratuitousApp/AnExBobble.js

+22-22
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010

1111
'use strict';
1212

13-
var React = require('react');
14-
var ReactNative = require('react-native');
15-
var {Animated, PanResponder, StyleSheet, View} = ReactNative;
13+
const React = require('react');
14+
const ReactNative = require('react-native');
15+
const {Animated, PanResponder, StyleSheet, View} = ReactNative;
1616

17-
var NUM_BOBBLES = 5;
18-
var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
19-
var RADIUS = 160;
20-
var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {
17+
const NUM_BOBBLES = 5;
18+
const RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
19+
const RADIUS = 160;
20+
const BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {
2121
// static positions
2222
return i === 0
2323
? {x: 0, y: 0}
@@ -36,12 +36,12 @@ class AnExBobble extends React.Component<Object, any> {
3636
return new Animated.ValueXY();
3737
});
3838
this.state.selectedBobble = null;
39-
var bobblePanListener = (e, gestureState) => {
39+
const bobblePanListener = (e, gestureState) => {
4040
// async events => change selection
41-
var newSelected = computeNewSelected(gestureState);
41+
const newSelected = computeNewSelected(gestureState);
4242
if (this.state.selectedBobble !== newSelected) {
4343
if (this.state.selectedBobble !== null) {
44-
var restSpot = BOBBLE_SPOTS[this.state.selectedBobble];
44+
const restSpot = BOBBLE_SPOTS[this.state.selectedBobble];
4545
Animated.spring(this.state.bobbles[this.state.selectedBobble], {
4646
toValue: restSpot, // return previously selected bobble to rest position
4747
}).start();
@@ -54,7 +54,7 @@ class AnExBobble extends React.Component<Object, any> {
5454
this.state.selectedBobble = newSelected;
5555
}
5656
};
57-
var releaseBobble = () => {
57+
const releaseBobble = () => {
5858
this.state.bobbles.forEach((bobble, i) => {
5959
Animated.spring(bobble, {
6060
toValue: {x: 0, y: 0}, // all bobbles return to zero
@@ -84,8 +84,8 @@ class AnExBobble extends React.Component<Object, any> {
8484
return (
8585
<View style={styles.bobbleContainer}>
8686
{this.state.bobbles.map((_, i) => {
87-
var j = this.state.bobbles.length - i - 1; // reverse so lead on top
88-
var handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers;
87+
const j = this.state.bobbles.length - i - 1; // reverse so lead on top
88+
const handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers;
8989
return (
9090
<Animated.Image
9191
{...handlers}
@@ -106,7 +106,7 @@ class AnExBobble extends React.Component<Object, any> {
106106
}
107107
}
108108

109-
var styles = StyleSheet.create({
109+
const styles = StyleSheet.create({
110110
circle: {
111111
position: 'absolute',
112112
height: 60,
@@ -125,14 +125,14 @@ var styles = StyleSheet.create({
125125
});
126126

127127
function computeNewSelected(gestureState: Object): ?number {
128-
var {dx, dy} = gestureState;
129-
var minDist = Infinity;
130-
var newSelected = null;
131-
var pointRadius = Math.sqrt(dx * dx + dy * dy);
128+
const {dx, dy} = gestureState;
129+
let minDist = Infinity;
130+
let newSelected = null;
131+
const pointRadius = Math.sqrt(dx * dx + dy * dy);
132132
if (Math.abs(RADIUS - pointRadius) < 80) {
133133
BOBBLE_SPOTS.forEach((spot, idx) => {
134-
var delta = {x: spot.x - dx, y: spot.y - dy};
135-
var dist = delta.x * delta.x + delta.y * delta.y;
134+
const delta = {x: spot.x - dx, y: spot.y - dy};
135+
const dist = delta.x * delta.x + delta.y * delta.y;
136136
if (dist < minDist) {
137137
minDist = dist;
138138
newSelected = idx;
@@ -143,11 +143,11 @@ function computeNewSelected(gestureState: Object): ?number {
143143
}
144144

145145
function randColor(): string {
146-
var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
146+
const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
147147
return 'rgb(' + colors.join(',') + ')';
148148
}
149149

150-
var BOBBLE_IMGS = [
150+
const BOBBLE_IMGS = [
151151
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xpf1/t39.1997-6/10173489_272703316237267_1025826781_n.png',
152152
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/l/t39.1997-6/p240x240/851578_631487400212668_2087073502_n.png',
153153
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/p240x240/851583_654446917903722_178118452_n.png',

‎RNTester/js/AnimatedGratuitousApp/AnExChained.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,27 @@
1010

1111
'use strict';
1212

13-
var React = require('react');
14-
var ReactNative = require('react-native');
15-
var {Animated, PanResponder, StyleSheet, View} = ReactNative;
13+
const React = require('react');
14+
const ReactNative = require('react-native');
15+
const {Animated, PanResponder, StyleSheet, View} = ReactNative;
1616

1717
class AnExChained extends React.Component<Object, any> {
1818
constructor(props: Object) {
1919
super(props);
2020
this.state = {
2121
stickers: [new Animated.ValueXY()], // 1 leader
2222
};
23-
var stickerConfig = {tension: 2, friction: 3}; // soft spring
24-
for (var i = 0; i < 4; i++) {
23+
const stickerConfig = {tension: 2, friction: 3}; // soft spring
24+
for (let i = 0; i < 4; i++) {
2525
// 4 followers
26-
var sticker = new Animated.ValueXY();
26+
const sticker = new Animated.ValueXY();
2727
Animated.spring(sticker, {
2828
...stickerConfig,
2929
toValue: this.state.stickers[i], // Animated toValue's are tracked
3030
}).start();
3131
this.state.stickers.push(sticker); // push on the followers
3232
}
33-
var releaseChain = (e, gestureState) => {
33+
const releaseChain = (e, gestureState) => {
3434
this.state.stickers[0].flattenOffset(); // merges offset into value and resets
3535
Animated.sequence([
3636
// spring to start after decay finishes
@@ -64,8 +64,8 @@ class AnExChained extends React.Component<Object, any> {
6464
return (
6565
<View style={styles.chained}>
6666
{this.state.stickers.map((_, i) => {
67-
var j = this.state.stickers.length - i - 1; // reverse so leader is on top
68-
var handlers = j === 0 ? this.state.chainResponder.panHandlers : {};
67+
const j = this.state.stickers.length - i - 1; // reverse so leader is on top
68+
const handlers = j === 0 ? this.state.chainResponder.panHandlers : {};
6969
return (
7070
<Animated.Image
7171
{...handlers}
@@ -85,7 +85,7 @@ class AnExChained extends React.Component<Object, any> {
8585
}
8686
}
8787

88-
var styles = StyleSheet.create({
88+
const styles = StyleSheet.create({
8989
chained: {
9090
alignSelf: 'flex-end',
9191
top: -160,
@@ -99,7 +99,7 @@ var styles = StyleSheet.create({
9999
},
100100
});
101101

102-
var CHAIN_IMGS = [
102+
const CHAIN_IMGS = [
103103
require('../hawk.png'),
104104
require('../bunny.png'),
105105
require('../relay.png'),

‎RNTester/js/AnimatedGratuitousApp/AnExScroll.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010

1111
'use strict';
1212

13-
var React = require('react');
14-
var ReactNative = require('react-native');
15-
var {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative;
13+
const React = require('react');
14+
const ReactNative = require('react-native');
15+
const {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative;
1616

1717
class AnExScroll extends React.Component<$FlowFixMeProps, any> {
1818
state: any = {scrollX: new Animated.Value(0)};
1919

2020
render() {
21-
var width = this.props.panelWidth;
21+
const width = this.props.panelWidth;
2222
return (
2323
<View style={styles.container}>
2424
<ScrollView
@@ -80,7 +80,7 @@ class AnExScroll extends React.Component<$FlowFixMeProps, any> {
8080
}
8181
}
8282

83-
var styles = StyleSheet.create({
83+
const styles = StyleSheet.create({
8484
container: {
8585
backgroundColor: 'transparent',
8686
flex: 1,
@@ -104,11 +104,11 @@ var styles = StyleSheet.create({
104104
},
105105
});
106106

107-
var HAWK_PIC = {
107+
const HAWK_PIC = {
108108
uri:
109109
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xfa1/t39.1997-6/10734304_1562225620659674_837511701_n.png',
110110
};
111-
var BUNNY_PIC = {
111+
const BUNNY_PIC = {
112112
uri:
113113
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png',
114114
};

0 commit comments

Comments
 (0)