import * as React from 'react' ; import Viewer , { ViewerConfig } from './Viewer' ; import { color } from '../../Css' ; import { stylesheet } from 'typestyle' ; export interface HTMLViewerConfig extends ViewerConfig { htmlContent : string ; } interface HTMLViewerProps { configs : HTMLViewerConfig [ ] ; maxDimension ? : number ; } class HTMLViewer extends Viewer < HTMLViewerProps , any > { private _iframeRef = React . createRef < HTMLIFrameElement > ( ) ; private _config = this . props . configs [ 0 ] ; private _css = stylesheet ( { iframe : { border : '1px solid ' + color . divider , boxSizing : 'border-box' , flexGrow : 1 , height : this . props . maxDimension ? this . props . maxDimension : 'initial' , minHeight : this . props . maxDimension ? this . props . maxDimension : 600 , width : '100%' , } , } ) ; public getDisplayName ( ) { return 'Static HTML' ; } public componentDidMount ( ) { if ( this . _iframeRef . current ) { this . _iframeRef . current ! . srcdoc = this . _config . htmlContent ; } } public render ( ) { if ( ! this . _config ) { return null ; } return ( < iframe ref = { this . _iframeRef } src = 'about:blank' className = { this . _css . iframe } sandbox = 'allow-scripts' / > ) ; } } export default HTMLViewer ;