Update FormField to use new Electron file/directory selector

ui/js/component/form.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import FileSelector from './file-selector.js';
 import {Icon} from './common.js';
 
 var formFieldCounter = 0,
+    formFieldFileSelectorTypes = ['file', 'directory'],
     formFieldNestedLabelTypes = ['radio', 'checkbox'];
 
 function formFieldId() {
@@ -19,6 +21,14 @@ export let FormField = React.createClass({
     postfix: React.PropTypes.string,
     hasError: React.PropTypes.bool
   },
+  handleFileChosen: function(path) {
+    this.refs.field.value = path;
+    if (this.props.onChange) { // Updating inputs programmatically doesn't generate an event, so we have to make our own
+      const event = new Event('change', {bubbles: true})
+      this.refs.field.dispatchEvent(event); // This alone won't generate a React event, but we use it to attach the field as a target
+      this.props.onChange(event);
+    }
+  },
   getInitialState: function() {
     return {
       isError: null,
@@ -26,17 +36,29 @@ export let FormField = React.createClass({
     }
   },
   componentWillMount: function() {
-    if (['text', 'number', 'radio', 'checkbox', 'file'].includes(this.props.type)) {
+    if (['text', 'number', 'radio', 'checkbox'].includes(this.props.type)) {
       this._element = 'input';
       this._type = this.props.type;
     } else if (this.props.type == 'text-number') {
       this._element = 'input';
       this._type = 'text';
+    } else if (formFieldFileSelectorTypes.includes(this.props.type)) {
+      this._element = 'input';
+      this._type = 'hidden';
     } else {
       // Non <input> field, e.g. <select>, <textarea>
       this._element = this.props.type;
     }
   },
+  componentDidMount: function() {
+    /**
+     * We have to add the webkitdirectory attribute here because React doesn't allow it in JSX
+     * https://github.com/facebook/react/issues/3468
+     */
+    if (this.props.type == 'directory') {
+      this.refs.field.webkitdirectory = true;
+    }
+  },
   showError: function(text) {
     this.setState({
       isError: true,
@@ -49,9 +71,6 @@ export let FormField = React.createClass({
   getValue: function() {
     if (this.props.type == 'checkbox') {
       return this.refs.field.checked;
-    } else if (this.props.type == 'file') {
-      return this.refs.field.files.length && this.refs.field.files[0].path ?
-                this.refs.field.files[0].path : null;
     } else {
       return this.refs.field.value;
     }
@@ -87,6 +106,10 @@ export let FormField = React.createClass({
             {this.props.label}
           </label> :
         element }
+      { formFieldFileSelectorTypes.includes(this.props.type) ?
+          <FileSelector type={this.props.type} onFileChosen={this.handleFileChosen}
+                        {... this.props.defaultValue ? {initPath: this.props.defaultValue} : {}} /> :
+          null }
       { this.props.postfix ? <span className="form-field__postfix">{this.props.postfix}</span> : '' }
       { isError && this.state.errorMessage ?  <div className="form-field__error">{this.state.errorMessage}</div> : '' }
     </div>