1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Route, Link } from 'react-router-dom'
import { Loading, FileList, FileViewer } from '../common'
import actions from '../actions'
class Browser extends Component {
state = {
dir: '/',
module: 'pix2pixhd',
files: [],
loading: true
}
componentDidMount() {
this.fetch(this.state.dir)
}
handlePick(file) {
console.log(file)
if (file.dir) {
this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
} else {
this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
}
}
fetch(dir) {
console.log('fetch', dir)
const { module } = this.state
this.setState({ dir, file: null, loading: true })
actions.socket.list_directory({ module, dir }).then(files => {
console.log(files)
this.setState({ dir, files, loading: false })
})
}
fetchFile(fn) {
console.log('fetch file', fn)
const { module } = this.state
this.setState({ file: null, loadingFile: true })
actions.socket.read_file({ module, fn }).then(file => {
console.log(file)
this.setState({ file, loadingFile: false })
})
}
render() {
const { app } = this.props
const {
loading, dir, module, files,
loadingFile, file,
} = this.state
console.log(this.props, this.state)
return (
<div className='app browser'>
<h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
{app.tool}<br/>
{loading && <Loading />}
<FileList
files={files}
groupDirectories
parentDirectory={dir !== '/'}
orderBy='name asc'
fields={'name datetime size'}
onClick={(file, e) => {
e.preventDefault()
e.stopPropagation()
console.log('picked a result', file)
this.handlePick(file)
}}
onClickParent={e => {
console.log('navigate up')
this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
}}
/>
{loadingFile && <Loading />}
{file && <FileViewer file={file} />}
</div>
)
}
}
const mapStateToProps = state => ({
app: state.system.app,
})
const mapDispatchToProps = (dispatch, ownProps) => ({
actions: bindActionCreators({}, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(Browser)
|
