diff --git a/spug_web/src/pages/ssh/FileManager.js b/spug_web/src/pages/ssh/FileManager.js index 9df0cd9..576df9b 100644 --- a/spug_web/src/pages/ssh/FileManager.js +++ b/spug_web/src/pages/ssh/FileManager.js @@ -18,13 +18,14 @@ import { AuthButton, Action } from 'components'; import { http, uniqueId, X_TOKEN } from 'libs'; import lds from 'lodash'; import styles from './index.module.less' +import moment from 'moment'; class FileManager extends React.Component { constructor(props) { super(props); this.input = null; - this.input2 = null + this.pwdHistoryCaches = new Map() this.state = { fetching: false, showDot: false, @@ -43,8 +44,9 @@ class FileManager extends React.Component { componentDidUpdate(prevProps) { if (this.props.id !== prevProps.id) { - this.fetchFiles() - this.setState({objects: []}) + let pwd = this.pwdHistoryCaches.get(this.props.id) || [] + this.setState({objects: [], pwd}) + this.fetchFiles(pwd) } } @@ -72,6 +74,7 @@ class FileManager extends React.Component { }, { title: '修改时间', dataIndex: 'date', + sorter: (a, b) => moment(a.date).unix() - moment(b.date).unix(), width: 190 }, { title: '属性', @@ -97,13 +100,14 @@ class FileManager extends React.Component { }; fetchFiles = (pwd) => { - this.setState({fetching: true}); + this.setState({ fetching: true }); pwd = pwd || this.state.pwd; const path = '/' + pwd.join('/'); return http.get('/api/file/', {params: {id: this.props.id, path}}) .then(res => { const objects = lds.orderBy(res, [this._kindSort, 'name'], ['desc', 'asc']); this.setState({objects, pwd}) + this.pwdHistoryCaches.set(this.props.id, pwd) this.state.inputPath !== null && this.setState({inputPath: path}) }) .finally(() => this.setState({fetching: false})) @@ -123,19 +127,19 @@ class FileManager extends React.Component { this.fetchFiles(pwd) }; + handleInputEdit = () => { + let inputPath = '/' + this.state.pwd.join('/') + this.setState({inputPath}) + } + handleInputEnter = () => { - if (this.state.inputPath === null) { - if (this.state.pwd.length > 0) { - this.setState({inputPath: `/${this.state.pwd.join('/')}/`}) - } else { - this.setState({inputPath: '/'}) - } - setTimeout(() => this.input2.focus(), 100) - } else { + if (this.state.inputPath) { let pwdStr = this.state.inputPath.replace(/^\/+/, '') pwdStr = pwdStr.replace(/\/+$/, '') this.fetchFiles(pwdStr.split('/')) .then(() => this.setState({inputPath: null})) + } else { + this.setState({inputPath: null}) } } @@ -220,7 +224,7 @@ class FileManager extends React.Component { this.input = ref}/>
{this.state.inputPath !== null ? ( - this.input2 = ref} size="small" className={styles.input} + 回车确认
} value={this.state.inputPath} onChange={e => this.setState({inputPath: e.target.value})} onBlur={this.handleInputEnter} @@ -235,7 +239,7 @@ class FileManager extends React.Component { {item} ))} - +