From e4f439c12c73e301d55f68a2b287ada64aecd2f3 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Tue, 26 Jul 2016 06:07:56 -0400
Subject: [PATCH] Add FormField component with required field support

---
 js/component/common.js | 71 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/js/component/common.js b/js/component/common.js
index a942b5ada..cd6d52576 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -169,6 +169,77 @@ var WatchLink = React.createClass({
   }
 });
 
+var requiredFieldWarningStyle = {
+  color: '#cc0000',
+  transition: 'opacity 400ms ease-in',
+};
+var FormField = React.createClass({
+  _type: null,
+  _element: null,
+
+  propTypes: {
+    type: React.PropTypes.string.isRequired,
+    hidden: React.PropTypes.bool,
+  },
+  getInitialState: function() {
+    return {
+      warningState: 'hidden',
+    }
+  },
+  componentWillMount: function() {
+    if (['text', 'radio', 'file'].indexOf(this.props.type) != -1) {
+      this._element = 'input';
+      this._type = this.props.type;
+    } else {
+      // Non <input> field, e.g. <select>, <textarea>
+      this._element = this.props.type;
+    }
+  },
+  warnRequired: function() {
+    this.setState({
+      warningState: 'shown',
+    });
+
+    setTimeout(() => {
+      this.setState({
+        warningState: 'fading',
+      });
+      setTimeout(() => {
+        this.setState({
+          warningState: 'hidden',
+        });
+      }, 450);
+    }, 5000);
+  },
+  focus: function() {
+    this.refs.field.focus();
+  },
+  getValue: function() {
+    return this.refs.field.value;
+  },
+  render: function() {
+    var warningStyle = Object.assign({}, requiredFieldWarningStyle);
+    if (this.state.warningState == 'fading') {
+      warningStyle.opacity = '0';
+    }
+
+    // Pass all unhandled props to the field element
+    var otherProps = Object.assign({}, this.props);
+    delete otherProps.type;
+    delete otherProps.hidden;
+
+    return (
+      <span className={this.props.hidden ? 'hidden' : ''}>
+        <this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
+                       {...otherProps}>
+          {this.props.children}
+        </this._element>
+        <span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
+      </span>
+    );
+  }
+});
+
 // Generic menu styles
 var menuStyle = {
   border: '1px solid #aaa',