130 lines
2.8 KiB
JavaScript
130 lines
2.8 KiB
JavaScript
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";
|
|
|
|
const StyledViewer = styled(Viewer)`
|
|
|
|
.react-viewer-footer{
|
|
bottom: 5px!important;
|
|
z-index: 4001!important;
|
|
}
|
|
.react-viewer-canvas{
|
|
z-index: 4000!important;
|
|
}
|
|
.react-viewer-navbar,
|
|
.react-viewer-mask{
|
|
display: none
|
|
}
|
|
.react-viewer-attribute{
|
|
display: none;
|
|
}
|
|
.react-viewer-toolbar li{
|
|
width: 40px;
|
|
height:30px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
line-height: 24px;
|
|
|
|
}
|
|
|
|
.react-viewer-btn{
|
|
background-color: transparent;
|
|
&: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;
|
|
}
|
|
}
|
|
.iconContainer{
|
|
width: 20px;
|
|
line-height: 15px;
|
|
margin: 4px auto;
|
|
|
|
&.reset{
|
|
width: 18px;
|
|
}
|
|
}
|
|
`
|
|
|
|
|
|
var customToolbar = [
|
|
{
|
|
key: 'zoomIn',
|
|
actionType: 1,
|
|
render: <div className="iconContainer"><Icons.MediaZoomInIcon size="scale" /></div>
|
|
},
|
|
{
|
|
key: 'zoomOut',
|
|
actionType: 2,
|
|
render: <div className="iconContainer"><Icons.MediaZoomOutIcon size="scale" /></div>
|
|
},
|
|
{
|
|
key: 'reset',
|
|
actionType: 7,
|
|
render: <div className="iconContainer reset"><Icons.MediaResetIcon size="scale" /></div>
|
|
},
|
|
{
|
|
key: 'rotateLeft',
|
|
actionType: 5,
|
|
render: <div className="iconContainer"><Icons.MediaRotateLeftIcon size="scale" /></div>
|
|
},
|
|
{
|
|
key: 'rotateRight',
|
|
actionType: 6,
|
|
render: <div className="iconContainer"><Icons.MediaRotateRightIcon size="scale" /></div>
|
|
}
|
|
];
|
|
|
|
class ImageViewer extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
visible: false,
|
|
};
|
|
}
|
|
|
|
render() {
|
|
|
|
const { className, visible, images } = this.props;
|
|
|
|
return (
|
|
<div className={className}>
|
|
<StyledViewer
|
|
visible={visible}
|
|
customToolbar={(toolbars) => {
|
|
return customToolbar;
|
|
}}
|
|
images={images}
|
|
/>
|
|
</div>
|
|
)
|
|
};
|
|
}
|
|
|
|
ImageViewer.propTypes = {
|
|
className: PropTypes.string,
|
|
visible: PropTypes.bool,
|
|
images: PropTypes.arrayOf(PropTypes.object)
|
|
}
|
|
|
|
export default ImageViewer; |