esling fixes in DefaultTabBar

Author: skv-headless

DefaultTabBar.js

@@ -1,49 +1,27 @@
-'use strict';
-
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
   StyleSheet,
   Text,
   View,
   Animated,
 } = React;
-var Button = require('./Button');
-
-var styles = StyleSheet.create({
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingBottom: 10,
-  },
-
-  tabs: {
-    height: 50,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    borderWidth: 1,
-    borderTopWidth: 0,
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
-    borderBottomColor: '#ccc',
-  },
-});
+const Button = require('./Button');
 
-var DefaultTabBar = React.createClass({
+const DefaultTabBar = React.createClass({
   propTypes: {
     goToPage: React.PropTypes.func,
     activeTab: React.PropTypes.number,
     tabs: React.PropTypes.array,
-    underlineColor : React.PropTypes.string,
-    backgroundColor : React.PropTypes.string,
-    activeTextColor : React.PropTypes.string,
-    inactiveTextColor : React.PropTypes.string,
+    underlineColor: React.PropTypes.string,
+    backgroundColor: React.PropTypes.string,
+    activeTextColor: React.PropTypes.string,
+    inactiveTextColor: React.PropTypes.string,
   },
 
   renderTabOption(name, page) {
-    var isTabActive = this.props.activeTab === page;
-    var activeTextColor = this.props.activeTextColor || "navy";
-    var inactiveTextColor = this.props.inactiveTextColor || "black";
+    const isTabActive = this.props.activeTab === page;
+    const activeTextColor = this.props.activeTextColor || 'navy';
+    const inactiveTextColor = this.props.inactiveTextColor || 'black';
 
     return <Button
       key={name}
@@ -52,36 +30,55 @@ var DefaultTabBar = React.createClass({
       accessibilityTraits='button'
       onPress={() => this.props.goToPage(page)}
     >
-      <View style={[styles.tab]}>
-        <Text style={{color: isTabActive ? activeTextColor : inactiveTextColor, fontWeight: isTabActive ? 'bold' : 'normal'}}>
+      <View style={styles.tab}>
+        <Text style={{color: isTabActive ? activeTextColor : inactiveTextColor, fontWeight: isTabActive ? 'bold' : 'normal', }}>
           {name}
         </Text>
       </View>
     </Button>;
   },
 
   render() {
-    var containerWidth = this.props.containerWidth;
-    var numberOfTabs = this.props.tabs.length;
-    var tabUnderlineStyle = {
+    const containerWidth = this.props.containerWidth;
+    const numberOfTabs = this.props.tabs.length;
+    const tabUnderlineStyle = {
       position: 'absolute',
       width: containerWidth / numberOfTabs,
       height: 4,
-      backgroundColor: this.props.underlineColor || "navy",
+      backgroundColor: this.props.underlineColor || 'navy',
       bottom: 0,
     };
 
-    var left = this.props.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [0,  containerWidth / numberOfTabs]
+    const left = this.props.scrollValue.interpolate({
+      inputRange: [0, 1, ], outputRange: [0,  containerWidth / numberOfTabs, ],
     });
 
     return (
-      <View style={[styles.tabs, {backgroundColor : this.props.backgroundColor || null}, this.props.style, ]}>
+      <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor || null, }, this.props.style, ]}>
         {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
-        <Animated.View style={[tabUnderlineStyle, {left}]} />
+        <Animated.View style={[tabUnderlineStyle, { left, }, ]} />
       </View>
     );
   },
 });
 
+const styles = StyleSheet.create({
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 10,
+  },
+  tabs: {
+    height: 50,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomColor: '#ccc',
+  },
+});
+
 module.exports = DefaultTabBar;