From 3f5c826c060604193a81be8bcfa014a95ae78546 Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Mon, 10 Feb 2020 14:46:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E6=96=B0=E7=9A=84=E5=9B=BE?= =?UTF-8?q?=E5=83=8F=E9=A2=84=E8=A7=88=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/component/FileManager/ContextMenu.js | 57 ++++---- src/component/FileManager/ImgPreview.js | 47 +++---- src/component/FileManager/ImgPreview_old.js | 148 ++++++++++++++++++++ src/component/FileManager/Modals.js | 22 ++- src/component/FileManager/PathSelector.js | 3 +- src/reducers/index.js | 2 +- yarn.lock | 46 ++---- 8 files changed, 224 insertions(+), 103 deletions(-) create mode 100644 src/component/FileManager/ImgPreview_old.js diff --git a/package.json b/package.json index b19b45a..3820ebd 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "react-dom": "^16.12.0", "react-dplayer": "^0.3.3", "react-hotkeys": "^2.0.0", - "react-image-lightbox": "^5.1.1", "react-lazy-load-image-component": "^1.3.2", + "react-photo-view": "^0.3.9", "react-redux": "^7.1.3", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", diff --git a/src/component/FileManager/ContextMenu.js b/src/component/FileManager/ContextMenu.js index 8d95336..42233e2 100644 --- a/src/component/FileManager/ContextMenu.js +++ b/src/component/FileManager/ContextMenu.js @@ -66,7 +66,8 @@ const mapStateToProps = state => { withFolder: state.explorer.selectProps.withFolder, withFile: state.explorer.selectProps.withFile, path: state.navigator.path, - selected: state.explorer.selected + selected: state.explorer.selected, + keywords: state.explorer.keywords, }; }; @@ -497,34 +498,40 @@ class ContextMenuCompoment extends Component { 重命名 - - this.props.openCopyDialog() - } - > - - - - - 复制 - - + {this.props.keywords === null && + + this.props.openCopyDialog() + } + > + + + + + 复制 + + + } + )} {isHomePage && (
- - this.props.openMoveDialog() - } - > - - - - - 移动 - - + {this.props.keywords === null && + + this.props.openMoveDialog() + } + > + + + + + 移动 + + + } + ({}); @@ -27,7 +28,7 @@ const mapDispatchToProps = dispatch => { }; }; -class ImgPreviewCompoment extends Component { +class ImagPreviewComponent extends Component { state = { items: [], photoIndex: 0, @@ -40,7 +41,7 @@ class ImgPreviewCompoment extends Component { if (nextProps.first !== null) { if (pathHelper.isSharePage(this.props.location.pathname) && !nextProps.first.path){ let newImg = { - title: nextProps.first.name, + intro: nextProps.first.name, src: baseURL + "/share/preview/" +nextProps.first.key @@ -75,7 +76,7 @@ class ImgPreviewCompoment extends Component { value.id } let newImg = { - title: value.name, + intro: value.name, src:src, }; if ( @@ -107,42 +108,30 @@ class ImgPreviewCompoment extends Component { return (
- {isOpen && ( this.handleClose()} - imageLoadErrorMessage = "无法加载此图像" - imageCrossOrigin = "anonymous" - imageTitle = {items[photoIndex].title} - onMovePrevRequest={() => - this.setState({ - photoIndex: (photoIndex + items.length - 1) % items.length, - }) - } - reactModalStyle={{ - overlay:{ - zIndex:10000 - }, - }} - onMoveNextRequest={() => - this.setState({ - photoIndex: (photoIndex + 1) % items.length, - }) - } + {isOpen && ( this.handleClose()} + index={photoIndex} + onIndexChange={(n) => + this.setState({ + photoIndex: n, + }) + } + />)}
); } } -ImgPreviewCompoment.propTypes = { +ImagPreviewComponent.propTypes = { classes: PropTypes.object.isRequired }; const ImgPreivew = connect( mapStateToProps, mapDispatchToProps -)(withStyles(styles)(withRouter(ImgPreviewCompoment))); +)(withStyles(styles)(withRouter(ImagPreviewComponent))); export default ImgPreivew; diff --git a/src/component/FileManager/ImgPreview_old.js b/src/component/FileManager/ImgPreview_old.js new file mode 100644 index 0000000..7ae0bd1 --- /dev/null +++ b/src/component/FileManager/ImgPreview_old.js @@ -0,0 +1,148 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; +import { baseURL } from "../../middleware/Api"; +import { showImgPreivew } from "../../actions/index"; +import { imgPreviewSuffix } from "../../config"; +import { withStyles } from "@material-ui/core"; +import Lightbox from "react-image-lightbox"; +import "react-image-lightbox/style.css"; +import pathHelper from "../../untils/page"; +import {withRouter} from "react-router"; + +const styles = theme => ({}); + +const mapStateToProps = state => { + return { + first: state.explorer.imgPreview.first, + other: state.explorer.imgPreview.other + }; +}; + +const mapDispatchToProps = dispatch => { + return { + showImgPreivew: first => { + dispatch(showImgPreivew(first)); + } + }; +}; + +class ImgPreviewCompoment extends Component { + state = { + items: [], + photoIndex: 0, + isOpen: false + }; + + componentWillReceiveProps = nextProps => { + let items = []; + let firstOne = 0; + if (nextProps.first !== null) { + if (pathHelper.isSharePage(this.props.location.pathname) && !nextProps.first.path){ + let newImg = { + title: nextProps.first.name, + src: + baseURL + + "/share/preview/" +nextProps.first.key + }; + firstOne = 0; + items.push(newImg); + this.setState({ + photoIndex:firstOne, + items: items, + isOpen: true + }); + return + } + // eslint-disable-next-line + nextProps.other.map(value => { + let fileType = value.name + .split(".") + .pop() + .toLowerCase(); + if (imgPreviewSuffix.indexOf(fileType) !== -1) { + let src = ""; + if (pathHelper.isSharePage(this.props.location.pathname)){ + src = baseURL + + "/share/preview/" + value.key + src = src + "?path=" + encodeURIComponent( (value.path === "/" + ? value.path + value.name + : value.path + "/" + value.name)) + + }else{ + src = baseURL + + "/file/preview/" + + value.id + } + let newImg = { + title: value.name, + src:src, + }; + if ( + value.path === nextProps.first.path && + value.name === nextProps.first.name + ) { + firstOne = items.length; + } + items.push(newImg); + } + }); + this.setState({ + photoIndex:firstOne, + items: items, + isOpen: true + }); + } + }; + + handleClose = () => { + this.props.showImgPreivew(null); + this.setState({ + isOpen: false + }); + }; + + render() { + const { photoIndex, isOpen,items } = this.state; + + return ( +
+ {isOpen && ( this.handleClose()} + imageLoadErrorMessage = "无法加载此图像" + imageCrossOrigin = "anonymous" + imageTitle = {items[photoIndex].title} + onMovePrevRequest={() => + this.setState({ + photoIndex: (photoIndex + items.length - 1) % items.length, + }) + } + reactModalStyle={{ + overlay:{ + zIndex:10000 + }, + }} + onMoveNextRequest={() => + this.setState({ + photoIndex: (photoIndex + 1) % items.length, + }) + } + />)} +
+ ); + } +} + +ImgPreviewCompoment.propTypes = { + classes: PropTypes.object.isRequired +}; + +const ImgPreivew = connect( + mapStateToProps, + mapDispatchToProps +)(withStyles(styles)(withRouter(ImgPreviewCompoment))); + +export default ImgPreivew; diff --git a/src/component/FileManager/Modals.js b/src/component/FileManager/Modals.js index 9ef7850..e6a307e 100644 --- a/src/component/FileManager/Modals.js +++ b/src/component/FileManager/Modals.js @@ -196,11 +196,17 @@ class ModalsCompoment extends Component { Download = () => { let reqURL = ""; if (this.props.selected[0].key) { + let downloadPath = + 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; reqURL = "/share/download/" + this.props.selected[0].key + - "/" + - this.props.selected[0].id; + "?path=" + + encodeURIComponent(downloadPath); } else { reqURL = "/file/download/" + this.props.selected[0].id; } @@ -936,16 +942,8 @@ class ModalsCompoment extends Component { ) : "") : baseURL + - "/file/preview" + - (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) + "/file/preview/" + + this.props.selected[0].id } /> )} diff --git a/src/component/FileManager/PathSelector.js b/src/component/FileManager/PathSelector.js index 0fd4607..e89a6ac 100644 --- a/src/component/FileManager/PathSelector.js +++ b/src/component/FileManager/PathSelector.js @@ -24,6 +24,7 @@ import { Api } from 'mdi-material-ui'; const mapStateToProps = state => { return { + keywords: state.explorer.keywords, } } @@ -69,7 +70,7 @@ class PathSelectorCompoment extends Component { componentDidMount= ()=>{ let toBeLoad = this.props.presentPath; - this.enterFolder(toBeLoad); + this.enterFolder(this.props.keywords === null ? toBeLoad : "/"); } back = ()=>{ diff --git a/src/reducers/index.js b/src/reducers/index.js index 9074b26..90fd485 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -474,7 +474,7 @@ const cloudreveApp = (state = [], action) => { return Object.assign({}, state, { navigator: Object.assign({}, state.navigator, { path: "/搜索结果", - refresh:!state.navigator.refresh, + refresh:state.explorer.keywords === null? state.navigator.refresh:!state.navigator.refresh, }), viewUpdate:Object.assign({}, state.viewUpdate, { contextOpen:false, diff --git a/yarn.lock b/yarn.lock index c543edf..78870c9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4046,11 +4046,6 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" -exenv@^1.2.0: - version "1.2.2" - resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" - integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= - exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -6425,6 +6420,11 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= +lodash.uniqueid@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz#3268f26a7c88e4f4b1758d679271814e31fa5b26" + integrity sha1-MmjyanyI5PSxdY1nknGBTjH6WyY= + "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" @@ -8369,7 +8369,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8640,14 +8640,6 @@ react-hotkeys@^2.0.0: dependencies: prop-types "^15.6.1" -react-image-lightbox@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz#872d1a4336b5a6410ea7909b767cf59014081004" - integrity sha512-GprldD8AqpRb2hsOdns3sI7Xeo9hJlcybDxuli4RB+ml1J/GaFaUuRkT/7IrTLv2+4vkR74ahz2LD0HOUHI7wA== - dependencies: - prop-types "^15.6.2" - react-modal "^3.8.1" - react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.6, react-is@^16.9.0: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" @@ -8666,20 +8658,13 @@ react-lazy-load-image-component@^1.3.2: lodash.debounce "^4.0.8" lodash.throttle "^4.1.1" -react-lifecycles-compat@^3.0.0: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== - -react-modal@^3.8.1: - version "3.11.1" - resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.11.1.tgz#2a0d6877c9e98f123939ea92d2bb4ad7fa5a17f9" - integrity sha512-8uN744Yq0X2lbfSLxsEEc2UV3RjSRb4yDVxRQ1aGzPo86QjNOwhQSukDb8U8kR+636TRTvfMren10fgOjAy9eA== +react-photo-view@^0.3.9: + version "0.3.9" + resolved "https://registry.yarnpkg.com/react-photo-view/-/react-photo-view-0.3.9.tgz#d240e04918b4df0cd3405d07159a5784391842b2" + integrity sha512-tXVh4SmpUYIxU4IaECNQ1nolrN6bYD1S0dGLZyWODphOdkfNAuIxDXLFfwrUVZ2MpWP5ghi7Uf7C6wRYo2meOQ== dependencies: - exenv "^1.2.0" - prop-types "^15.5.10" - react-lifecycles-compat "^3.0.0" - warning "^4.0.3" + lodash.debounce "^4.0.8" + lodash.uniqueid "^4.0.1" react-redux@^7.1.3: version "7.1.3" @@ -10462,13 +10447,6 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" -warning@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" - integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== - dependencies: - loose-envify "^1.0.0" - watchpack@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"