import * as React from 'react';
import {ThreeBounce} from 'better-react-spinkit';
import LoadingIndicator from "../loadingIndicator/LoadingIndicator";
import {observer} from "mobx-react";
import {observable} from "mobx";
import autobind from "autobind-decorator";

@observer
export default class IFrameLoader extends React.Component<{ url:string; iframeId?:string; height:number }, {}> {

    @observable iframeLoaded = false;

    @autobind
    private onLoad() {
        this.iframeLoaded = true;
    }

    //NOTE: we need zindex to be higher than that of global loader
    render(){
        return (
            <div style={{position:'relative'}}>

                <LoadingIndicator center={true} size={"big"} isLoading={!this.iframeLoaded}  />
                <iframe id={this.props.iframeId||""}
                        style={{ width:'100%', position:'relative', zIndex:100, height:this.props.height, border:'none'}}
                        src={this.props.url}
                        onLoad={this.onLoad}
                >
                </iframe>
            </div>
        )
    }
}
import * as React from 'react';
import {ThreeBounce} from 'better-react-spinkit';
import LoadingIndicator from "../loadingIndicator/LoadingIndicator";
import {observer} from "mobx-react";
import {observable} from "mobx";
import autobind from "autobind-decorator";

@observer
export default class IFrameLoader extends React.Component<{ url:string; className?:string; iframeId?:string; height?:number }, {}> {

    @observable iframeLoaded = false;

    @autobind
    private onLoad() {
        this.iframeLoaded = true;
    }

    //NOTE: we need zindex to be higher than that of global loader
    render(){
        return (
            <div style={{position:'relative'}}>

                <LoadingIndicator center={true} size={"big"} isLoading={!this.iframeLoaded}  />
                <iframe id={this.props.iframeId||""}
                        className={this.props.className||""}
                        style={{ width:'100%', position:'relative', zIndex:100, height:this.props.height, border:'none'}}
                        src={this.props.url}
                        onLoad={this.onLoad}
                >
                </iframe>
            </div>
        )
    }
}
Allow for CSS class name assigned to iframe
Allow for CSS class name assigned to iframe

Signed-off-by: Chris Wakefield <cwakefield@mdanderson.org>

Former-commit-id: 3364aa94ede3e20d84cb8da544ae1f81df20f4f2