cluedin-widget/core/components/entityRelated/EntityIconOrPreview.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 EntityIcon from './EntityIcon.jsx';
import { getFileTypeUrlFromEntity } from '../../helpers/fileType';
import EntityLogo from './EntityLogo.jsx';
import wms from '../../../wms';
import Tooltip from 'rc-tooltip';

const fileTyepStyle = {
  borderRadius: '40px',
  width: '40px',
  height: '40px',
  border: '1px solid #ccc',
  textAlign: 'center',
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
};

export default class EntityIconOrPreview extends Component {
  render() {
    const { entity } = this.props;

    const entityConfig = wms.getEntityConfiguration(entity.data.entityType);
    let subject = entityConfig.displayName;

    let entityIcon = <EntityIcon entityType={entity.data.entityType}></EntityIcon>;
    let typeURL = getFileTypeUrlFromEntity(entity);


    if (typeURL) {
      const style = Object.assign({}, fileTyepStyle, {
        backgroundImage: `url(${typeURL})`,
      });

      entityIcon = (<div style={style}></div>);
    }

    if (entity.hasPreview || entity.hasLogo) {
      subject = (<img src={entity.logoUrl || entity.previewUrl}/>);
    }

    if (entity.hasPreview || entity.hasLogo) {
      entityIcon = (<EntityLogo url={entity.logoUrl || entity.previewUrl}></EntityLogo>);
    }

    return (
      <Tooltip placement="top"
               destroyTooltipOnHide={true}
               overlay={<div>{subject}</div>}
      >
        <div>
          {entityIcon}
        </div>
      </Tooltip>
    );
  }
}