forked from Gitlink/forgeplus-react
69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import React, { Component } from 'react';
|
|
import ReactDOM from 'react-dom'
|
|
import { Button, Icon } from 'antd';
|
|
import './TaskResultLayer.css';
|
|
|
|
class ImageLayer extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false,
|
|
previewImage: '',
|
|
current: 90,
|
|
transStyle: ''
|
|
}
|
|
}
|
|
translate = () => {
|
|
this.setState({
|
|
current: (this.state.current + 90) % 360,
|
|
transStyle: 'rotate(' + this.state.current + 'deg)'
|
|
});
|
|
}
|
|
|
|
render() {
|
|
let { showImage, imageSrc, } = this.props;
|
|
if (__SERVER__) {
|
|
return null
|
|
}
|
|
return ReactDOM.createPortal(
|
|
<div>
|
|
{showImage ?
|
|
<div className="taskResultLayer">
|
|
<div className="closePanel" onClick={() => this.props.onImageLayerClose()}></div>
|
|
<div className={"ImageLayerbutton mt20"}>
|
|
<Button
|
|
className={"fr"}
|
|
onClick={() => this.props.onImageLayerClose()}
|
|
>
|
|
关闭<Icon type="close" />
|
|
</Button>
|
|
|
|
<Button
|
|
href={imageSrc}
|
|
className={"fr mr10"}
|
|
>
|
|
下载<Icon type="vertical-align-bottom" />
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={() => this.translate()}
|
|
className={"fr mr10"}
|
|
>
|
|
旋转<Icon type="reload" theme="outlined" />
|
|
</Button>
|
|
</div>
|
|
<div className="passContent" style={{ transform: this.state.transStyle }}>
|
|
<img src={imageSrc} className="passImg" unselectable="on" alt="" />
|
|
</div>
|
|
</div>
|
|
:
|
|
<div></div>
|
|
}
|
|
</div>,
|
|
document.getElementById('root'),
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ImageLayer;
|