Add support for clearOnUnmount

src/components/TextInputField/TextInputField.js

@@ -1,64 +1,77 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { Field } from 'redux-form';
 import classNames from 'classnames';
 import { ValidationError } from '../../components';
 
 import css from './TextInputField.css';
 
-const TextInputFieldComponent = props => {
-  const {
-    rootClassName,
-    className,
-    id,
-    label,
-    type,
-    input,
-    meta,
-    ...rest
-  } = props;
-
-  if (label && !id) {
-    throw new Error('id required when a label is given');
+class TextInputFieldComponent extends Component {
+  componentWillUnmount() {
+    if (this.props.clearOnUnmount) {
+      this.props.input.onChange('');
+    }
   }
+  render() {
+    /* eslint-disable no-unused-vars */
+    const {
+      rootClassName,
+      className,
+      clearOnUnmount,
+      id,
+      label,
+      type,
+      input,
+      meta,
+      ...rest
+    } = this.props;
+    /* eslint-enable no-unused-vars */
 
-  const { valid, invalid, touched, error } = meta;
-  const isTextarea = type === 'textarea';
+    if (label && !id) {
+      throw new Error('id required when a label is given');
+    }
 
-  // Error message and input error styles are only shown if the
-  // field has been touched and the validation has failed.
-  const hasError = touched && invalid && error;
+    const { valid, invalid, touched, error } = meta;
+    const isTextarea = type === 'textarea';
 
-  const inputClasses = classNames(css.input, {
-    [css.inputSuccess]: valid,
-    [css.inputError]: hasError,
-  });
-  const inputProps = isTextarea
-    ? { className: inputClasses, id, ...input, ...rest }
-    : { className: inputClasses, id, type, ...input, ...rest };
+    // Error message and input error styles are only shown if the
+    // field has been touched and the validation has failed.
+    const hasError = touched && invalid && error;
 
-  const classes = classNames(rootClassName || css.root, className);
-  return (
-    <div className={classes}>
-      {label ? <label htmlFor={id}>{label}</label> : null}
-      {isTextarea ? <textarea {...inputProps} /> : <input {...inputProps} />}
-      <ValidationError fieldMeta={meta} />
-    </div>
-  );
-};
+    const inputClasses = classNames(css.input, {
+      [css.inputSuccess]: valid,
+      [css.inputError]: hasError,
+    });
+    const inputProps = isTextarea
+      ? { className: inputClasses, id, ...input, ...rest }
+      : { className: inputClasses, id, type, ...input, ...rest };
+
+    const classes = classNames(rootClassName || css.root, className);
+    return (
+      <div className={classes}>
+        {label ? <label htmlFor={id}>{label}</label> : null}
+        {isTextarea ? <textarea {...inputProps} /> : <input {...inputProps} />}
+        <ValidationError fieldMeta={meta} />
+      </div>
+    );
+  }
+}
 
 TextInputFieldComponent.defaultProps = {
   rootClassName: null,
   className: null,
+  clearOnUnmount: false,
   id: null,
   label: null,
 };
 
-const { string, object } = PropTypes;
+const { string, bool, shape, func, object } = PropTypes;
 
 TextInputFieldComponent.propTypes = {
   rootClassName: string,
   className: string,
 
+  clearOnUnmount: bool,
+
   // Label is optional, but if it is given, an id is also required so
   // the label can reference the input in the `for` attribute
   id: string,
@@ -68,7 +81,9 @@ TextInputFieldComponent.propTypes = {
   type: string.isRequired,
 
   // Generated by redux-form's Field component
-  input: object.isRequired,
+  input: shape({
+    onChange: func.isRequired,
+  }).isRequired,
   meta: object.isRequired,
 };