From 7e38f76ebd1b7ee7a88e9b6dc091dc3eb0fd9fec Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Sat, 30 Nov 2019 16:12:01 +0800 Subject: [PATCH] Modify: use react-hooks in object icon --- package.json | 2 + src/component/FileManager/FileManager.js | 7 +- src/component/FileManager/ObjectIcon.js | 194 +++++++++++------------ yarn.lock | 59 ++++++- 4 files changed, 154 insertions(+), 108 deletions(-) diff --git a/package.json b/package.json index 3a24402..eae85a8 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/component/FileManager/FileManager.js b/src/component/FileManager/FileManager.js index 220780e..2cfa2b1 100644 --- a/src/component/FileManager/FileManager.js +++ b/src/component/FileManager/FileManager.js @@ -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 ( -
+ + window.location.href="/FixComplete"} ref={this.image} onLoad={this.handleImageLoaded} /> -
+ ); } diff --git a/src/component/FileManager/ObjectIcon.js b/src/component/FileManager/ObjectIcon.js index eeebd76..135a35e 100644 --- a/src/component/FileManager/ObjectIcon.js +++ b/src/component/FileManager/ObjectIcon.js @@ -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 ( + contextMenu={contextMenu} + handleClick={handleClick} + handleDoubleClick = {handleDoubleClick.bind(this)} + file={props.file}/> ); } return (
- {(this.props.file.type==="dir" &&this.props.viewMethod !== "list") && - + {(props.file.type==="dir" &&viewMethod !== "list") && + } - {((this.props.file.type==="file") && this.props.viewMethod === "icon") && - + {((props.file.type==="file") && viewMethod === "icon") && + } - {((this.props.file.type==="file") && this.props.viewMethod === "smallIcon") && - + {((props.file.type==="file") && viewMethod === "smallIcon") && + }
); } -} - -ObjectCompoment.propTypes = { - classes: PropTypes.object.isRequired, - file: PropTypes.object.isRequired, -}; - - -const ObjectIcon = connect( - mapStateToProps, - mapDispatchToProps -)(withStyles(styles)(ObjectCompoment)) - -export default ObjectIcon \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9b7e994..0641032 100644 --- a/yarn.lock +++ b/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"