beenull/listmonk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix re-rendering of iframe by removing state dependency for spinner

Browse source
This commit is contained in:
Kailash Nadh 2018-11-02 13:17:18 +05:30
parent 0fee76a88e
commit 027bc02a83
2 changed files with 32 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/my/src/ModalPreview.js
View file

@ -5,10 +5,6 @@ import * as cs from "./constants"
import { Spin } from "antd" import { Spin } from "antd"
class ModalPreview extends React.PureComponent { class ModalPreview extends React.PureComponent {
state = {
loading: true
}
makeForm(body) { makeForm(body) {
let form = document.createElement("form") let form = document.createElement("form")
form.method = cs.MethodPost form.method = cs.MethodPost
@ -33,24 +29,38 @@ class ModalPreview extends React.PureComponent {
onCancel={ this.props.onCancel } onCancel={ this.props.onCancel }
onOk={ this.props.onCancel }> onOk={ this.props.onCancel }>
<div className="preview-iframe-container"> <div className="preview-iframe-container">
<Spin spinning={ this.state.loading }> <Spin className="preview-iframe-spinner"></Spin>
<iframe onLoad={() => { this.setState({ loading: false }) }} title={ this.props.title ? this.props.title : "Preview" } <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" name="preview-iframe"
id="preview-iframe" id="preview-iframe"
className="preview-iframe" className="preview-iframe"
ref={(o) => { ref={(o) => {
if(o) { if(!o) {
// When the DOM reference for the iframe is ready, return
// see if there's a body to post with the form hack. }
if(this.props.body !== undefined
&& this.props.body !== null) { // When the DOM reference for the iframe is ready,
this.makeForm(this.props.body) // 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> </iframe>
</Spin>
</div> </div>
</Modal> </Modal>

8
frontend/my/src/index.css
View file

@ -256,6 +256,14 @@ td.actions {
.preview-iframe-container { .preview-iframe-container {
min-height: 500px; min-height: 500px;
} }
.preview-iframe-spinner {
position: absolute !important;
width: 40px;
height: 40px;
left: calc(50% - 40px);
top: calc(30%);
/* top: 15px; */
}
.preview-iframe { .preview-iframe {
border: 0; border: 0;
width: 100%; width: 100%;