2020-04-19 20:06:17 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
|
|
|
import Viewer from 'react-viewer';
|
|
|
|
import { Icons } from "asc-web-components";
|
|
|
|
import styled from "styled-components";
|
2020-05-28 21:05:37 +00:00
|
|
|
import MediaScrollButton from "./scroll-button"
|
|
|
|
import ControlBtn from "./control-btn"
|
2020-04-19 20:06:17 +00:00
|
|
|
|
|
|
|
const StyledViewer = styled(Viewer)`
|
|
|
|
|
2020-04-22 17:44:09 +00:00
|
|
|
.react-viewer-footer{
|
|
|
|
bottom: 5px!important;
|
|
|
|
z-index: 4001!important;
|
2020-05-28 21:05:37 +00:00
|
|
|
overflow: visible;
|
2020-04-22 17:44:09 +00:00
|
|
|
}
|
|
|
|
.react-viewer-canvas{
|
|
|
|
z-index: 4000!important;
|
2020-05-28 21:05:37 +00:00
|
|
|
margin-top: 50px;
|
2020-04-22 17:44:09 +00:00
|
|
|
}
|
|
|
|
.react-viewer-navbar,
|
2020-05-28 06:06:18 +00:00
|
|
|
.react-viewer-mask,
|
|
|
|
.react-viewer-attribute,
|
|
|
|
.react-viewer-close{
|
2020-04-22 17:44:09 +00:00
|
|
|
display: none
|
|
|
|
}
|
2020-05-08 07:18:50 +00:00
|
|
|
.react-viewer-toolbar{
|
2020-05-28 06:06:18 +00:00
|
|
|
position: relative;
|
|
|
|
overflow: visible;
|
2020-05-08 07:18:50 +00:00
|
|
|
bottom: 4px;
|
|
|
|
}
|
2020-04-19 20:06:17 +00:00
|
|
|
.react-viewer-toolbar li{
|
|
|
|
width: 40px;
|
2020-09-22 07:15:37 +00:00
|
|
|
height: 30px;
|
2020-05-28 06:06:18 +00:00
|
|
|
margin-top: 4px;
|
2020-04-19 20:06:17 +00:00
|
|
|
border-radius: 2px;
|
|
|
|
cursor: pointer;
|
|
|
|
line-height: 24px;
|
2020-09-22 07:15:37 +00:00
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
2020-04-19 20:06:17 +00:00
|
|
|
}
|
|
|
|
.react-viewer-btn{
|
2020-04-22 17:44:09 +00:00
|
|
|
background-color: transparent;
|
2020-04-19 20:06:17 +00:00
|
|
|
&:hover{
|
|
|
|
background-color: rgba(200, 200, 200, 0.2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li[data-key='prev']{
|
|
|
|
left: 20px
|
|
|
|
}
|
|
|
|
li[data-key='next']{
|
|
|
|
right: 20px
|
|
|
|
}
|
|
|
|
li[data-key='prev'],
|
|
|
|
li[data-key='next']{
|
|
|
|
position: fixed;
|
|
|
|
top: calc(50% - 20px);
|
|
|
|
|
|
|
|
height: auto;
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
}
|
2020-05-28 21:05:37 +00:00
|
|
|
li[data-key='delete'],
|
|
|
|
li[data-key='customDownload']{
|
2020-09-24 13:54:31 +00:00
|
|
|
position: fixed;
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
position: initial;
|
|
|
|
}
|
2020-05-28 21:05:37 +00:00
|
|
|
bottom: 10px;
|
|
|
|
.controlBtn{
|
|
|
|
margin: 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li[data-key='delete']{
|
|
|
|
right: 62px;
|
|
|
|
}
|
|
|
|
li[data-key='customDownload']{
|
|
|
|
right: 12px;
|
|
|
|
}
|
2020-05-05 09:22:58 +00:00
|
|
|
.iconContainer{
|
2020-05-05 13:02:21 +00:00
|
|
|
width: 20px;
|
2020-05-28 06:06:18 +00:00
|
|
|
line-height: 20px;
|
2020-05-05 09:22:58 +00:00
|
|
|
margin: 4px auto;
|
2020-05-05 13:02:21 +00:00
|
|
|
|
|
|
|
&.reset{
|
|
|
|
width: 18px;
|
|
|
|
}
|
2020-05-05 09:22:58 +00:00
|
|
|
}
|
2020-05-28 21:05:37 +00:00
|
|
|
|
|
|
|
.btnContainer{
|
|
|
|
display: block;
|
2020-09-24 13:54:31 +00:00
|
|
|
width: 18px;
|
|
|
|
margin: 4px 10px;
|
2020-05-28 21:05:37 +00:00
|
|
|
line-height: 19px;
|
|
|
|
}
|
2020-06-01 09:17:00 +00:00
|
|
|
.scrollBtn{
|
|
|
|
cursor: ${props => props.inactive ? 'default' : 'pointer'};
|
|
|
|
opacity: ${props => props.inactive ? '0.2' : '1'};
|
|
|
|
&:hover{
|
|
|
|
background-color: ${props => !props.inactive ? 'rgba(200, 200, 200, 0.2)' : 'rgba(11,11,11,0.7)'};
|
|
|
|
}
|
|
|
|
}
|
2020-04-19 20:06:17 +00:00
|
|
|
`
|
|
|
|
|
|
|
|
|
|
|
|
var customToolbar = [
|
|
|
|
{
|
|
|
|
key: 'zoomIn',
|
|
|
|
actionType: 1,
|
2020-08-12 13:11:30 +00:00
|
|
|
render: <div className="iconContainer zoomIn"><Icons.MediaZoomInIcon size="scale" /></div>
|
2020-04-19 20:06:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'zoomOut',
|
|
|
|
actionType: 2,
|
2020-08-12 13:11:30 +00:00
|
|
|
render: <div className="iconContainer zoomOut"><Icons.MediaZoomOutIcon size="scale" /></div>
|
2020-04-19 20:06:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'reset',
|
|
|
|
actionType: 7,
|
2020-05-05 13:02:21 +00:00
|
|
|
render: <div className="iconContainer reset"><Icons.MediaResetIcon size="scale" /></div>
|
2020-04-19 20:06:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'rotateLeft',
|
|
|
|
actionType: 5,
|
2020-08-12 13:11:30 +00:00
|
|
|
render: <div className="iconContainer rotateLeft"><Icons.MediaRotateLeftIcon size="scale" /></div>
|
2020-04-19 20:06:17 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'rotateRight',
|
|
|
|
actionType: 6,
|
2020-08-12 13:11:30 +00:00
|
|
|
render: <div className="iconContainer rotateRight"><Icons.MediaRotateRightIcon size="scale" /></div>
|
2020-05-28 21:05:37 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'prev',
|
|
|
|
actionType: 3,
|
2020-06-01 09:17:00 +00:00
|
|
|
render: <MediaScrollButton orientation="right" className="scrollBtn"/>
|
2020-05-28 21:05:37 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'next',
|
|
|
|
actionType: 4,
|
2020-06-01 09:17:00 +00:00
|
|
|
render: <MediaScrollButton orientation="left" className="scrollBtn"/>
|
2020-05-28 21:05:37 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'delete',
|
|
|
|
render: <ControlBtn className="controlBtn">
|
|
|
|
<div className="btnContainer">
|
|
|
|
<Icons.MediaDeleteIcon size="scale" />
|
|
|
|
</div>
|
|
|
|
</ControlBtn>
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'customDownload',
|
|
|
|
render: <ControlBtn className="controlBtn">
|
|
|
|
<div className="btnContainer">
|
|
|
|
<Icons.MediaDownloadIcon size="scale" />
|
|
|
|
</div>
|
|
|
|
</ControlBtn>
|
2020-04-29 14:11:01 +00:00
|
|
|
}
|
2020-04-19 20:06:17 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
class ImageViewer extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
visible: false,
|
2020-04-29 14:11:01 +00:00
|
|
|
};
|
2020-04-19 20:06:17 +00:00
|
|
|
}
|
2020-06-03 12:33:05 +00:00
|
|
|
componentDidUpdate(){
|
|
|
|
document.getElementsByClassName("iconContainer reset").length > 0 && document.getElementsByClassName("iconContainer reset")[0].click();
|
|
|
|
}
|
2020-04-29 14:11:01 +00:00
|
|
|
render() {
|
2020-04-19 20:06:17 +00:00
|
|
|
|
2020-06-01 09:17:00 +00:00
|
|
|
const { className, visible, images, inactive } = this.props;
|
2020-04-19 20:06:17 +00:00
|
|
|
|
2020-05-28 21:05:37 +00:00
|
|
|
customToolbar.forEach((button) => {
|
|
|
|
switch (button.key) {
|
|
|
|
case "prev":
|
|
|
|
button.onClick = this.props.onPrevClick;
|
|
|
|
break;
|
|
|
|
case "next":
|
|
|
|
button.onClick = this.props.onNextClick;
|
|
|
|
break;
|
|
|
|
case "delete":
|
|
|
|
button.onClick = this.props.onDeleteClick;
|
|
|
|
break;
|
|
|
|
case "customDownload":
|
|
|
|
button.onClick = this.props.onDownloadClick;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
2020-04-29 14:11:01 +00:00
|
|
|
return (
|
|
|
|
<div className={className}>
|
2020-04-19 20:06:17 +00:00
|
|
|
<StyledViewer
|
2020-06-01 09:17:00 +00:00
|
|
|
inactive={inactive}
|
2020-04-19 20:06:17 +00:00
|
|
|
visible={visible}
|
2020-07-02 08:02:50 +00:00
|
|
|
zoomSpeed={0.1}
|
2020-04-19 20:06:17 +00:00
|
|
|
customToolbar={(toolbars) => {
|
|
|
|
return customToolbar;
|
2020-04-29 14:11:01 +00:00
|
|
|
}}
|
2020-04-19 20:06:17 +00:00
|
|
|
images={images}
|
2020-08-12 13:11:30 +00:00
|
|
|
disableKeyboardSupport={true}
|
2020-04-19 20:06:17 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-04-29 14:11:01 +00:00
|
|
|
ImageViewer.propTypes = {
|
|
|
|
className: PropTypes.string,
|
|
|
|
visible: PropTypes.bool,
|
2020-06-01 09:17:00 +00:00
|
|
|
inactive: PropTypes.bool,
|
2020-05-28 21:05:37 +00:00
|
|
|
images: PropTypes.arrayOf(PropTypes.object),
|
|
|
|
onNextClick: PropTypes.func,
|
|
|
|
onPrevClick: PropTypes.func,
|
|
|
|
onDeleteClick: PropTypes.func,
|
|
|
|
onDownloadClick: PropTypes.func
|
2020-04-29 14:11:01 +00:00
|
|
|
}
|
2020-04-19 20:06:17 +00:00
|
|
|
|
|
|
|
export default ImageViewer;
|