move textfield from login to components

also added ability to hide the label and custom label widths

Author: hawkrives

source/views/components/cells/textfield.js

@@ -0,0 +1,99 @@
+// @flow
+import React from 'react'
+import {StyleSheet, Text, Platform, TextInput} from 'react-native'
+import {Cell} from 'react-native-tableview-simple'
+import {Row} from '../../components/layout'
+import * as c from '../../components/colors'
+
+const styles = StyleSheet.create({
+  label: {
+    width: 90,
+    fontSize: 16,
+    marginTop: Platform.OS === 'ios' ? -2 : 0, // lines the label up with the text on iOS
+    alignSelf: 'center',
+  },
+  hiddenLabel: {
+    width: 0,
+  },
+  customTextInput: {
+    flex: 1,
+  },
+  loginCell: {
+    height: Platform.OS === 'android' ? 65 : 44,
+    alignItems: 'stretch',
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+})
+
+export class CellTextField extends React.Component {
+  static defaultProps = {
+    disabled: false,
+    placeholder: '',
+    _ref: () => {},
+    returnKeyType: 'default',
+    secureTextEntry: false,
+  }
+
+  props: {
+    label?: string,
+    _ref: () => any,
+    disabled: boolean,
+    onChangeText: string => any,
+    onSubmitEditing: string => any,
+    placeholder: string,
+    returnKeyType: 'done' | 'next' | 'default',
+    secureTextEntry: boolean,
+    value: string,
+    labelWidth?: number,
+  }
+
+  _input: any
+  focusInput = () => this._input.focus()
+
+  cacheRef = (ref: any) => {
+    this._input = ref
+    this.props._ref(ref)
+  }
+
+  onSubmit = () => {
+    this.props.onSubmitEditing(this.props.value)
+  }
+
+  render() {
+    const labelWidthStyle = this.props.labelWidth !== null &&
+      this.props.labelWidth !== undefined
+      ? {width: this.props.labelWidth}
+      : null
+
+    const label = this.props.label
+      ? <Text onPress={this.focusInput} style={[styles.label, labelWidthStyle]}>
+          {this.props.label}
+        </Text>
+      : <Text style={styles.hiddenLabel} />
+
+    return (
+      <Cell
+        contentContainerStyle={styles.loginCell}
+        cellContentView={label}
+        cellAccessoryView={
+          <TextInput
+            ref={this.cacheRef}
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            disabled={this.props.disabled}
+            onChangeText={this.props.onChangeText}
+            onSubmitEditing={this.onSubmit}
+            placeholder={this.props.placeholder}
+            placeholderTextColor={c.iosPlaceholderText}
+            returnKeyType={this.props.returnKeyType}
+            secureTextEntry={this.props.secureTextEntry}
+            style={[styles.customTextInput]}
+            value={this.props.value}
+          />
+        }
+      />
+    )
+  }
+}

source/views/settings/components/login-field.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react'
 import {Cell, Section} from 'react-native-tableview-simple'
-import {LoginField} from '../components/login-field'
+import {CellTextField} from '../../components/cells/textfield'
 import {LoginButton} from '../components/login-button'
 import {
   logInViaCredentials,
@@ -57,7 +57,7 @@ class CredentialsLoginSection extends React.Component {
         header="ST. OLAF LOGIN"
         footer="St. Olaf login enables the "meals remaining" feature."
       >
-        <LoginField
+        <CellTextField
           label="Username"
           _ref={ref => (this._usernameInput = ref)}
           disabled={loading}
@@ -69,7 +69,7 @@ class CredentialsLoginSection extends React.Component {
           value={username}
         />
 
-        <LoginField
+        <CellTextField
           label="Password"
           _ref={ref => (this._passwordInput = ref)}
           disabled={loading}