Fix re-rendering of iframe by removing state dependency for spinner
This commit is contained in:
parent
0fee76a88e
commit
027bc02a83
|
@ -5,10 +5,6 @@ import * as cs from "./constants"
|
|||
import { Spin } from "antd"
|
||||
|
||||
class ModalPreview extends React.PureComponent {
|
||||
state = {
|
||||
loading: true
|
||||
}
|
||||
|
||||
makeForm(body) {
|
||||
let form = document.createElement("form")
|
||||
form.method = cs.MethodPost
|
||||
|
@ -33,24 +29,38 @@ class ModalPreview extends React.PureComponent {
|
|||
onCancel={ this.props.onCancel }
|
||||
onOk={ this.props.onCancel }>
|
||||
<div className="preview-iframe-container">
|
||||
<Spin spinning={ this.state.loading }>
|
||||
<iframe onLoad={() => { this.setState({ loading: false }) }} title={ this.props.title ? this.props.title : "Preview" }
|
||||
<Spin className="preview-iframe-spinner"></Spin>
|
||||
<iframe key="xxxxxxxxx" onLoad={() => {
|
||||
// If state is used to manage the spinner, it causes
|
||||
// the iframe to re-render and reload everything.
|
||||
// Hack the spinner away from the DOM directly instead.
|
||||
let spin = document.querySelector(".preview-iframe-spinner")
|
||||
if(spin) {
|
||||
spin.parentNode.removeChild(spin)
|
||||
}
|
||||
// this.setState({ loading: false })
|
||||
}} title={ this.props.title ? this.props.title : "Preview" }
|
||||
name="preview-iframe"
|
||||
id="preview-iframe"
|
||||
className="preview-iframe"
|
||||
ref={(o) => {
|
||||
if(o) {
|
||||
// When the DOM reference for the iframe is ready,
|
||||
// see if there's a body to post with the form hack.
|
||||
if(this.props.body !== undefined
|
||||
&& this.props.body !== null) {
|
||||
this.makeForm(this.props.body)
|
||||
if(!o) {
|
||||
return
|
||||
}
|
||||
|
||||
// When the DOM reference for the iframe is ready,
|
||||
// see if there's a body to post with the form hack.
|
||||
if(this.props.body !== undefined
|
||||
&& this.props.body !== null) {
|
||||
this.makeForm(this.props.body)
|
||||
} else {
|
||||
if(this.props.previewURL) {
|
||||
o.src = this.props.previewURL
|
||||
}
|
||||
}
|
||||
}}
|
||||
src={ this.props.previewURL ? this.props.previewURL : "about:blank" }>
|
||||
src="about:blank">
|
||||
</iframe>
|
||||
</Spin>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
|
|
|
@ -256,6 +256,14 @@ td.actions {
|
|||
.preview-iframe-container {
|
||||
min-height: 500px;
|
||||
}
|
||||
.preview-iframe-spinner {
|
||||
position: absolute !important;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: calc(50% - 40px);
|
||||
top: calc(30%);
|
||||
/* top: 15px; */
|
||||
}
|
||||
.preview-iframe {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
|
Loading…
Reference in New Issue