diff --git a/ghost/portal/src/components/FrameComponent.js b/ghost/portal/src/components/FrameComponent.js new file mode 100644 index 0000000000..b17066c94e --- /dev/null +++ b/ghost/portal/src/components/FrameComponent.js @@ -0,0 +1,43 @@ +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 + }) + } + } + + this.state = { + refUpdated: 0 + } + } + + + 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 ( + + ) + } +} \ No newline at end of file diff --git a/ghost/portal/src/components/ParentContainer.js b/ghost/portal/src/components/ParentContainer.js index a5077cb820..f403f73bfd 100644 --- a/ghost/portal/src/components/ParentContainer.js +++ b/ghost/portal/src/components/ParentContainer.js @@ -1,4 +1,5 @@ import TriggerComponent from './TriggerComponent'; +import FrameComponent from './FrameComponent'; import PopupMenuComponent from './PopupMenuComponent'; const React = require("react"); const PropTypes = require("prop-types"); diff --git a/ghost/portal/src/components/PopupMenuComponent.js b/ghost/portal/src/components/PopupMenuComponent.js index 0ed5d47126..857d4d0af9 100644 --- a/ghost/portal/src/components/PopupMenuComponent.js +++ b/ghost/portal/src/components/PopupMenuComponent.js @@ -1,7 +1,7 @@ +import FrameComponent from './FrameComponent'; const React = require("react"); const PropTypes = require("prop-types"); - export default class PopupMenuComponent extends React.Component { static propTypes = { name: PropTypes.string, @@ -44,7 +44,7 @@ export default class PopupMenuComponent extends React.Component { textAlign: 'left' }; return ( -