mirror of
https://github.com/cloudreve/frontend.git
synced 2025-12-25 19:52:48 +00:00
Modify: use react-hooks in object icon
This commit is contained in:
HFO4
parent
8f73231e26
commit
7e38f76ebd
|
|
@ -12,6 +12,8 @@
|
|||
"mdi-material-ui": "^6.9.0",
|
||||
"react": "^16.12.0",
|
||||
"react-content-loader": "^4.3.2",
|
||||
"react-dnd": "^9.5.1",
|
||||
"react-dnd-html5-backend": "^9.5.1",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-lazy-load-image-component": "^1.3.2",
|
||||
"react-photoswipe": "^1.3.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
import Navigator from "./Navigator"
|
||||
import { DndProvider } from 'react-dnd'
|
||||
import HTML5Backend from 'react-dnd-html5-backend'
|
||||
|
||||
import Explorer from "./Explorer"
|
||||
import Modals from "./Modals"
|
||||
|
|
@ -39,14 +41,15 @@ class FileManager extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
|
||||
<Modals/>
|
||||
<Navigator/>
|
||||
<Explorer/>
|
||||
<img src='/static/img/sign.png' style={{display:"none"}}
|
||||
// onError={()=>window.location.href="/FixComplete"}
|
||||
ref={this.image} onLoad={this.handleImageLoaded} />
|
||||
</div>
|
||||
</DndProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useDispatch,useSelector } from 'react-redux'
|
||||
import {
|
||||
changeContextMenu,
|
||||
setSelectedTarget,
|
||||
|
|
@ -19,118 +18,120 @@ import TableItem from "./TableRow"
|
|||
import classNames from 'classnames';
|
||||
import {isPreviewable} from "../../config"
|
||||
import {allowSharePreview} from "../../untils/index"
|
||||
import { withStyles } from '@material-ui/core';
|
||||
const styles = theme => ({
|
||||
import { makeStyles } from "@material-ui/core";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
container: {
|
||||
padding: "7px",
|
||||
},
|
||||
fixFlex:{
|
||||
minWidth:0,
|
||||
}
|
||||
})
|
||||
}))
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
path: state.navigator.path,
|
||||
selected: state.explorer.selected,
|
||||
viewMethod:state.viewUpdate.explorerViewMethod,
|
||||
}
|
||||
}
|
||||
export default function ObjectIcon(props) {
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
ContextMenu: (type, open) => {
|
||||
dispatch(changeContextMenu(type, open))
|
||||
},
|
||||
setSelectedTarget: targets => {
|
||||
dispatch(setSelectedTarget(targets))
|
||||
},
|
||||
addSelectedTarget: targets => {
|
||||
dispatch(addSelectedTarget(targets))
|
||||
},
|
||||
removeSelectedTarget: id => {
|
||||
dispatch(removeSelectedTarget(id));
|
||||
},
|
||||
setNavigatorLoadingStatus: status => {
|
||||
dispatch(setNavigatorLoadingStatus(status));
|
||||
},
|
||||
navitateTo:path => {
|
||||
dispatch(navitateTo(path))
|
||||
},
|
||||
showImgPreivew:(first)=>{
|
||||
dispatch(showImgPreivew(first))
|
||||
},
|
||||
openMusicDialog:()=>{
|
||||
dispatch(openMusicDialog())
|
||||
},
|
||||
toggleSnackbar:(vertical,horizontal,msg,color)=>{
|
||||
dispatch(toggleSnackbar(vertical,horizontal,msg,color))
|
||||
},
|
||||
}
|
||||
}
|
||||
const path = useSelector(state => state.navigator.path)
|
||||
const selected= useSelector(state => state.explorer.selected)
|
||||
const viewMethod= useSelector(state => state.viewUpdate.explorerViewMethod)
|
||||
|
||||
class ObjectCompoment extends Component {
|
||||
const dispatch = useDispatch()
|
||||
const ContextMenu = useCallback(
|
||||
(type, open) => dispatch(changeContextMenu(type, open)),
|
||||
[dispatch]
|
||||
)
|
||||
const SetSelectedTarget = useCallback(
|
||||
(targets) => dispatch(setSelectedTarget(targets)),
|
||||
[dispatch]
|
||||
)
|
||||
const AddSelectedTarget = useCallback(
|
||||
(targets) => dispatch(addSelectedTarget(targets)),
|
||||
[dispatch]
|
||||
)
|
||||
const RemoveSelectedTarget = useCallback(
|
||||
(id) => dispatch(removeSelectedTarget(id)),
|
||||
[dispatch]
|
||||
)
|
||||
const SetNavigatorLoadingStatus = useCallback(
|
||||
(status) => dispatch(setNavigatorLoadingStatus(status)),
|
||||
[dispatch]
|
||||
)
|
||||
const NavitateTo = useCallback(
|
||||
(targets) => dispatch(navitateTo(targets)),
|
||||
[dispatch]
|
||||
)
|
||||
const ShowImgPreivew = useCallback(
|
||||
(targets) => dispatch(showImgPreivew(targets)),
|
||||
[dispatch]
|
||||
)
|
||||
const OpenMusicDialog = useCallback(
|
||||
() => dispatch(openMusicDialog()),
|
||||
[dispatch]
|
||||
)
|
||||
const ToggleSnackbar = useCallback(
|
||||
(vertical,horizontal,msg,color) => dispatch(toggleSnackbar(vertical,horizontal,msg,color)),
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
state = {
|
||||
}
|
||||
const classes = useStyles();
|
||||
|
||||
contextMenu = (e) => {
|
||||
const contextMenu = (e) => {
|
||||
e.preventDefault();
|
||||
if ((this.props.selected.findIndex((value) => {
|
||||
return value === this.props.file;
|
||||
if ((selected.findIndex((value) => {
|
||||
return value === props.file;
|
||||
})) === -1) {
|
||||
this.props.setSelectedTarget([this.props.file]);
|
||||
SetSelectedTarget([props.file]);
|
||||
}
|
||||
this.props.ContextMenu("file", true);
|
||||
ContextMenu("file", true);
|
||||
}
|
||||
|
||||
selectFile = (e) => {
|
||||
let presentIndex = this.props.selected.findIndex((value) => {
|
||||
return value === this.props.file;
|
||||
const selectFile = (e) => {
|
||||
let presentIndex = selected.findIndex((value) => {
|
||||
return value === props.file;
|
||||
});
|
||||
if (presentIndex !== -1 && e.ctrlKey) {
|
||||
this.props.removeSelectedTarget(presentIndex);
|
||||
RemoveSelectedTarget(presentIndex);
|
||||
} else {
|
||||
if (e.ctrlKey) {
|
||||
this.props.addSelectedTarget(this.props.file);
|
||||
AddSelectedTarget(props.file);
|
||||
} else {
|
||||
this.props.setSelectedTarget([this.props.file]);
|
||||
SetSelectedTarget([props.file]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleClick=(e)=> {
|
||||
const handleClick=(e)=> {
|
||||
if(window.isMobile){
|
||||
this.selectFile(e);
|
||||
if(this.props.file.type==="dir"){
|
||||
this.enterFolder();
|
||||
selectFile(e);
|
||||
if(props.file.type==="dir"){
|
||||
enterFolder();
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
this.selectFile(e);
|
||||
selectFile(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
handleDoubleClick() {
|
||||
if(this.props.file.type==="dir"){
|
||||
this.enterFolder();
|
||||
const handleDoubleClick = () =>{
|
||||
if(props.file.type==="dir"){
|
||||
enterFolder();
|
||||
return;
|
||||
}
|
||||
if(!allowSharePreview()){
|
||||
this.props.toggleSnackbar("top","right","未登录用户无法预览","warning");
|
||||
ToggleSnackbar("top","right","未登录用户无法预览","warning");
|
||||
return;
|
||||
}
|
||||
let previewPath = this.props.selected[0].path === "/" ? this.props.selected[0].path+this.props.selected[0].name:this.props.selected[0].path+"/"+this.props.selected[0].name;
|
||||
switch(isPreviewable(this.props.selected[0].name)){
|
||||
let previewPath =selected[0].path === "/" ? selected[0].path+selected[0].name:selected[0].path+"/"+selected[0].name;
|
||||
switch(isPreviewable(selected[0].name)){
|
||||
case 'img':
|
||||
this.props.showImgPreivew(this.props.selected[0]);
|
||||
ShowImgPreivew(selected[0]);
|
||||
return;
|
||||
case 'msDoc':
|
||||
window.open(window.apiURL.docPreiview+"/?path="+encodeURIComponent(previewPath));
|
||||
return;
|
||||
case 'audio':
|
||||
this.props.openMusicDialog();
|
||||
OpenMusicDialog();
|
||||
return;
|
||||
case 'open':
|
||||
window.open(window.apiURL.preview+"/?action=preview&path="+encodeURIComponent(previewPath));
|
||||
|
|
@ -156,60 +157,43 @@ class ObjectCompoment extends Component {
|
|||
|
||||
}
|
||||
|
||||
enterFolder = ()=>{
|
||||
this.props.navitateTo(this.props.path==="/"?this.props.path+this.props.file.name:this.props.path+"/"+this.props.file.name );
|
||||
const enterFolder = ()=>{
|
||||
NavitateTo(path==="/"?path+props.file.name:path+"/"+props.file.name );
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { classes } = this.props;
|
||||
|
||||
if(this.props.viewMethod === "list"){
|
||||
if(viewMethod === "list"){
|
||||
return (
|
||||
<TableItem
|
||||
contextMenu={this.contextMenu}
|
||||
handleClick={this.handleClick}
|
||||
handleDoubleClick = {this.handleDoubleClick.bind(this)}
|
||||
file={this.props.file}/>
|
||||
contextMenu={contextMenu}
|
||||
handleClick={handleClick}
|
||||
handleDoubleClick = {handleDoubleClick.bind(this)}
|
||||
file={props.file}/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames({
|
||||
[classes.container]: this.props.viewMethod!=="list",
|
||||
[classes.container]: viewMethod!=="list",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classes.fixFlex}
|
||||
onContextMenu={this.contextMenu}
|
||||
onClick={this.handleClick}
|
||||
onDoubleClick = {this.handleDoubleClick.bind(this)}
|
||||
onContextMenu={contextMenu}
|
||||
onClick={handleClick}
|
||||
onDoubleClick = {handleDoubleClick.bind(this)}
|
||||
>
|
||||
{(this.props.file.type==="dir" &&this.props.viewMethod !== "list") &&
|
||||
<Folder folder={this.props.file}/>
|
||||
{(props.file.type==="dir" &&viewMethod !== "list") &&
|
||||
<Folder folder={props.file}/>
|
||||
}
|
||||
{((this.props.file.type==="file") && this.props.viewMethod === "icon") &&
|
||||
<FileIcon file={this.props.file}/>
|
||||
{((props.file.type==="file") && viewMethod === "icon") &&
|
||||
<FileIcon file={props.file}/>
|
||||
}
|
||||
{((this.props.file.type==="file") && this.props.viewMethod === "smallIcon") &&
|
||||
<SmallIcon file={this.props.file}/>
|
||||
{((props.file.type==="file") && viewMethod === "smallIcon") &&
|
||||
<SmallIcon file={props.file}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ObjectCompoment.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
file: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
const ObjectIcon = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(withStyles(styles)(ObjectCompoment))
|
||||
|
||||
export default ObjectIcon
|
||||
59
yarn.lock
59
yarn.lock
|
|
@ -1295,6 +1295,11 @@
|
|||
"@svgr/plugin-svgo" "^4.3.1"
|
||||
loader-utils "^1.2.3"
|
||||
|
||||
"@types/asap@^2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/asap/-/asap-2.0.0.tgz#d529e9608c83499a62ae08c871c5e62271aa2963"
|
||||
integrity sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg==
|
||||
|
||||
"@types/babel__core@^7.1.0":
|
||||
version "7.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
|
||||
|
|
@ -1333,6 +1338,19 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
|
||||
integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
|
||||
|
||||
"@types/hoist-non-react-statics@^3.3.1":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
|
||||
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
|
||||
"@types/invariant@^2.2.30":
|
||||
version "2.2.30"
|
||||
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.30.tgz#20efa342807606ada5483731a8137cb1561e5fe9"
|
||||
integrity sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag==
|
||||
|
||||
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
|
||||
|
|
@ -1383,6 +1401,11 @@
|
|||
"@types/prop-types" "*"
|
||||
csstype "^2.2.0"
|
||||
|
||||
"@types/shallowequal@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/shallowequal/-/shallowequal-1.1.1.tgz#aad262bb3f2b1257d94c71d545268d592575c9b1"
|
||||
integrity sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ==
|
||||
|
||||
"@types/stack-utils@^1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
|
||||
|
|
@ -1838,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:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
|
||||
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
|
||||
|
|
@ -3398,6 +3421,17 @@ dir-glob@2.0.0:
|
|||
arrify "^1.0.1"
|
||||
path-type "^3.0.0"
|
||||
|
||||
dnd-core@^9.5.1:
|
||||
version "9.5.1"
|
||||
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.5.1.tgz#e9ec02d33529b68fa528865704d40ac4b14f2baf"
|
||||
integrity sha512-/yEWFF2jg51yyB8uA2UbvBr9Qis0Oo/4p9cqHLEKZdxzHHVSPfq0a/ool8NG6dIS6Q4uN+oKGObY0rNWiopJDA==
|
||||
dependencies:
|
||||
"@types/asap" "^2.0.0"
|
||||
"@types/invariant" "^2.2.30"
|
||||
asap "^2.0.6"
|
||||
invariant "^2.2.4"
|
||||
redux "^4.0.4"
|
||||
|
||||
dns-equal@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
|
||||
|
|
@ -8381,6 +8415,24 @@ react-dev-utils@^9.1.0:
|
|||
strip-ansi "5.2.0"
|
||||
text-table "0.2.0"
|
||||
|
||||
react-dnd-html5-backend@^9.5.1:
|
||||
version "9.5.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.5.1.tgz#e6a0aed3ece800c1abe004f9ed9991513e2e644c"
|
||||
integrity sha512-wUdzjREwLqHxFkA6E+XDVL5IFjRDbBI3SHVKil9n3qrGT5dm2tA2oi1aIALdfMKsu00c+OXA9lz/LuKZCE9KXg==
|
||||
dependencies:
|
||||
dnd-core "^9.5.1"
|
||||
|
||||
react-dnd@^9.5.1:
|
||||
version "9.5.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.5.1.tgz#907e55c791d6c50cbed1a4021c14b989b86ac467"
|
||||
integrity sha512-j2MvziPNLsxXkb3kIJzLvvOv/TQ4sysp6U4CmxAXd4C884dXm/9UGdB7K1wkTW3ZxVpI1K7XhKbX0JgNlPfLcA==
|
||||
dependencies:
|
||||
"@types/hoist-non-react-statics" "^3.3.1"
|
||||
"@types/shallowequal" "^1.1.1"
|
||||
dnd-core "^9.5.1"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
shallowequal "^1.1.0"
|
||||
|
||||
react-dom@^16.12.0:
|
||||
version "16.12.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
|
||||
|
|
@ -9151,6 +9203,11 @@ shallow-clone@^3.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.2"
|
||||
|
||||
shallowequal@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
|
||||
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
|
||||
|
||||
shebang-command@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
|
||||
|
|
|
|||
Loading…
Reference in New Issue