cluedin-widget/core/components/entityRelated/EntityLink.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 config from '../../config';
import { Link } from 'react-router';
import ReactEmoji from 'react-emoji';
import Theme from '../../theme';

const EntityLinkStyle = {
  color: Theme.colors.main,
  fontSize: '15px',
};

export default class EntityLink extends Component {
  render() {
    const { entity, openInNewTab, q, isNewInformation }  = this.props;
    const linkUrl = config.location.goToEntity(entity);
    let name = entity.name;
    let hasQuery = false;

    try {
      let index = name.search(new RegExp(q, 'i'));
      hasQuery = (index > -1) ? true : false;
    } catch (e) {

    }

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

    let nameContent = <span dangerouslySetInnerHTML={{__html: ReactEmoji.emojify(name)}}></span>;

    let linkContent = (<Link style={EntityLinkStyle} to={linkUrl}>{nameContent}</Link>);

    if (openInNewTab) {
      linkContent = (<Link style={EntityLinkStyle} target="_blank" to={linkUrl}>{nameContent}</Link>);
    }

    if (isNewInformation) {
      return (
        <div>
          {linkContent}
          <div style={{
              background: '#9E9E9E',
              color: 'rgb(255, 255, 255)',
              padding: '0px 5px',
              display: 'inline-block',
              marginLeft: '5px',
              borderRadius: '20px',
              fontSize: '11px',
              fontWeight: 'bold',}}
          >
            new
          </div>
        </div>
      );
    } else {
      return (
        <div>
          {linkContent}
        </div>
      );
    }
  }
};