Linting Components

src/components/SectionedOptionsTableCell.js

@@ -1,16 +1,18 @@
-import React, { Component } from 'react';
-import {View, Text, TouchableHighlight} from 'react-native';
-import ThemedComponent from "@Components/ThemedComponent";
-
-import StyleKit from "@Style/StyleKit"
+import React from 'react';
+import { View, Text, TouchableHighlight } from 'react-native';
+import ThemedComponent from '@Components/ThemedComponent';
+import StyleKit from '@Style/StyleKit';
 
 export default class SectionedOptionsTableCell extends ThemedComponent {
-
   rules() {
-    var rules = [StyleKit.styles.sectionedTableCell];
-    if(this.props.first) { rules.push(StyleKit.styles.sectionedTableCellFirst); }
-    if(this.props.height) {rules.push({height: this.props.height})};
-    if(this.props.extraStyles) {
+    let rules = [StyleKit.styles.sectionedTableCell];
+    if (this.props.first) {
+      rules.push(StyleKit.styles.sectionedTableCellFirst);
+    }
+    if (this.props.height) {
+      rules.push({ height: this.props.height });
+    }
+    if (this.props.extraStyles) {
       rules = rules.concat(this.props.extraStyles);
     }
     rules.push({
@@ -23,70 +25,83 @@ export default class SectionedOptionsTableCell extends ThemedComponent {
       paddingBottom: 0,
       paddingRight: 5,
       maxHeight: 45
-    })
+    });
     return rules;
   }
 
   render() {
     return (
       <View style={this.rules()}>
-        <Text style={[StyleKit.styles.sectionedAccessoryTableCellLabel, this.styles.titleStyles]}>{this.props.title}</Text>
+        <Text
+          style={[
+            StyleKit.styles.sectionedAccessoryTableCellLabel,
+            this.styles.titleStyles
+          ]}
+        >
+          {this.props.title}
+        </Text>
         <View style={this.styles.optionsContainerStyle}>
-          {this.props.options.map((option) => {
-            var buttonStyles = [this.styles.buttonStyles];
-            if(option.selected) {
+          {this.props.options.map(option => {
+            const buttonStyles = [this.styles.buttonStyles];
+            if (option.selected) {
               buttonStyles.push(this.styles.selectedButtonStyles);
             }
             return (
               <TouchableHighlight
-                underlayColor={StyleKit.variable("stylekitBorderColor")}
+                underlayColor={StyleKit.variables.stylekitBorderColor}
                 key={option.title}
-                style={[StyleKit.styles.view, this.styles.buttonContainerStyles]}
-                onPress={() => {this.props.onPress(option)}}>
-                  <Text style={buttonStyles}>{option.title}</Text>
+                style={[
+                  StyleKit.styles.view,
+                  this.styles.buttonContainerStyles
+                ]}
+                onPress={() => {
+                  this.props.onPress(option);
+                }}
+              >
+                <Text style={buttonStyles}>{option.title}</Text>
               </TouchableHighlight>
-            )
+            );
           })}
         </View>
       </View>
-    )
+    );
   }
 
   loadStyles() {
     this.styles = {
       titleStyles: {
-        width: "42%",
+        width: '42%',
         minWidth: 0
       },
 
       optionsContainerStyle: {
-        width: "58%",
+        width: '58%',
         flex: 1,
         flexDirection: 'row',
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: StyleKit.variable("stylekitBackgroundColor")
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: StyleKit.variables.stylekitBackgroundColor
       },
 
       buttonContainerStyles: {
-        borderLeftColor: StyleKit.variable("stylekitBorderColor"),
+        borderLeftColor: StyleKit.variables.stylekitBorderColor,
         borderLeftWidth: 1,
-        height: "100%",
+        height: '100%',
         flexGrow: 1,
         padding: 10,
         paddingTop: 12
       },
 
       buttonStyles: {
-        color: StyleKit.variable("stylekitNeutralColor"),
+        color: StyleKit.variables.stylekitNeutralColor,
         fontSize: 16,
-        textAlign: "center",
-        width: "100%",
+        textAlign: 'center',
+        width: '100%'
       },
 
       selectedButtonStyles: {
-        color: StyleKit.variable("stylekitInfoColor"),
+        color: StyleKit.variables.stylekitInfoColor
       }
-    }
+    };
   }
 }