cluedin-widget/core/components/entities/person.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 jobTitleContnet;
    let jobTitle = entity.data.properties['property-user.jobTitle'] || entity.data.properties['property-person.jobTitle'];
    let showFullDescription = true;

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

    if (jobTitleContnet) {
      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}>
            {jobTitleContnet}
            <EntityDescription fullHeight={showFullDescription} entity={entity} q={q}/>
          </div>
        </div>
      </div>
    );
  }
}