extract more custom cells to components/

Author: hawkrives

source/views/components/cells/button.js

@@ -0,0 +1,48 @@
+// @flow
+
+import React from 'react'
+import {StyleSheet, Text} from 'react-native'
+import {Cell} from 'react-native-tableview-simple'
+import * as c from '../../components/colors'
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'left',
+  },
+  active: {
+    color: c.infoBlue,
+  },
+  disabled: {
+    color: c.iosDisabledText,
+  },
+})
+
+export function ButtonCell({
+  indeterminate,
+  disabled,
+  onPress,
+  title,
+}: {
+  indeterminate?: boolean,
+  disabled?: boolean,
+  onPress: () => any,
+  title: string,
+}) {
+  return (
+    <Cell
+      titleTextStyle={styles.title}
+      isDisabled={indeterminate || disabled}
+      onPress={onPress}
+      title={
+        <Text
+          style={[
+            styles.text,
+            indeterminate || disabled ? styles.disabled : styles.active,
+          ]}
+        >
+          {title}
+        </Text>
+      }
+    />
+  )
+}

source/views/settings/components/push-button.js renamed to source/views/components/cells/push-button.js

@@ -1,23 +1,7 @@
 // @flow
-import React from 'react'
-import {StyleSheet, Text} from 'react-native'
-import {Cell} from 'react-native-tableview-simple'
-import * as c from '../../components/colors'
 
-const styles = StyleSheet.create({
-  button: {
-    justifyContent: 'flex-start',
-  },
-  text: {
-    fontSize: 16,
-  },
-  active: {
-    color: c.infoBlue,
-  },
-  disabled: {
-    color: c.iosDisabledText,
-  },
-})
+import React from 'react'
+import {ButtonCell} from '../../components/cells/button'
 
 export function LoginButton({
   loading,
@@ -32,22 +16,16 @@ export function LoginButton({
   onPress: () => any,
   label: string,
 }) {
-  let loginTextStyle = loading || disabled ? styles.disabled : styles.active
-
-  const contents = (
-    <Text style={[styles.text, loginTextStyle]}>
-      {loading
-        ? `Logging in to ${label}…`
-        : loggedIn ? `Sign Out of ${label}` : `Sign In to ${label}`}
-    </Text>
-  )
-
   return (
-    <Cell
-      contentContainerStyle={styles.button}
-      isDisabled={loading || disabled}
+    <ButtonCell
+      disabled={loading || disabled}
+      indeterminate={loading}
       onPress={onPress}
-      title={contents}
+      title={
+        loading
+          ? `Logging in to ${label}…`
+          : loggedIn ? `Sign Out of ${label}` : `Sign In to ${label}`
+      }
     />
   )
 }