lbry-desktop/src/ui/component/common/file-selector.jsx

114 lines
2.6 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-02-22 06:01:59 +01:00
import * as React from 'react';
// @if TARGET='app'
// $FlowFixMe
2018-03-26 23:32:43 +02:00
import { remote } from 'electron';
2019-02-22 06:01:59 +01:00
// @endif
// @if TARGET='web'
// $FlowFixMe
import { remote } from 'web/stubs';
// @endif
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-02-13 17:27:20 +01:00
import { FormField } from 'component/common/form';
2018-03-26 23:32:43 +02:00
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',
};
2019-02-22 06:01:59 +01:00
fileInput: { current: React.ElementRef<any> };
2018-03-26 23:32:43 +02:00
constructor() {
super();
2019-02-22 06:01:59 +01:00
// @if TARGET='web'
this.fileInput = React.createRef();
// @endif
2018-03-26 23:32:43 +02:00
}
handleButtonClick() {
remote.dialog.showOpenDialog(
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];
2019-03-05 05:46:57 +01:00
2018-03-26 23:32:43 +02:00
const extension = path.extname(filePath);
const fileName = path.basename(filePath, extension);
if (this.props.onFileChosen) {
this.props.onFileChosen(filePath, fileName);
}
}
);
}
2019-03-18 06:06:41 +01:00
// TODO: Add this back for web publishing
// handleFileInputSelection() {
// const { files } = this.fileInput.current;
// if (!files) {
// return;
// }
2019-02-22 06:01:59 +01:00
2019-03-18 06:06:41 +01:00
// const filePath = files[0];
// const fileName = filePath.name;
2019-02-22 06:01:59 +01:00
2019-03-18 06:06:41 +01:00
// if (this.props.onFileChosen) {
// this.props.onFileChosen(filePath, fileName);
// }
// }
2019-02-22 06:01:59 +01:00
2018-03-26 23:32:43 +02:00
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 (
2019-02-22 06:01:59 +01:00
<React.Fragment>
<FormField
2019-03-18 06:06:41 +01:00
webkitdirectory="true"
className="form-field--copyable"
type="text"
ref={this.fileInput}
2019-02-22 06:01:59 +01:00
onFocus={() => {
2019-03-18 06:06:41 +01:00
if (this.fileInput) this.fileInput.current.select();
2019-02-22 06:01:59 +01:00
}}
2019-03-18 06:06:41 +01:00
readOnly="readonly"
2019-02-22 06:01:59 +01:00
value={currentPath || __('No File Chosen')}
inputButton={
<Button button="primary" label={label} onClick={() => this.handleButtonClick()} />
}
2019-02-22 06:01:59 +01:00
/>
</React.Fragment>
2018-03-26 23:32:43 +02:00
);
}
}
export default FileSelector;