cluedin-widget/widget/entity/entityFramePreview/index.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 { register } from "../../../core/registry";
import Widget from '../../../core/components/generics/widget.jsx'
import ImagePreview from '../../../core/components/generics/ImagePreview.jsx'
import FullScreenPreviewDialog from '../../../core/components/dialogs/FullScreenPreview.jsx';

import { connect } from 'react-redux'

const frameStyle = {
    width: '100%',
    height: '400px',
    border: 'none'
};

class EntityFramePreview extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            closeDialog: false
        };
    }

    showFullScreen() {
        this.setState( {
            closeDialog: true
        } );
    }

    closeDialogHandler() {
        this.setState( {
            closeDialog: false
        } );
    }

    render() {
        const { isFetchingEntity, entity } = this.props;
        let content;

        if( !isFetchingEntity ) {
            if( entity.embedUrl ) {
                content = (<div>
                    <FullScreenPreviewDialog onClose={this.closeDialogHandler.bind(this)}
                                             open={this.state.closeDialog}
                                             name={entity.name}
                                             url={entity.embedUrl}></FullScreenPreviewDialog>

                    <div style={{height: '400px'}}>
                        <iframe style={frameStyle} src={entity.embedUrl}></iframe>
                    </div>
                </div>);
            } else {
                if( entity.hasPreview ) {
                    content = (<ImagePreview previewUrl={entity.previewUrl} alt={entity.name}></ImagePreview>);
                } else if( entity.hasLogo ) {
                    content = (<ImagePreview previewUrl={entity.logoUrl} alt={entity.name}></ImagePreview>);
                } else {
                    content = (
                        <p>No Preview currently available, you may need to sign-in in the related source to see the
                            preview
                            (ex:
                            Office365, Sharepoint, Dropbox....).</p>);
                }
            }
        } else {
            content = (<div></div>);
        }

        let menu = [ {
            type: 'Action',
            icon: 'fa fa-arrows-alt',
            title: 'Show Full Screen',
            onClick: this.showFullScreen.bind( this )
        } ];

        return (
            <Widget menu={menu} loading={isFetchingEntity} title="Document Preview">
                {content}
            </Widget>
        );

    }
}

function select( state ) {
    return {
        entity: state.entity.selectedEntity,
        isFetchingEntity: state.entity.isFetchingEntity
    };
}

register( 'EntityFramePreview', connect( select )( EntityFramePreview ) );