Feat: 拖拽路径导航 / Fix:文件状态更新异常

This commit is contained in:
HFO4 2019-12-02 14:58:04 +08:00
parent 3c84e7f782
commit 4edf3fd743
7 changed files with 145 additions and 27 deletions

View File

@ -11,6 +11,7 @@
"http-proxy-middleware": "^0.20.0",
"mdi-material-ui": "^6.9.0",
"react": "^16.12.0",
"react-addons-update": "^15.6.2",
"react-content-loader": "^4.3.2",
"react-dnd": "^9.5.1",
"react-dnd-html5-backend": "^9.5.1",

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'
import Navigator from "./Navigator"
import Navigator from "./Navigator/Navigator"
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import DragLayer from "./DnD/DragLayer"

View File

@ -263,8 +263,15 @@ class ModalsCompoment extends Component {
}
let doMove = true;
this.props.selected.map((value)=>{
// 根据ID过滤
if(value.id===target.id && value.type==target.type){
doMove = false;
return
}
// 根据路径过滤
if(value.path==target.path + (target.path == "/" ? "" : "/") + target.name){
doMove = false;
return
}
});
if (doMove){

View File

@ -26,9 +26,9 @@ import {
openCreateFolderDialog,
openShareDialog,
drawerToggleAction,
} from "../../actions/index"
import API from '../../middleware/Api'
import {setCookie,setGetParameter,fixUrlHash} from "../../untils/index"
} from "../../../actions/index"
import API from '../../../middleware/Api'
import {setCookie,setGetParameter,fixUrlHash} from "../../../untils/index"
import {
withStyles,
Divider,
@ -39,6 +39,7 @@ import {
ListItemText,
IconButton,
} from '@material-ui/core';
import PathButton from "./PathButton"
const mapStateToProps = state => {
return {
@ -359,10 +360,8 @@ class NavigatorCompoment extends Component {
<div className={classes.container}>
<div className={classes.navigatorContainer}>
<div className={classes.nav} ref={this.element}>
<span>
<Button component="span" onClick={(e)=>this.navigateTo(e,-1)}>
/
</Button>
<span>
<PathButton folder="/" path="/" onClick={(e)=>this.navigateTo(e,-1)} />
<RightIcon className={classes.rightIcon}/>
</span>
{this.state.hiddenMode &&
@ -397,13 +396,13 @@ class NavigatorCompoment extends Component {
{!this.state.hiddenMode && this.state.folders.map((folder,id,folders)=>(
<span key={id}>
{folder !=="" &&
<span>
<Button component="span" onClick={(e)=>this.navigateTo(e,id)}>
{folder === ""?"":folder}
{(id === folders.length-1) &&
<ExpandMore className={classes.expandMore}/>
}
</Button>
<span>
<PathButton
folder={folder}
path={"/"+folders.slice(0,id).join("/")}
last={id === folders.length-1}
onClick={(e)=>this.navigateTo(e,id)}
/>
{(id === folders.length-1) &&
presentFolderMenu
}

View File

@ -0,0 +1,51 @@
import React from "react";
import ExpandMore from "@material-ui/icons/ExpandMore";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core";
import { useDrop } from "react-dnd";
import classNames from "classnames";
const useStyles = makeStyles(theme => ({
expandMore: {
color: "#8d8d8d"
},
active:{
border: "2px solid " + theme.palette.primary.light,
},
}));
export default function PathButton(props) {
const [{ canDrop, isOver }, drop] = useDrop({
accept: "object",
drop: () => ({
folder: {
id: -1,
path: props.path,
name: props.folder == "/" ? "" : props.folder
}
}),
collect: monitor => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop()
})
});
const isActive = canDrop && isOver;
const classes = useStyles();
return (
<Button
ref={drop}
className={classNames(
{
[classes.active]: isActive,
},
)}
component="span"
onClick={props.onClick}
title={props.path}
>
{props.folder}
{props.last && <ExpandMore className={classes.expandMore} />}
</Button>
);
}

View File

@ -7,6 +7,7 @@ import AddIcon from '@material-ui/icons/AddCircleOutline';
import MusicIcon from '@material-ui/icons/MusicNote';
import DeleteIcon from '@material-ui/icons/Delete';
import { isWidthDown } from '@material-ui/core/withWidth';
import update from 'react-addons-update';
import {
withStyles,
Dialog,
@ -69,17 +70,15 @@ class FileList extends Component {
enQueue(files) {
var filesNow = this.state.files;
if (filesNow.findIndex((file) => { return file.id === files.id }) === -1) {
filesNow.push(files);
this.setState({
files: filesNow,
files: [...filesNow,files],
});
}
console.log(this.state);
}
deQueue(file){
var filesNow = this.state.files;
var filesNow = [...this.state.files];
var fileID = filesNow.findIndex((f) => { return f.id === file.id });
if (fileID !== -1) {
filesNow.splice(fileID, 1);
@ -90,7 +89,7 @@ class FileList extends Component {
}
updateStatus(file){
var filesNow = this.state.files;
var filesNow = [...this.state.files];
var fileID = filesNow.findIndex((f) => { return f.id === file.id });
if (!file.errMsg) {
if(filesNow[fileID].status!==4){
@ -104,7 +103,7 @@ class FileList extends Component {
}
setComplete(file){
var filesNow = this.state.files;
var filesNow = [...this.state.files];
var fileID = filesNow.findIndex((f) => { return f.id === file.id });
if (fileID !== -1) {
if(filesNow[fileID].status!==4){
@ -118,7 +117,7 @@ class FileList extends Component {
}
setError(file,errMsg){
var filesNow = this.state.files;
var filesNow = [...this.state.files];
var fileID = filesNow.findIndex((f) => { return f.id === file.id });
if (fileID !== -1) {
filesNow[fileID].status = 4;

View File

@ -1861,7 +1861,7 @@ arrify@^1.0.1:
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
asap@^2.0.6, asap@~2.0.6:
asap@^2.0.6, asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@ -2886,6 +2886,11 @@ core-js@3.2.1:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
integrity sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
core-js@^2.4.0:
version "2.6.9"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
@ -3620,6 +3625,13 @@ encodeurl@~1.0.2:
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
dependencies:
iconv-lite "~0.4.13"
end-of-stream@^1.0.0, end-of-stream@^1.1.0:
version "1.4.4"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@ -4155,6 +4167,19 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
figgy-pudding@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@ -4905,7 +4930,7 @@ hyphenate-style-name@^1.0.3:
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@ -5367,7 +5392,7 @@ is-root@2.1.0:
resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
is-stream@^1.1.0:
is-stream@^1.0.1, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@ -5428,6 +5453,14 @@ isobject@^3.0.0, isobject@^3.0.1:
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -6735,6 +6768,14 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-forge@0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@ -8195,6 +8236,13 @@ promise@8.0.3:
dependencies:
asap "~2.0.6"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
dependencies:
asap "~2.0.3"
prompts@^2.0.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
@ -8367,6 +8415,14 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-addons-update@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.2.tgz#e53753c5b34887974510c882d7fb075851d5e504"
integrity sha1-5TdTxbNIh5dFEMiC1/sHWFHV5QQ=
dependencies:
fbjs "^0.8.9"
object-assign "^4.1.0"
react-app-polyfill@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.4.tgz#4dd2636846b585c2d842b1e44e1bc29044345874"
@ -9163,7 +9219,7 @@ set-value@^2.0.0, set-value@^2.0.1:
is-plain-object "^2.0.3"
split-string "^3.0.1"
setimmediate@^1.0.4:
setimmediate@^1.0.4, setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@ -9985,6 +10041,11 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
ua-parser-js@^0.7.18:
version "0.7.20"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
uglify-js@3.4.x:
version "3.4.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@ -10384,7 +10445,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
dependencies:
iconv-lite "0.4.24"
whatwg-fetch@3.0.0:
whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==