diff --git a/ui/js/component/file-selector.js b/ui/js/component/file-selector.js new file mode 100644 index 000000000..4670f4830 --- /dev/null +++ b/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 ( +
+ + {' '} + + {this.state.path ? + this.state.path : + 'No File Chosen'} + +
+ ); + } +}; + +export default FileSelector; diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 7c87a5fbb..14833dfd3 100644 --- a/ui/scss/all.scss +++ b/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"; diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss new file mode 100644 index 000000000..2cb9fd322 --- /dev/null +++ b/ui/scss/component/_file-selector.scss @@ -0,0 +1,7 @@ +.file-selector__choose-button { + font-size: 13px; +} + +.file-selector__path { + font-size: 14px; +}