Support rendering leading Icon to TextField (#815)

* support rendering TextField leading Icon

* Don't allow rendering prefix or leadingIcon with floatingPlaceholder

* remove empty lines

* Remove call for unimplemented onLeadingIconLayout

* remove tab

Author: ethanshar

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

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {Colors, View, Text, TextField, Slider, ColorPalette} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Spacings, View, Text, TextField} from 'react-native-ui-lib'; //eslint-disable-line
 
 import {
   renderBooleanOption,
@@ -21,13 +21,19 @@ const GUIDING_TEXTS = {
   floatingPlaceholder: 'Floating Placeholder'
 };
 
+const LEADING_ICON = {
+  source: Assets.icons.demo.search,
+  style: {marginRight: Spacings.s1}
+};
+
 export default class BasicTextFieldScreen extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       hideUnderline: false,
       withPrefix: false,
+      withLeadingIcon: false,
       underlineColor: undefined,
       guidingText: GUIDING_TEXTS.none,
       disabled: false,
@@ -45,6 +51,7 @@ export default class BasicTextFieldScreen extends Component {
     const {
       hideUnderline,
       withPrefix,
+      withLeadingIcon,
       underlineColor,
       guidingText,
       titleColor,
@@ -67,6 +74,7 @@ export default class BasicTextFieldScreen extends Component {
             hideUnderline={hideUnderline}
             underlineColor={underlineColor}
             prefix={withPrefix ? 'prefix://' : undefined}
+            leadingIcon={withLeadingIcon ? LEADING_ICON : undefined}
             title={guidingText === GUIDING_TEXTS.useTitle ? 'Title' : undefined}
             titleColor={titleColor}
             floatingPlaceholder={guidingText === GUIDING_TEXTS.floatingPlaceholder}
@@ -98,6 +106,7 @@ export default class BasicTextFieldScreen extends Component {
             {renderBooleanOption.call(this, 'Centered', 'centered')}
             {renderBooleanOption.call(this, 'Hide Underline', 'hideUnderline')}
             {renderBooleanOption.call(this, 'With Prefix', 'withPrefix')}
+            {renderBooleanOption.call(this, 'With leadingIcon', 'withLeadingIcon')}
             {renderColorOption.call(this, 'Underline Color', 'underlineColor')}
             {renderRadioGroup.call(this, 'Guiding Text', 'guidingText', GUIDING_TEXTS)}
             {renderColorOption.call(this, 'Title Color', 'titleColor')}
@@ -109,4 +118,3 @@ export default class BasicTextFieldScreen extends Component {
     );
   }
 }
-

src/components/inputs/TextField.js

@@ -125,7 +125,7 @@ export default class TextField extends BaseInput {
      */
     transformer: PropTypes.func,
     /**
-     * Pass to render a prefix text as part of the input
+     * Pass to render a prefix text as part of the input (doesn't work with floatingPlaceholder)
      */
     prefix: PropTypes.string,
     /**
@@ -172,7 +172,11 @@ export default class TextField extends BaseInput {
       iconColor: PropTypes.string,
       onPress: PropTypes.func,
       style: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
-    })
+    }),
+    /**
+     * Pass to render a leading icon to the TextInput value. Accepts Image props (doesn't work with floatingPlaceholder)
+     */
+    leadingIcon: PropTypes.shape(Image.propTypes)
   };
 
   static defaultProps = {
@@ -310,8 +314,7 @@ export default class TextField extends BaseInput {
   }
 
   getTopPaddings() {
-    const {floatingPlaceholder} = this.getThemeProps();
-    return floatingPlaceholder ? (this.shouldShowTopError() ? undefined : 25) : undefined;
+    return this.shouldFakePlaceholder() ? (this.shouldShowTopError() ? undefined : 25) : undefined;
   }
 
   isDisabled() {
@@ -345,8 +348,9 @@ export default class TextField extends BaseInput {
   }
 
   shouldFakePlaceholder() {
-    const {floatingPlaceholder, centered} = this.getThemeProps();
-    return Boolean(floatingPlaceholder && !centered && !this.shouldShowTopError());
+    const {floatingPlaceholder, centered, leadingIcon, prefix} = this.getThemeProps();
+
+    return !leadingIcon && !prefix && Boolean(floatingPlaceholder && !centered && !this.shouldShowTopError());
   }
 
   shouldShowError() {
@@ -389,6 +393,9 @@ export default class TextField extends BaseInput {
             style={[
               this.styles.placeholder,
               typography,
+              // TODO: we need to exclude completely any dependency on line height
+              // in this component since it always breaks alignments
+              {lineHeight: undefined},
               {
                 transform: [
                   {
@@ -627,7 +634,7 @@ export default class TextField extends BaseInput {
   }
 
   render() {
-    const {expandable, containerStyle, underlineColor, useTopErrors, hideUnderline} = this.getThemeProps();
+    const {expandable, containerStyle, underlineColor, useTopErrors, hideUnderline, leadingIcon} = this.getThemeProps();
     const underlineStateColor = this.getStateColor(underlineColor || UNDERLINE_COLOR_BY_STATE);
 
     return (
@@ -642,6 +649,7 @@ export default class TextField extends BaseInput {
             {paddingTop: this.getTopPaddings()}
           ]}
         >
+          {leadingIcon && <Image {...leadingIcon}/>}
           {this.renderPrefix()}
           {this.renderPlaceholder()}
           {expandable ? this.renderExpandableInput() : this.renderTextInput()}