Merge pull request evblurbs#1 from mlabrum/patch-1

Add support for symbols on the left hand side
f0rr0 · Sep 16, 2016 · a5bfc6f · a5bfc6f
2 parents d791821 + a32aac6
commit a5bfc6f
Showing 1 changed file with 35 additions and 9 deletions.
diff --git a/lib/TextField.js b/lib/TextField.js
@@ -1,6 +1,6 @@
 'use strict';
 import React, {Component, PropTypes} from "react";
-import {View, TextInput, StyleSheet} from "react-native";
+import {View, TextInput, Text, StyleSheet} from "react-native";
 
 import Underline from './Underline';
 import FloatingLabel from './FloatingLabel';
@@ -61,16 +61,26 @@ export default class TextField extends Component {
       multiline,
       ...props
     } = this.props;
+
+    const textInputComposedStyles = [dense ? styles.denseTextInput : styles.textInput, {
+			color: textColor
+		}, (this.state.isFocused && textFocusColor) ? {
+			color: textFocusColor
+		} : {}, (!this.state.isFocused && textBlurColor) ? {
+			color: textBlurColor
+		} : {}, inputStyle,  this.state.height ? {height: this.state.height} : {}]
+
     return (
       <View style={[dense ? styles.denseWrapper : styles.wrapper, this.state.height ? {height: undefined}: {}, wrapperStyle]} ref="wrapper">
+        <View style={[styles.row, styles.flex]}>
+          {
+            this.props.symbol && this.props.value ?
+              <Text style={[textInputComposedStyles, styles.symbol]}>{this.props.symbol}</Text>
+            : null
+          }
+        <View style={styles.flex}>
         <TextInput
-          style={[dense ? styles.denseTextInput : styles.textInput, {
-            color: textColor
-          }, (this.state.isFocused && textFocusColor) ? {
-            color: textFocusColor
-          } : {}, (!this.state.isFocused && textBlurColor) ? {
-            color: textBlurColor
-          } : {}, inputStyle,  this.state.height ? {height: this.state.height} : {}]}
+          style={[textInputComposedStyles]}
           multiline={multiline}
           onFocus={() => {
             this.setState({isFocused: true});
@@ -98,6 +108,8 @@ export default class TextField extends Component {
           value={this.state.text}
           {...props}
         />
+      </View>
+    </View>
         <Underline
           ref="underline"
           highlightColor={highlightColor}
@@ -141,7 +153,8 @@ TextField.propTypes = {
   labelStyle: PropTypes.object,
   multiline: PropTypes.bool,
   autoGrow: PropTypes.bool,
-  height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number])
+  height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number]),
+  symbol: PropTypes.string
 };
 
 TextField.defaultProps = {
@@ -158,6 +171,12 @@ TextField.defaultProps = {
 };
 
 const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  row: {
+    flexDirection: 'row'
+  },
   wrapper: {
     height: 72,
     paddingTop: 30,
@@ -182,5 +201,12 @@ const styles = StyleSheet.create({
     lineHeight: 24,
     paddingBottom: 3,
     textAlignVertical: 'top'
+  },
+  symbol: {
+    textAlignVertical: 'auto',
+    lineHeight: undefined,
+    height: undefined,
+    position: 'relative',
+    bottom: -10
   }
 });