2018-03-26 23:32:43 +02:00
|
|
|
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { remote } from 'electron';
|
|
|
|
import Button from 'component/button';
|
|
|
|
import { FormRow } from 'component/common/form';
|
|
|
|
import path from 'path';
|
|
|
|
|
2018-10-13 17:49:47 +02:00
|
|
|
type FileFilters = {
|
|
|
|
name: string,
|
|
|
|
extensions: string[],
|
|
|
|
};
|
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
type Props = {
|
|
|
|
type: string,
|
|
|
|
currentPath: ?string,
|
|
|
|
onFileChosen: (string, string) => void,
|
2018-07-18 17:46:21 +02:00
|
|
|
fileLabel?: string,
|
2018-06-08 06:05:45 +02:00
|
|
|
directoryLabel?: string,
|
2018-10-13 17:49:47 +02:00
|
|
|
filters?: FileFilters[],
|
2018-03-26 23:32:43 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
class FileSelector extends React.PureComponent<Props> {
|
|
|
|
static defaultProps = {
|
|
|
|
type: 'file',
|
|
|
|
};
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.input = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
handleButtonClick() {
|
|
|
|
remote.dialog.showOpenDialog(
|
2018-06-21 22:11:14 +02:00
|
|
|
remote.getCurrentWindow(),
|
2018-03-26 23:32:43 +02:00
|
|
|
{
|
|
|
|
properties:
|
|
|
|
this.props.type === 'file' ? ['openFile'] : ['openDirectory', 'createDirectory'],
|
2018-10-13 17:49:47 +02:00
|
|
|
filters: this.props.filters,
|
2018-03-26 23:32:43 +02:00
|
|
|
},
|
|
|
|
paths => {
|
|
|
|
if (!paths) {
|
|
|
|
// User hit cancel, so do nothing
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const filePath = paths[0];
|
|
|
|
const extension = path.extname(filePath);
|
|
|
|
const fileName = path.basename(filePath, extension);
|
|
|
|
|
|
|
|
if (this.props.onFileChosen) {
|
|
|
|
this.props.onFileChosen(filePath, fileName);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
input: ?HTMLInputElement;
|
|
|
|
|
|
|
|
render() {
|
2018-04-02 15:59:23 +02:00
|
|
|
const { type, currentPath, fileLabel, directoryLabel } = this.props;
|
|
|
|
|
|
|
|
const label =
|
|
|
|
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
|
2018-03-26 23:32:43 +02:00
|
|
|
|
|
|
|
return (
|
2018-07-18 17:46:21 +02:00
|
|
|
<FormRow verticallyCentered>
|
2018-04-02 15:59:23 +02:00
|
|
|
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
|
2018-03-26 23:32:43 +02:00
|
|
|
<input
|
|
|
|
webkitdirectory="true"
|
|
|
|
className="input-copyable"
|
|
|
|
type="text"
|
|
|
|
ref={input => {
|
|
|
|
if (this.input) this.input = input;
|
|
|
|
}}
|
|
|
|
onFocus={() => {
|
|
|
|
if (this.input) this.input.select();
|
|
|
|
}}
|
|
|
|
readOnly="readonly"
|
|
|
|
value={currentPath || __('No File Chosen')}
|
|
|
|
/>
|
|
|
|
</FormRow>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default FileSelector;
|