[TextField] added left/right icon

mui · Apr 18, 2016 · cae51e5 · cae51e5
1 parent 8d124a5
commit cae51e5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/docs/src/app/components/pages/components/TextField/ExampleCustomize.js b/docs/src/app/components/pages/components/TextField/ExampleCustomize.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import TextField from 'material-ui/TextField';
+import ActionGrade from 'material-ui/svg-icons/action/grade';
 import {orange500} from 'material-ui/styles/colors';
 
 const styles = {
@@ -30,6 +31,14 @@ const TextFieldExampleCustomize = () => (
       hintText="Custom Underline Focus Color"
       underlineFocusStyle={styles.underlineStyle}
     />
+    <TextField
+      leftIcon={<ActionGrade color={orange500}/>}
+      hintText="Left icon"
+    />
+    <TextField
+      rightIcon={<ActionGrade color={orange500}/>}
+      hintText="Right icon"
+    />
   </div>
 );
 

diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js
@@ -10,6 +10,8 @@ import TextFieldHint from './TextFieldHint';
 import TextFieldLabel from './TextFieldLabel';
 import TextFieldUnderline from './TextFieldUnderline';
 import warning from 'warning';
+import ActionGrade from 'material-ui/svg-icons/action/grade';
+import {pinkA200, transparent} from 'material-ui/styles/colors';
 
 const getStyles = (props, context, state) => {
   const {
@@ -26,16 +28,21 @@ const getStyles = (props, context, state) => {
   } = context.muiTheme;
 
   const styles = {
+    wrapper: {
+      width: props.fullWidth ? '100%' : 256,
+      backgroundColor: backgroundColor,
+      transition: transitions.easeOut('200ms', 'height'),
+    },
+    icon: {
+      verticalAlign: 'middle',
+    },
     root: {
       fontSize: 16,
       lineHeight: '24px',
-      width: props.fullWidth ? '100%' : 256,
       height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48),
       display: 'inline-block',
       position: 'relative',
-      backgroundColor: backgroundColor,
       fontFamily: baseTheme.fontFamily,
-      transition: transitions.easeOut('200ms', 'height'),
     },
     error: {
       position: 'relative',
@@ -183,6 +190,11 @@ class TextField extends React.Component {
      */
     inputStyle: React.PropTypes.object,
 
+    /**
+     * This is the `SvgIcon` or `FontIcon` to be displayed on the left side.
+     */
+    leftIcon: React.PropTypes.element,
+
     /**
      * If true, a textarea element will be rendered.
      * The textarea also grows and shrinks according to the number of lines.
@@ -220,6 +232,12 @@ class TextField extends React.Component {
      */
     onKeyDown: React.PropTypes.func,
 
+    /**
+     * This is the `SvgIcon` or `FontIcon` to be displayed on the right side.
+     */
+    rightIcon: React.PropTypes.element,
+
+
     /**
      * Number of rows to display when multiLine option is set to true.
      */
@@ -421,6 +439,7 @@ class TextField extends React.Component {
       hintStyle,
       id,
       inputStyle,
+      leftIcon,
       multiLine,
       onBlur, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
@@ -431,6 +450,7 @@ class TextField extends React.Component {
       underlineFocusStyle,
       underlineShow,
       underlineStyle,
+      rightIcon,
       rows,
       rowsMax,
       textareaStyle,
@@ -445,6 +465,26 @@ class TextField extends React.Component {
       <div style={prepareStyles(styles.error)}>{this.state.errorText}</div>
     );
 
+    let leftIconElement;
+    if (leftIcon) {
+      leftIconElement = React.cloneElement(this.props.leftIcon,
+        {
+          ...this.props.leftIcon,
+          key: 'leftIcon',
+          style: Object.assign({}, styles.icon, this.props.leftIcon.style),
+        });
+    }
+
+    let rightIconElement;
+    if (rightIcon) {
+      rightIconElement = React.cloneElement(this.props.rightIcon,
+        {
+          ...this.props.rightIcon,
+            key: 'rightIcon',
+          style: Object.assign({}, styles.icon, this.props.rightIcon.style),
+        });
+    }
+
     const floatingLabelTextElement = floatingLabelText && (
       <TextFieldLabel
         muiTheme={this.context.muiTheme}
@@ -499,6 +539,8 @@ class TextField extends React.Component {
     }
 
     return (
+      <div style={styles.wrapper}>
+      {leftIconElement}
       <div className={className} style={prepareStyles(Object.assign(styles.root, style))}>
         {floatingLabelTextElement}
         {hintText ?
@@ -527,6 +569,8 @@ class TextField extends React.Component {
         }
         {errorTextElement}
       </div>
+      {rightIconElement}
+      </div>
     );
   }
 }