Merge pull request #2701 from alitaheri/extract-floating-label

[TextField] Extract floating label

src/TextField/TextField.jsx

@@ -9,6 +9,7 @@ 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 TextFieldLabel from './TextFieldLabel';
 import TextFieldUnderline from './TextFieldUnderline';
 import warning from 'warning';
 
@@ -117,6 +118,7 @@ const TextField = React.createClass({
     let props = (this.props.children) ? this.props.children.props : this.props;
 
     return {
+      isFocused: false,
       errorText: this.props.errorText,
       hasValue: isValid(props.value) || isValid(props.defaultValue) ||
         (props.valueLink && isValid(props.valueLink.value)),
@@ -187,16 +189,7 @@ const TextField = React.createClass({
         transition: Transitions.easeOut(),
       },
       floatingLabel: {
-        position: 'absolute',
-        lineHeight: '22px',
-        top: 38,
-        opacity: 1,
         color: hintColor,
-        transition: Transitions.easeOut(),
-        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)',
@@ -221,15 +214,12 @@ const TextField = React.createClass({
       font: 'inherit',
     });
 
-
     if (this.state.isFocused) {
       styles.floatingLabel.color = focusColor;
-      styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)';
     }
 
     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)';
     }
 
     if (props.floatingLabelText) {
@@ -288,12 +278,15 @@ const TextField = React.createClass({
     ) : null;
 
     let floatingLabelTextElement = floatingLabelText ? (
-      <label
-        style={this.prepareStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
+      <TextFieldLabel
+        muiTheme={this.state.muiTheme}
+        style={this.mergeStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
         htmlFor={inputId}
+        shrink={this.state.hasValue || this.state.isFocused}
+        disabled={disabled}
         onTouchTap={this.focus}>
         {floatingLabelText}
-      </label>
+      </TextFieldLabel>
     ) : null;
 
     let inputProps;

src/TextField/TextFieldLabel.jsx

@@ -0,0 +1,97 @@
+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,
+
+  /**
+   * The css class name of the root element.
+   */
+  className: React.PropTypes.string,
+
+  /**
+   * The label contents.
+   */
+  children: React.PropTypes.node,
+
+  /**
+   * Disables the label if set to true.
+   */
+  disabled: React.PropTypes.bool,
+
+  /**
+   * True if the floating label should shrink.
+   */
+  shrink: React.PropTypes.bool,
+
+  /**
+   * The id of the target element that this label should refer to.
+   */
+  htmlFor: React.PropTypes.string,
+
+  /**
+   * Callback function for when the label is selected via a touch tap.
+   */
+  onTouchTap: React.PropTypes.func,
+
+  /**
+   * Override the inline-styles of the floating label.
+   */
+  style: React.PropTypes.object,
+};
+
+const defaultProps = {
+  disabled: false,
+  shrink: false,
+};
+
+const TextFieldLabel = (props) => {
+
+  const {
+    muiTheme,
+    className,
+    children,
+    disabled,
+    shrink,
+    htmlFor,
+    style,
+    onTouchTap,
+  } = props;
+
+  const styles = {
+    root: {
+      position: 'absolute',
+      lineHeight: '22px',
+      top: 38,
+      transition: Transitions.easeOut(),
+      zIndex: 1, // Needed to display label above Chrome's autocomplete field background
+      cursor: disabled ? 'default' : 'text',
+      transform: shrink
+        ? 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)'
+        : 'scale(1) translate3d(0, 0, 0)',
+      transformOrigin: 'left top',
+      pointerEvents: shrink ? 'none' : 'auto',
+      userSelect: 'none',
+    },
+  };
+
+  return (
+    <label
+      className={className}
+      style={styleUtils.prepareStyles(muiTheme, styles.root, style)}
+      htmlFor={htmlFor}
+      onTouchTap={onTouchTap}
+    >
+      {children}
+    </label>
+  );
+};
+
+TextFieldLabel.propTypes = propTypes;
+TextFieldLabel.defaultProps = defaultProps;
+
+export default TextFieldLabel;