A 文件管理器增加输入地址功能 #495

pull/509/head
vapao 2022-06-19 00:51:47 +08:00
parent 15dd371c1a
commit 21a0250ecd
2 changed files with 77 additions and 12 deletions

View File

@ -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

View File

@ -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 {