15308555518/ frontend
1
0
Fork 0
mirror of https://github.com/cloudreve/frontend.git synced 2025-12-25 19:52:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

更换新的图像预览组件

This commit is contained in:
HFO4 2020-02-10 14:46:01 +08:00
parent 56c6b2314a
commit 3f5c826c06
8 changed files with 224 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

57
src/component/FileManager/ContextMenu.js
View File

@ -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 {
重命名
</Typography>
</MenuItem>
<MenuItem
onClick={() =>
this.props.openCopyDialog()
}
>
<ListItemIcon>
<FileCopyIcon />
</ListItemIcon>
<Typography variant="inherit">
复制
</Typography>
</MenuItem>
{this.props.keywords === null &&
<MenuItem
onClick={() =>
this.props.openCopyDialog()
}
>
<ListItemIcon>
<FileCopyIcon />
</ListItemIcon>
<Typography variant="inherit">
复制
</Typography>
</MenuItem>
}
</>
)}
{isHomePage && (
<div>
<MenuItem
onClick={() =>
this.props.openMoveDialog()
}
>
<ListItemIcon>
<MoveIcon />
</ListItemIcon>
<Typography variant="inherit">
移动
</Typography>
</MenuItem>
{this.props.keywords === null &&
<MenuItem
onClick={() =>
this.props.openMoveDialog()
}
>
<ListItemIcon>
<MoveIcon />
</ListItemIcon>
<Typography variant="inherit">
移动
</Typography>
</MenuItem>
}
<Divider />
<MenuItem
className={classes.propover}

47
src/component/FileManager/ImgPreview.js
View File

@ -5,10 +5,11 @@ 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";
import {PhotoSlider} from "react-photo-view";
import 'react-photo-view/dist/index.css';
const styles = theme => ({});
@ -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 (
<div>
{isOpen && (<Lightbox
mainSrc={items[photoIndex].src}
nextSrc={items[(photoIndex + 1) % items.length].src}
prevSrc={items[(photoIndex + items.length - 1) % items.length].src}
onCloseRequest={() => 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 && (<PhotoSlider
images={items}
visible={isOpen}
onClose={() => this.handleClose()}
index={photoIndex}
onIndexChange={(n) =>
this.setState({
photoIndex: n,
})
}
/>)}
</div>
);
}
}
ImgPreviewCompoment.propTypes = {
ImagPreviewComponent.propTypes = {
classes: PropTypes.object.isRequired
};
const ImgPreivew = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(withRouter(ImgPreviewCompoment)));
)(withStyles(styles)(withRouter(ImagPreviewComponent)));
export default ImgPreivew;

148
src/component/FileManager/ImgPreview_old.js Normal file
View File

@ -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 (
<div>
{isOpen && (<Lightbox
mainSrc={items[photoIndex].src}
nextSrc={items[(photoIndex + 1) % items.length].src}
prevSrc={items[(photoIndex + items.length - 1) % items.length].src}
onCloseRequest={() => 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,
})
}
/>)}
</div>
);
}
}
ImgPreviewCompoment.propTypes = {
classes: PropTypes.object.isRequired
};
const ImgPreivew = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(withRouter(ImgPreviewCompoment)));
export default ImgPreivew;

22
src/component/FileManager/Modals.js
View File

@ -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
}
/>
)}

3
src/component/FileManager/PathSelector.js
View File

@ -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 = ()=>{

2
src/reducers/index.js
View File

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

46
yarn.lock
View File

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