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 ( -
+
@@ -60,7 +60,7 @@ export default class PopupMenuComponent extends React.Component {
-
+ ); } } \ No newline at end of file diff --git a/ghost/portal/src/components/TriggerComponent.js b/ghost/portal/src/components/TriggerComponent.js index 098a97ea03..869048272a 100644 --- a/ghost/portal/src/components/TriggerComponent.js +++ b/ghost/portal/src/components/TriggerComponent.js @@ -1,4 +1,5 @@ import logo from '../logo.svg'; +import FrameComponent from './FrameComponent'; import closeIcon from '../images/close.png'; const React = require("react"); const PropTypes = require("prop-types"); @@ -68,13 +69,13 @@ export default class TriggerComponent extends React.Component { transition: 'transform 0.16s linear 0s, opacity 0.08s linear 0s', }; return ( -
this.onToggle(e)}> -
+ +
this.onToggle(e)}>
{this.renderTriggerIcon()}
-
+ ); } } \ No newline at end of file