cluedin-widget/core/components/entities/document.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 EntityLink from '../entityRelated/EntityLink.jsx';
import EntityDescription from '../entityRelated/EntityDescription.jsx';
import EntityIconOrPreview from '../entityRelated/EntityIconOrPreview.jsx';
import EntityFoundIn from '../entityRelated/EntityFoundIn.jsx';
import EntityLastCreatedBy from '../entityRelated/EntityLastCreatedBy.jsx';
import EntityLastChangedBy from '../entityRelated/EntityLastChangedBy.jsx';

const extraInformationWithSnippet = {
  display: 'inline-block',
  width: '400px',
  marginTop: '2px',
};

const extraContent = {
  display: 'inline-block',
  flex: 2,
};

export default class EntityDefault extends Component {
  render() {
    const { entity, openInNewTab, q } = this.props;
    let foundIn = (<EntityFoundIn entity={entity} />);
    let createdBy = (<EntityLastCreatedBy entity={entity} />);
    let changedBy = (<EntityLastChangedBy entity={entity} />);
    let fullPathLocationContent;
    let showFullDescription = true;

    if (entity.data.documentFileName) {
      fullPathLocationContent = (<span
        style={{
                  maxWidth: '400px',
                  minWidth: '400px',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  display: 'inline-block',}}
      >
                {entity.data.documentFileName}
              </span>);
    }

    if(fullPathLocationContent) {
      showFullDescription = false;
    }

    return (
      <div className="cluedIn_entity_row">
        <div style={{ display: 'flex' }}>
          <div style={{ display: 'inline-block'}}>
            <EntityIconOrPreview entity={entity} />
          </div>
          <div style={extraContent}>
            <EntityLink q={q} openInNewTab={openInNewTab} entity={entity} />
            {changedBy}
            {createdBy}
            {foundIn}
          </div>
          <div style={extraInformationWithSnippet}>
            <EntityDescription fullHeight={showFullDescription} entity={entity} q={q} />
          </div>
        </div>
      </div>
    );
  }
}