cluedin-widget/core/components/entityRelated/EntityIcon.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 Tooltip from 'rc-tooltip';
import wms from '../../../wms';
import Radium, { Style } from 'radium';

const EntityIconStyle = {
  wrapper: {
    width: '42px',
    display: 'inline-block',
    marginRight: '10px',
  },
  icon: {
    width: '40px',
    height: '40px',
    borderRadius: '40px',
    border: '1px #ccc solid',
    position: 'relative',
    overflow: 'hidden',
    textAlign: 'center'
  }
};

const styleIcon = {
  i: {
    fontSize: '20px',
    marginTop: 0,
    paddingTop: '9px',
    color: '#646464',
    display: 'block',
    paddingLeft: '1px'
  }
};

class EntityIcon extends Component {
  render() {
    const { entityType } = this.props;
    const entityConfig = wms.getEntityConfiguration(entityType);
    const icon = entityConfig ? entityConfig.icon : '';
    const subject = entityConfig.displayName;
    const destroyTooltip = true;

    return (
      <Tooltip placement="top"
               destroyTooltipOnHide={destroyTooltip}
               overlay={<div>{subject}</div>}>
        <div style="cluedIn_entityIcon" style={EntityIconStyle.wrapper}>
          <div className="cluedIn_EntityIcon_icon" style={EntityIconStyle.icon}>
            <Style
              scopeSelector=".cluedIn_EntityIcon_icon"
              rules={styleIcon}
            />
            <div dangerouslySetInnerHTML={{__html: icon}}></div>
          </div>
        </div>
      </Tooltip>
    );
  }
}

export default Radium(EntityIcon);