plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
54 lines (53 loc) • 1.81 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class AcePreview extends Component {
constructor() {
super(...arguments);
this.iframeRender = (html, css, js) => {
while (this.container.hasChildNodes()) {
this.container.removeChild(this.container.firstChild);
}
const iframe = document.createElement('iframe');
iframe.width = '100%';
iframe.height = '200px';
this.container.appendChild(iframe);
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
iframe.contentDocument.head.appendChild(style);
const script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = js;
iframe.contentDocument.head.appendChild(script);
iframe.contentDocument.body.innerHTML = html;
};
}
componentDidMount() {
const { html, css, js } = this.props;
this.iframeRender(html, css, js);
}
componentDidUpdate(prevProps) {
if (this.container) {
const { html, css, js } = this.props;
if (html !== prevProps.html || css !== prevProps.css || js !== prevProps.js) {
this.iframeRender(html, css, js);
}
}
}
render() {
return (React.createElement("div", { ref: (c) => {
this.container = c;
}, id: "code-preview", style: { width: '100%', height: 200 } }));
}
}
AcePreview.propTypes = {
html: PropTypes.string,
css: PropTypes.string,
js: PropTypes.string,
};
AcePreview.defaultProps = {
html: '',
css: '',
js: '',
};
export default AcePreview;