mirror of https://github.com/openspug/spug
A 文件管理器增加输入地址功能 #495
parent
15dd371c1a
commit
21a0250ecd
|
@ -4,14 +4,15 @@
|
|||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Breadcrumb, Table, Switch, Progress, Modal, message } from 'antd';
|
||||
import { Breadcrumb, Table, Switch, Progress, Modal, Input, message } from 'antd';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownloadOutlined,
|
||||
FileOutlined,
|
||||
FolderOutlined,
|
||||
HomeOutlined,
|
||||
UploadOutlined
|
||||
UploadOutlined,
|
||||
EditOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { AuthButton, Action } from 'components';
|
||||
import { http, uniqueId, X_TOKEN } from 'libs';
|
||||
|
@ -23,10 +24,12 @@ class FileManager extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.input = null;
|
||||
this.input2 = null
|
||||
this.state = {
|
||||
fetching: false,
|
||||
showDot: false,
|
||||
uploading: false,
|
||||
inputPath: null,
|
||||
uploadStatus: 'active',
|
||||
pwd: [],
|
||||
objects: [],
|
||||
|
@ -97,10 +100,11 @@ class FileManager extends React.Component {
|
|||
this.setState({fetching: true});
|
||||
pwd = pwd || this.state.pwd;
|
||||
const path = '/' + pwd.join('/');
|
||||
http.get('/api/file/', {params: {id: this.props.id, path}})
|
||||
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.state.inputPath !== null && this.setState({inputPath: path})
|
||||
})
|
||||
.finally(() => this.setState({fetching: false}))
|
||||
};
|
||||
|
@ -109,6 +113,7 @@ class FileManager extends React.Component {
|
|||
let pwd = this.state.pwd.map(x => x);
|
||||
if (action === '1') {
|
||||
pwd.push(name)
|
||||
this.setState({inputPath: null})
|
||||
} else if (action === '2') {
|
||||
const index = pwd.indexOf(name);
|
||||
pwd = pwd.splice(0, index + 1)
|
||||
|
@ -118,6 +123,28 @@ class FileManager extends React.Component {
|
|||
this.fetchFiles(pwd)
|
||||
};
|
||||
|
||||
handlePathInput = (e) => {
|
||||
const value = e.target.value;
|
||||
const pwd = value.substring(1).split('/')
|
||||
this.setState({pwd})
|
||||
};
|
||||
|
||||
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 {
|
||||
let pwdStr = this.state.inputPath.replace(/^\/+/, '')
|
||||
pwdStr = pwdStr.replace(/\/+$/, '')
|
||||
this.fetchFiles(pwdStr.split('/'))
|
||||
.then(() => this.setState({inputPath: null}))
|
||||
}
|
||||
}
|
||||
|
||||
handleUpload = () => {
|
||||
this.input.click();
|
||||
this.input.onchange = e => {
|
||||
|
@ -198,16 +225,27 @@ class FileManager extends React.Component {
|
|||
<React.Fragment>
|
||||
<input style={{display: 'none'}} type="file" ref={ref => this.input = ref}/>
|
||||
<div className={styles.drawerHeader}>
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item href="#" onClick={() => this.handleChdir('', '0')}>
|
||||
<HomeOutlined/>
|
||||
</Breadcrumb.Item>
|
||||
{this.state.pwd.map(item => (
|
||||
<Breadcrumb.Item key={item} href="#" onClick={() => this.handleChdir(item, '2')}>
|
||||
<span>{item}</span>
|
||||
{this.state.inputPath !== null ? (
|
||||
<Input ref={ref => this.input2 = ref} size="small" className={styles.input}
|
||||
suffix={<div style={{color: '#999', fontSize: 12}}>回车确认</div>}
|
||||
value={this.state.inputPath} onChange={e => this.setState({inputPath: e.target.value})}
|
||||
onPressEnter={this.handleInputEnter}/>
|
||||
) : (
|
||||
<Breadcrumb className={styles.bread}>
|
||||
<Breadcrumb.Item href="#" onClick={() => this.handleChdir('', '0')}>
|
||||
<HomeOutlined style={{fontSize: 16}}/>
|
||||
</Breadcrumb.Item>
|
||||
))}
|
||||
</Breadcrumb>
|
||||
{this.state.pwd.map(item => (
|
||||
<Breadcrumb.Item key={item} href="#" onClick={() => this.handleChdir(item, '2')}>
|
||||
<span>{item}</span>
|
||||
</Breadcrumb.Item>
|
||||
))}
|
||||
<Breadcrumb.Item onClick={this.handleInputEnter}>
|
||||
<EditOutlined className={styles.edit}/>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
)}
|
||||
|
||||
<div className={styles.action}>
|
||||
<span>显示隐藏文件:</span>
|
||||
<Switch
|
||||
|
|
|
@ -162,6 +162,24 @@
|
|||
height: 24px;
|
||||
}
|
||||
|
||||
.bread:hover {
|
||||
.edit {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 60%;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
.edit {
|
||||
display: none;
|
||||
color: #2563fcbb;
|
||||
margin-left: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 94px;
|
||||
margin-left: 12px;
|
||||
|
@ -174,6 +192,15 @@
|
|||
white-space: nowrap;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
:global(.ant-breadcrumb-separator) {
|
||||
margin: 0 4px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
:global(.ant-breadcrumb-link) {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.drawerBtn {
|
||||
|
|
Loading…
Reference in New Issue