cluedin-widget/core/components/generics/Frame.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Frame extends Component {
  render() {
    return (<iframe style={{
        border: 0,
        minWidth: '400px',
        maxWidth: '400px',
      }}
    />);
  }

  componentDidMount() {
    this.renderFrameContents();
  }

  renderFrameContents() {
    const frame = ReactDOM.findDOMNode(this);
    if (frame) {
      const doc = frame.contentDocument;
      const self = this;

      if (doc.readyState === 'complete') {
        ReactDOM.render(<style
          dangerouslySetInnerHTML={ { __html: 'body { margin: 0!important; padding: 0!important; background: white; font-size: 12px !important; color: #999 !important; font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;  }' } }/>, doc.head);
        ReactDOM.render(self.props.children, doc.body);
      } else {
        setTimeout(self.renderFrameContents, 0);
      }
    }
  }

  componentDidUpdate() {
    this.renderFrameContents();
  }

  componentWillUnmount() {
    const frame = ReactDOM.findDOMNode(this);
    if (frame) {
      ReactDOM.unmountComponentAtNode(frame.contentDocument.body);
    }
  }
};