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'
    },
    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 );