diff --git a/RNTester/js/AnimatedGratuitousApp/AnExApp.js b/RNTester/js/AnimatedGratuitousApp/AnExApp.js index ca24eac844008d..f9aa375a7d9677 100644 --- 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 { longTimer: number; @@ -37,7 +37,7 @@ class Circle extends React.Component { } _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 { } 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 { }, }; } - 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 { }, ], }; - 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 { ); } _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 { _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 { } 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 ; } 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 { } _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 { 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 index 68b5a136094c33..4be52c650f41b8 100644 --- 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 { 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 { 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 { return ( {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 ( { } } -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 index 0a74da47d0bbaa..91e85e0b1714d6 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExChained.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExChained.js @@ -10,9 +10,9 @@ '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 { constructor(props: Object) { @@ -20,17 +20,17 @@ class AnExChained extends React.Component { 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 { return ( {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 ( { } } -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 index b51d889442aaf7..1920bc245e9fd6 100644 --- 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 ( { } } -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', }; diff --git a/RNTester/js/AnimatedGratuitousApp/AnExSet.js b/RNTester/js/AnimatedGratuitousApp/AnExSet.js index f42702cc29a9d6..1d13a2d8601a0b 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExSet.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExSet.js @@ -10,20 +10,20 @@ 'use strict'; -var React = require('react'); -var ReactNative = require('react-native'); -var {Animated, PanResponder, StyleSheet, Text, View} = ReactNative; +const React = require('react'); +const ReactNative = require('react-native'); +const {Animated, PanResponder, StyleSheet, Text, View} = ReactNative; -var AnExBobble = require('./AnExBobble'); -var AnExChained = require('./AnExChained'); -var AnExScroll = require('./AnExScroll'); -var AnExTilt = require('./AnExTilt'); +const AnExBobble = require('./AnExBobble'); +const AnExChained = require('./AnExChained'); +const AnExScroll = require('./AnExScroll'); +const AnExTilt = require('./AnExTilt'); class AnExSet extends React.Component { constructor(props: Object) { super(props); function randColor() { - 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(',') + ')'; } this.state = { @@ -32,7 +32,7 @@ class AnExSet extends React.Component { }; } render(): React.Node { - var backgroundColor = this.props.openVal + const backgroundColor = this.props.openVal ? this.props.openVal.interpolate({ inputRange: [0, 1], outputRange: [ @@ -41,7 +41,7 @@ class AnExSet extends React.Component { ], }) : this.state.closeColor; - var panelWidth = + const panelWidth = (this.props.containerLayout && this.props.containerLayout.width) || 320; return ( @@ -98,7 +98,7 @@ class AnExSet extends React.Component { } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, }, diff --git a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js index 6b518ee75e84b7..bcc389d8747a74 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js @@ -10,9 +10,9 @@ 'use strict'; -var React = require('react'); -var ReactNative = require('react-native'); -var {Animated, PanResponder, StyleSheet} = ReactNative; +const React = require('react'); +const ReactNative = require('react-native'); +const {Animated, PanResponder, StyleSheet} = ReactNative; class AnExTilt extends React.Component { constructor(props: Object) { @@ -37,7 +37,7 @@ class AnExTilt extends React.Component { [null, {dx: this.state.panX}], // panX is linked to the gesture ), onPanResponderRelease: (e, gestureState) => { - var toValue = 0; + let toValue = 0; if (gestureState.dx > 100) { toValue = 500; } else if (gestureState.dx < -100) { @@ -50,7 +50,7 @@ class AnExTilt extends React.Component { friction: 3, }).start(); this.state.panX.removeAllListeners(); - var id = this.state.panX.addListener(({value}) => { + const id = this.state.panX.addListener(({value}) => { // listen until offscreen if (Math.abs(value) > 400) { this.state.panX.removeListener(id); // offscreen, so stop listening @@ -122,7 +122,7 @@ class AnExTilt extends React.Component { } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ tilt: { overflow: 'hidden', height: 200, diff --git a/RNTester/js/createExamplePage.js b/RNTester/js/createExamplePage.js index 781ac727e396c9..271057c3fb66a0 100644 --- a/RNTester/js/createExamplePage.js +++ b/RNTester/js/createExamplePage.js @@ -16,7 +16,7 @@ const RNTesterExampleContainer = require('./RNTesterExampleContainer'); import type {ExampleModule} from 'ExampleTypes'; -var createExamplePage = function( +const createExamplePage = function( title: ?string, exampleModule: ExampleModule, ): React.ComponentType {