Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Updated Frame component to a simpler version

Browse source 
no issue

Makes frame component more efficient and easier to understand
This commit is contained in:
Rish 2020-04-02 13:25:10 +05:30
parent 4ddddabe85
commit ee3fd5a18e
1 changed files with 14 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
ghost/portal/src/components/FrameComponent.js
View file

@ -2,42 +2,20 @@ import React, { Component } from 'react'
import { createPortal } from 'react-dom'
export default class Frame extends Component {
constructor(props) {
super(props)
this.setContentRef = (node) => {
this.contentRef = ((!node || !node.contentWindow) && null) || (node && node.contentWindow.document.body);
if (this.contentRef) {
this.setState({
refUpdated: this.state.refUpdated + 1
})
}
componentDidMount() {
this.iframeHead = this.node.contentDocument.head;
this.iframeRoot = this.node.contentDocument.body;
this.iframeRoot.style.margin = '0px';
this.forceUpdate()
}
this.state = {
refUpdated: 0
render() {
const { children, head, title="", style={}, ...rest } = this.props
return (
<iframe {...rest} ref={node => (this.node = node)} title={title} style={style} frameBorder="0">
{this.iframeHead && createPortal(head, this.iframeHead)}
{this.iframeRoot && createPortal(children, this.iframeRoot)}
</iframe>
)
}
}
renderFrameChildren() {
const { children } = this.props // eslint-disable-line
if (this.contentRef) {
return createPortal(
React.Children.only(children),
this.contentRef
);
}
return null;
}
render() {
const { children, title = "membersjs-frame", ...props } = this.props // eslint-disable-line
const style = this.props.style || {};
return (
<iframe title= {title} ref={this.setContentRef} style={style} frameBorder="0">
{this.renderFrameChildren()}
</iframe>
)
}
}
}