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
|
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 SequenceEditor extends Component {
state = {
dir: '/',
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 { tool: module } = this.props.app
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 { tool: module } = this.props.app
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, 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)(SequenceEditor)
|
