cluedin-widget/core/components/entityRelated/EntityDescription.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 ReactEmoji from 'react-emoji';
import Frame from '../generics/Frame.jsx';

const descriptionStyle = {
  color: '#999',
  fontSize: '12px',
  maxWidth: '400px',
  whiteSpace: 'normal',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  maxHeight: '32px',
  display: 'block',
};

export default class EntityDescription extends Component {
  render() {
    const { entity, q, fullHeight, highlight, htmlDescription } = this.props;
    let hasQuery;
    let hasDescription = entity.data.description || false;
    let description = entity.data.description || 'No snippet available';
    let style;

    let highlightContent;

    if (highlight && highlight.name && highlight.Highlights && highlight.Highlights[0]) {
      highlightContent = highlight.name.Highlights[0];
    }

    if (fullHeight) {
      style = Object.assign({}, descriptionStyle, {
        maxHeight: '50px',
      });
    } else {
      style = descriptionStyle;
    }

    try {
      hasQuery = (description.search(new RegExp(q, 'i')) > -1);
    } catch (e) {
      console.log(e);
    }

    if (q && description && hasQuery) {
      description = description.replace(new RegExp(q, 'ig'), `<strong>${q}</strong>`);
    }

    if (!hasDescription) {
      return (
        <div style={style}>
          {description}
        </div>
      )
    } else if (hasDescription && htmlDescription) {
      return (
        <div style={style}>
          <Frame>
            <span dangerouslySetInnerHTML={{__html: ReactEmoji.emojify(description)}}></span>
          </Frame>
        </div>
      );
    } else {
      return (
        <div style={style}>
          <span dangerouslySetInnerHTML={{__html: ReactEmoji.emojify(description)}}></span>
        </div>
      );
    }
  }
}