[TextField] Add in support for multiline text fields

.eslintrc.js

@@ -68,6 +68,7 @@ module.exports = {
     'react/sort-prop-types': 'error', // airbnb do nothing here.
     'react/sort-comp': [2, {
       order: [
+        'type-annotations',
         'static-methods',
         'lifecycle',
         // 'properties', // not real -- NEEDS A PR!!!

docs/src/pages/component-demos/progress/LinearBuffer.js

@@ -13,6 +13,7 @@ const styleSheet = createStyleSheet('LinearBuffer', () => ({
 }));
 
 class LinearBuffer extends Component {
+  timer: number
   state = {
     completed: 0,
     buffer: 10,
@@ -26,8 +27,6 @@ class LinearBuffer extends Component {
     clearInterval(this.timer);
   }
 
-  timer: number
-
   progress = () => {
     const { completed } = this.state;
     if (completed > 100) {

docs/src/pages/component-demos/progress/LinearDeterminate.js

@@ -13,6 +13,7 @@ const styleSheet = createStyleSheet('LinearDeterminate', () => ({
 }));
 
 class LinearDeterminate extends Component {
+  timer: number
   state = {
     completed: 0,
   }
@@ -25,8 +26,6 @@ class LinearDeterminate extends Component {
     clearInterval(this.timer);
   }
 
-  timer: number
-
   progress = () => {
     const { completed } = this.state;
     if (completed > 100) {

docs/src/pages/component-demos/text-fields/TextFields.js

@@ -58,6 +58,21 @@ class TextFields extends Component {
           className={classes.input}
           type="password"
         />
+        <TextField
+          id="multiline flexible"
+          label="MultiLine"
+          multiline
+          defaultValue="Default Value"
+          className={classes.input}
+        />
+        <TextField
+          id="multiline static"
+          label="MultiLine"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+          className={classes.input}
+        />
       </div>
     );
   }

src/Input/AutoResizingTextArea.js

@@ -0,0 +1,204 @@
+// @flow weak
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { createStyleSheet } from 'jss-theme-reactor';
+import classnames from 'classnames';
+import EventListener from 'react-event-listener';
+import customPropTypes from '../utils/customPropTypes';
+
+const rowsHeight = 24;
+
+export const styleSheet = createStyleSheet('MuiTextarea', () => {
+  return {
+    root: {
+      position: 'relative', // because the shadow has position: 'absolute',
+      'margin-bottom': '-4px', // this is an unfortunate hack
+    },
+    textarea: {
+      width: '100%',
+      resize: 'none',
+      font: 'inherit',
+      padding: 0,
+      cursor: 'inherit',
+      boxSizing: 'border-box',
+      lineHeight: 'inherit',
+      border: 'none',
+      outline: 'none',
+      'background-color': 'rgba(0,0,0,0)',
+    },
+    shadow: {
+      resize: 'none',
+      // Overflow also needed to here to remove the extra row
+      // added to textareas in Firefox.
+      overflow: 'hidden',
+      // Visibility needed to hide the extra text area on ipads
+      visibility: 'hidden',
+      position: 'absolute',
+      height: 'auto',
+      whiteSpace: 'pre-wrap',
+    },
+  };
+});
+
+/**
+ * Input
+ */
+export default class AutoResizingTextArea extends Component {
+  shadow: HTMLInputElement;
+  singleLineShadow: HTMLInputElement;
+  input: HTMLInputElement;
+  value: string;
+
+  static propTypes = {
+    /**
+     * Override the inline-styles of the root element.
+     */
+    className: PropTypes.string,
+    defaultValue: PropTypes.any,
+    disabled: PropTypes.bool,
+    hintText: PropTypes.string,
+    onChange: PropTypes.func,
+    onHeightChange: PropTypes.func,
+    rows: PropTypes.number,
+    rowsMax: PropTypes.number,
+    shadowClassName: PropTypes.object,
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    rows: 1,
+  };
+
+  static contextTypes = {
+    styleManager: customPropTypes.muiRequired,
+  };
+
+  state = {
+    height: null,
+  };
+
+  componentWillMount() {
+    // <Input> expects the components it renders to respond to 'value'
+    this.value = this.props.defaultValue;
+    this.setState({
+      height: this.props.rows * rowsHeight,
+    });
+  }
+
+  componentDidMount() {
+    this.syncHeightWithShadow();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value ||
+        nextProps.rowsMax !== this.props.rowsMax) {
+      this.syncHeightWithShadow(nextProps.value, null, nextProps);
+    }
+  }
+
+  handleResize = (event) => {
+    this.syncHeightWithShadow(undefined, event);
+  };
+
+  getInputNode() {
+    return this.input;
+  }
+
+  setValue(value) {
+    this.getInputNode().value = value;
+    this.syncHeightWithShadow(value);
+  }
+
+  syncHeightWithShadow(newValue, event, props) {
+    const shadow = this.shadow;
+    const singleLineShadow = this.singleLineShadow;
+
+    const hasNewValue = (newValue && newValue !== '');
+    const displayText = this.props.hintText && !hasNewValue ? this.props.hintText : newValue;
+
+    if (displayText !== undefined) {
+      shadow.value = displayText;
+    }
+
+    const lineHeight = singleLineShadow.scrollHeight;
+    let newHeight = shadow.scrollHeight;
+
+    // Guarding for jsdom, where scrollHeight isn't present.
+    // See https://github.com/tmpvar/jsdom/issues/1013
+    if (newHeight === undefined) return;
+
+    props = props || this.props;
+
+    if (props.rowsMax >= props.rows) {
+      newHeight = Math.min(props.rowsMax * lineHeight, newHeight);
+    }
+
+    newHeight = Math.max(newHeight, lineHeight);
+
+    if (this.state.height !== newHeight) {
+      this.setState({
+        height: newHeight,
+      });
+
+      if (props.onHeightChange) {
+        props.onHeightChange(event, newHeight);
+      }
+    }
+  }
+
+  handleChange = (event) => {
+    const value = event.target.value;
+    this.syncHeightWithShadow(value);
+    this.value = value;
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
+  };
+
+  render() {
+    const {
+      onChange,
+      onHeightChange,
+      rows,
+      rowsMax,
+      hintText,
+      className,
+      ...other
+    } = this.props;
+
+    const { styleManager } = this.context;
+    const classes = styleManager.render(styleSheet);
+
+    return (
+      <div className={classnames(classes.root, className)}>
+        <EventListener target="window" onResize={this.handleResize} />
+        <textarea
+          ref={(c) => { this.singleLineShadow = c; }}
+          className={classnames(classes.shadow, classes.textarea)}
+          tabIndex="-1"
+          rows={1}
+          readOnly
+          value={''}
+        />
+        <textarea
+          ref={(c) => { this.shadow = c; }}
+          className={classnames(classes.shadow, classes.textarea)}
+          tabIndex="-1"
+          rows={this.props.rows}
+          defaultValue={this.props.defaultValue}
+          readOnly
+          value={this.props.value}
+        />
+        <textarea
+          {...other}
+          ref={(c) => { this.input = c; }}
+          rows={this.props.rows}
+          className={classes.textarea}
+          style={{ height: this.state.height }}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}

src/Input/AutoResizingTextArea.spec.js

@@ -0,0 +1,63 @@
+// @flow weak
+
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from 'src/test-utils';
+import AutoResizingTextArea from './AutoResizingTextArea';
+
+describe('<AutoResizingTextArea />', () => {
+  let shallow;
+
+  before(() => {
+    shallow = createShallow();
+  });
+
+  it('should render 3 textareas', () => {
+    const wrapper = shallow(<AutoResizingTextArea multiline />);
+    assert.strictEqual(wrapper.find('textarea').length, 3);
+  });
+  it('should change its height when the height of its shadows changes', () => {
+    const wrapper = shallow(<AutoResizingTextArea multiline onChange={(() => {})} />);
+    assert.strictEqual(wrapper.state().height, 24);
+
+    // refs don't work with shallow renders in enzyme so here we directly define
+    // 'this.input', 'this.shadow', etc. for this AutoResizingTextArea via wrapper.instance()
+    const textArea = wrapper.find('textarea').last();
+    wrapper.instance().input = textArea;
+    const shadow = wrapper.find('textarea').at(2);
+    wrapper.instance().shadow = shadow;
+    const singleLineShandow = wrapper.find('textarea').first();
+    wrapper.instance().singleLineShadow = singleLineShandow;
+
+    // jsdom doesn't support scroll height so we have to simulate it changing
+    // which makes this not so great of a test :(
+    shadow.scrollHeight = 43;
+    singleLineShandow.scrollHeight = 43;
+    textArea.simulate('change', { target: { value: 'x' } }); // this is needed to trigger the resize
+    assert.strictEqual(wrapper.state().height, 43);
+
+    shadow.scrollHeight = 24;
+    singleLineShandow.scrollHeight = 24;
+    textArea.simulate('change', { target: { value: '' } });
+    assert.strictEqual(wrapper.state().height, 24);
+  });
+
+  it('should set dirty', () => {
+    const wrapper = shallow(<AutoResizingTextArea multiline />);
+    assert.strictEqual(wrapper.find('textarea').length, 3);
+
+    // refs don't work with shallow renders in enzyme so here we directly define
+    // 'this.input', 'this.shadow', etc. for this AutoResizingTextArea via wrapper.instance()
+    const textArea = wrapper.find('textarea').last();
+    wrapper.instance().input = textArea;
+    const shadow = wrapper.find('textarea').at(2);
+    wrapper.instance().shadow = shadow;
+    const singleLineShandow = wrapper.find('textarea').first();
+    wrapper.instance().singleLineShadow = singleLineShandow;
+
+    textArea.simulate('change', { target: { value: 'x' } }); // this is needed to trigger the resize
+    assert.strictEqual(wrapper.instance().value, 'x');
+    textArea.simulate('change', { target: { value: '' } }); // this is needed to trigger the resize
+    assert.strictEqual(wrapper.instance().value, '');
+  });
+});