Support rendering prefix in TextField (#765)

Author: ethanshar

demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js

@@ -27,6 +27,7 @@ export default class BasicTextFieldScreen extends Component {
 
     this.state = {
       hideUnderline: false,
+      withPrefix: false,
       underlineColor: undefined,
       guidingText: GUIDING_TEXTS.none,
       disabled: false,
@@ -43,6 +44,7 @@ export default class BasicTextFieldScreen extends Component {
   render() {
     const {
       hideUnderline,
+      withPrefix,
       underlineColor,
       guidingText,
       titleColor,
@@ -64,6 +66,7 @@ export default class BasicTextFieldScreen extends Component {
             placeholder={disabled ? 'Disabled' : 'Placeholder'}
             hideUnderline={hideUnderline}
             underlineColor={underlineColor}
+            prefix={withPrefix ? 'prefix://' : undefined}
             title={guidingText === GUIDING_TEXTS.useTitle ? 'Title' : undefined}
             titleColor={titleColor}
             floatingPlaceholder={guidingText === GUIDING_TEXTS.floatingPlaceholder}
@@ -94,6 +97,7 @@ export default class BasicTextFieldScreen extends Component {
             {renderBooleanOption.call(this, 'Disabled', 'disabled')}
             {renderBooleanOption.call(this, 'Centered', 'centered')}
             {renderBooleanOption.call(this, 'Hide Underline', 'hideUnderline')}
+            {renderBooleanOption.call(this, 'With Prefix', 'withPrefix')}
             {renderColorOption.call(this, 'Underline Color', 'underlineColor')}
             {renderRadioGroup.call(this, 'Guiding Text', 'guidingText', GUIDING_TEXTS)}
             {renderColorOption.call(this, 'Title Color', 'titleColor')}

src/components/inputs/TextField.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, Animated, TextInput as RNTextInput, Image as RNImage} from 'react-native';
 import {Constants} from '../../helpers';
-import {Colors, Typography} from '../../style';
+import {Colors, Typography, Spacings} from '../../style';
 import BaseInput from './BaseInput';
 import Modal from '../modal';
 import TextArea from './TextArea';
@@ -125,6 +125,14 @@ export default class TextField extends BaseInput {
      * transform function executed on value and return transformed value
      */
     transformer: PropTypes.func,
+    /**
+     * Pass to render a prefix text as part of the input
+     */
+    prefix: PropTypes.string,
+    /**
+     * The prefix style
+     */
+    prefixStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
     /**
      * Fixed title that will displayed above the input (note: floatingPlaceholder MUST be 'false')
      */
@@ -417,6 +425,14 @@ export default class TextField extends BaseInput {
     }
   }
 
+  renderPrefix() {
+    const {prefix, prefixStyle} = this.props;
+    if (prefix) {
+      const typography = this.getTypography();
+      return <Text style={[this.styles.prefix, typography, {lineHeight: undefined}, prefixStyle]}>{prefix}</Text>;
+    }
+  }
+
   renderTitle() {
     const {floatingPlaceholder, title, titleColor, titleStyle} = this.getThemeProps();
     const color = this.getStateColor(titleColor || PLACEHOLDER_COLOR_BY_STATE);
@@ -525,7 +541,7 @@ export default class TextField extends BaseInput {
       style,
       placeholderTextColor,
       multiline,
-      hideUnderline,
+      // hideUnderline,
       numberOfLines,
       expandable,
       rightIconSource,
@@ -542,7 +558,7 @@ export default class TextField extends BaseInput {
     const inputStyle = [
       hasRightElement && this.styles.rightElement,
       this.styles.input,
-      hideUnderline && this.styles.inputWithoutUnderline,
+      // hideUnderline && this.styles.inputWithoutUnderline,
       {...typographyStyle},
       Constants.isAndroid && {lineHeight},
       expandable && {maxHeight: lineHeight * (Constants.isAndroid ? 3 : 3.3)},
@@ -627,6 +643,7 @@ export default class TextField extends BaseInput {
             {paddingTop: this.getTopPaddings()}
           ]}
         >
+          {this.renderPrefix()}
           {this.renderPlaceholder()}
           {expandable ? this.renderExpandableInput() : this.renderTextInput()}
           {this.renderRightButton()}
@@ -697,34 +714,40 @@ function createStyles({centered, multiline, expandable}) {
       flexDirection: 'row',
       justifyContent: centered ? 'center' : undefined,
       borderBottomWidth: 1,
-      borderColor: Colors.dark70
+      borderColor: Colors.dark70, 
+      paddingBottom: Constants.isIOS ? 10 : 5
     },
     innerContainerWithoutUnderline: {
-      borderBottomWidth: 0
+      borderBottomWidth: 0,
+      paddingBottom: 0
     },
     input: {
       flexGrow: 1,
       textAlign: centered ? 'center' : inputTextAlign,
       backgroundColor: 'transparent',
-      marginBottom: Constants.isIOS ? 10 : 5,
+      // marginBottom: Constants.isIOS ? 10 : 5,
       padding: 0, // for Android
       textAlignVertical: 'top', // for Android
       borderColor: 'transparent', // borderColor & borderWidth is a fix for collapsing issue on Android
-      borderWidth: 1 // for Android
+      borderWidth: Constants.isAndroid ? 1 : undefined // for Android
     },
     expandableInput: {
       flexGrow: 1,
       flexDirection: 'row',
       alignItems: 'center'
     },
-    inputWithoutUnderline: {
-      marginBottom: undefined
-    },
+    // inputWithoutUnderline: {
+    //   marginBottom: undefined
+    // },
     expandableModalContent: {
       flex: 1,
       paddingTop: 15,
       paddingHorizontal: 20
     },
+    prefix: {
+      color: Colors.grey30,
+      marginRight: Spacings.s1
+    },
     placeholder: {
       textAlign: 'left'
     },