Skip to content

Commit

Permalink
Remove var in RNTester (facebook#22013)
Browse files Browse the repository at this point in the history 
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: facebook#22013

Differential Revision: D12849927

Pulled By: TheSavior

fbshipit-source-id: 4a2fd11939bd8ae8604ef59512f532adc0a09eda
  • Loading branch information
@nissy-dev @facebook-github-bot
nissy-dev authored and facebook-github-bot committed Oct 30, 2018
1 parent 865afd8 commit 2409e9d
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 86 deletions.
60 changes: 32 additions & 28 deletions RNTester/js/AnimatedGratuitousApp/AnExApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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)
Expand All @@ -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: [
{
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -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 = {
Expand All @@ -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;
Expand Down Expand Up @@ -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});
Expand All @@ -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 {
Expand All @@ -314,7 +318,7 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
}
}

var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
},
Expand Down
44 changes: 22 additions & 22 deletions RNTester/js/AnimatedGratuitousApp/AnExBobble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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();
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -106,7 +106,7 @@ class AnExBobble extends React.Component<Object, any> {
}
}

var styles = StyleSheet.create({
const styles = StyleSheet.create({
circle: {
position: 'absolute',
height: 60,
Expand All @@ -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;
Expand All @@ -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',
Expand Down
22 changes: 11 additions & 11 deletions RNTester/js/AnimatedGratuitousApp/AnExChained.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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,
Expand All @@ -99,7 +99,7 @@ var styles = StyleSheet.create({
},
});

var CHAIN_IMGS = [
const CHAIN_IMGS = [
require('../hawk.png'),
require('../bunny.png'),
require('../relay.png'),
Expand Down
14 changes: 7 additions & 7 deletions RNTester/js/AnimatedGratuitousApp/AnExScroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -80,7 +80,7 @@ class AnExScroll extends React.Component<$FlowFixMeProps, any> {
}
}

var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
flex: 1,
Expand All @@ -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',
};
Expand Down
Loading

0 comments on commit 2409e9d

Please sign in to comment.