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));