Merge pull request #2567 from newoga/text-field-hint

[TextField] Separate TextFieldHint into separate internal component.
mui · Dec 17, 2015 · 36af0e5 · 36af0e5
2 parents 7e942cb + baacb87
commit 36af0e5
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 29 deletions.
diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx
@@ -8,6 +8,7 @@ import EnhancedTextarea from '../enhanced-textarea';
 import DefaultRawTheme from '../styles/raw-themes/light-raw-theme';
 import ThemeManager from '../styles/theme-manager';
 import ContextPure from '../mixins/context-pure';
+import TextFieldHint from './TextFieldHint';
 import TextFieldUnderline from './TextFieldUnderline';
 import warning from 'warning';
 
@@ -186,13 +187,17 @@ const TextField = React.createClass({
         color: errorColor,
         transition: Transitions.easeOut(),
       },
-      hint: {
+      floatingLabel: {
         position: 'absolute',
         lineHeight: '22px',
+        top: 38,
         opacity: 1,
         color: hintColor,
         transition: Transitions.easeOut(),
-        bottom: 12,
+        zIndex: 1, // Needed to display label above Chrome's autocomplete field background
+        cursor: 'text',
+        transform: 'scale(1) translate3d(0, 0, 0)',
+        transformOrigin: 'left top',
       },
       input: {
         tapHighlightColor: 'rgba(0,0,0,0)',
@@ -210,17 +215,6 @@ const TextField = React.createClass({
 
     styles.error = this.mergeStyles(styles.error, props.errorStyle);
 
-    styles.floatingLabel = this.mergeStyles(styles.hint, {
-      lineHeight: '22px',
-      top: 38,
-      bottom: 'none',
-      opacity: 1,
-      zIndex: 1, // Needed to display label above Chrome's autocomplete field background
-      cursor: 'text',
-      transform: 'scale(1) translate3d(0, 0, 0)',
-      transformOrigin: 'left top',
-    });
-
     styles.textarea = this.mergeStyles(styles.input, {
       marginTop: props.floatingLabelText ? 36 : 12,
       marginBottom: props.floatingLabelText ? -36 : -12,
@@ -237,17 +231,11 @@ const TextField = React.createClass({
     if (this.state.hasValue) {
       styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)';
-      styles.hint.opacity = 0;
     }
 
     if (props.floatingLabelText) {
-      styles.hint.opacity = 0;
       styles.input.boxSizing = 'border-box';
 
-      if (this.state.isFocused && !this.state.hasValue) {
-        styles.hint.opacity = 1;
-      }
-
       if (!props.multiLine) {
         styles.input.marginTop = 14;
       }
@@ -257,10 +245,6 @@ const TextField = React.createClass({
       }
     }
 
-    if (props.style && props.style.height) {
-      styles.hint.lineHeight = props.style.height;
-    }
-
     if (this.state.errorText) {
       if (this.state.isFocused) {
         styles.floatingLabel.color = styles.error.color;
@@ -285,6 +269,7 @@ const TextField = React.createClass({
       onBlur,
       onChange,
       onFocus,
+      style,
       type,
       underlineDisabledStyle,
       underlineFocusStyle,
@@ -303,10 +288,6 @@ const TextField = React.createClass({
       <div style={this.prepareStyles(styles.error)}>{this.state.errorText}</div>
     ) : null;
 
-    let hintTextElement = hintText ? (
-      <div style={this.prepareStyles(styles.hint, hintStyle)}>{hintText}</div>
-    ) : null;
-
     let floatingLabelTextElement = floatingLabelText ? (
       <label
         style={this.prepareStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
@@ -362,9 +343,17 @@ const TextField = React.createClass({
     return (
       <div className={className} style={this.prepareStyles(styles.root, this.props.style)}>
         {floatingLabelTextElement}
-        {hintTextElement}
+        {hintText ?
+          <TextFieldHint
+            muiTheme={this.state.muiTheme}
+            show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused))}
+            style={hintStyle}
+            text={hintText}
+          /> :
+          null
+        }
         {inputElement}
-        {this.props.underlineShow ?
+        {underlineShow ?
           <TextFieldUnderline
             disabled={disabled}
             disabledStyle={underlineDisabledStyle}

diff --git a/src/TextField/TextFieldHint.jsx b/src/TextField/TextFieldHint.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import Transitions from '../styles/transitions';
+import styleUtils from '../utils/styles';
+
+const propTypes = {
+  /**
+   * The material-ui theme applied to this component.
+   */
+  muiTheme: React.PropTypes.object.isRequired,
+
+  /**
+   * True if the hint text should be visible.
+   */
+  show: React.PropTypes.bool,
+
+  /**
+   * Override the inline-styles of the hint text.
+   */
+  style: React.PropTypes.object,
+
+  /**
+   * The hint text displayed.
+   */
+  text: React.PropTypes.string,
+};
+
+const defaultProps = {
+  show: true,
+};
+
+const TextFieldHint = (props) => {
+
+  const {
+    muiTheme,
+    show,
+    style,
+    text,
+  } = props;
+
+  const {
+    textField: {
+      hintColor,
+    },
+  } = muiTheme;
+
+  const styles = {
+    root: {
+      position: 'absolute',
+      opacity: show ? 1 : 0,
+      color: hintColor,
+      transition: Transitions.easeOut(),
+      bottom: 12,
+    },
+  };
+
+  return (
+    <div
+      style={styleUtils.prepareStyles(muiTheme, styles.root, style)}>{text}
+    </div>
+  );
+};
+
+TextFieldHint.propTypes = propTypes;
+TextFieldHint.defaultProps = defaultProps;
+
+export default TextFieldHint;