Add FileSelector component

ui/js/component/file-selector.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+const {remote} = require('electron');
+class FileSelector extends React.Component {
+  static propTypes = {
+    type: React.PropTypes.oneOf(['file', 'directory']),
+    initPath: React.PropTypes.string,
+    onFileChosen: React.PropTypes.func,
+  }
+
+  static defaultProps = {
+    type: 'file',
+  }
+
+  componentWillMount() {
+    this.setState({
+      path: this.props.initPath || null,
+    });
+  }
+
+  handleButtonClick() {
+    remote.dialog.showOpenDialog({
+      properties: [this.props.type == 'file' ? 'openFile' : 'openDirectory'],
+    }, (paths) => {
+      if (!paths) { // User hit cancel, so do nothing
+        return;
+      }
+
+      const path = paths[0];
+      this.setState({
+        path: path,
+      });
+      if (this.props.onFileChosen) {
+        this.props.onFileChosen(path);
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div className="file-selector">
+        <button type="button" className="file-selector__choose-button" onClick={() => this.handleButtonClick()}>
+          {this.props.type == 'file' ?
+              'Choose File' :
+              'Choose Directory'}
+        </button>
+        {' '}
+        <span className="file-selector__path">
+          {this.state.path ?
+             this.state.path :
+             'No File Chosen'}
+        </span>
+      </div>
+    );
+  }
+};
+
+export default FileSelector;

ui/scss/all.scss

@@ -6,6 +6,7 @@
 @import "component/_button.scss";
 @import "component/_card.scss";
 @import "component/_file-actions.scss";
+@import "component/_file-selector.scss";
 @import "component/_file-tile.scss";
 @import "component/_form-field.scss";
 @import "component/_header.scss";

ui/scss/component/_file-selector.scss

@@ -0,0 +1,7 @@
+.file-selector__choose-button {
+  font-size: 13px;
+}
+
+.file-selector__path {
+  font-size: 14px;
+}