import * as React from "react" ; import styles from './IFrameDialogContent.module.scss' ; import { Spinner , SpinnerSize } from 'office-ui-fabric-react/lib/Spinner' ; import omit from 'lodash/omit' ; export interface IIFrameDialogContentProps extends React . IframeHTMLAttributes < HTMLIFrameElement > { close : ( ) => void ; iframeOnLoad ? : ( iframe : any ) => void ; } export interface IIFrameDialogContentState { isContentVisible ? : boolean ; } /**
 * IFrame Dialog content
 */ export class IFrameDialogContent extends React . Component < IIFrameDialogContentProps , IIFrameDialogContentState > { private _iframe : any ; constructor ( props ) { super ( props ) ; this . state = { isContentVisible : false } ; } public render ( ) { return ( < div className = { styles . iFrameDialog } > < iframe ref = { ( iframe ) => { this . _iframe = iframe ; } } frameBorder = { 0 } onLoad = { this . _iframeOnLoad . bind ( this ) } style = { { width : '100%' , height : '100%' , visibility : this . state . isContentVisible ? 'visible' : 'hidden' } } { ... omit ( this . props , 'height' ) } /> { ! this . state . isContentVisible && < div className = { styles . spinnerContainer } > < Spinner size = { SpinnerSize . large } /> < /div>} < /div>); } private _iframeOnLoad ( ) { try { this . _iframe . contentWindow . frameElement . cancelPopUp = this . props . close ; this . _iframe . contentWindow . frameElement . commitPopUp = this . props . close ; this . _iframe . contentWindow . frameElement . commitPopup = this . props . close ; } catch ( err ) { if ( err . name !== 'SecurityError' ) { throw err ; } } if ( this . props . iframeOnLoad ) { this . props . iframeOnLoad ( this . _iframe ) ; } this . setState ( { isContentVisible : true } ) ; } }