cluedin-widget/core/components/navigations/items/CluedInMenuItemText.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 Badge from "../../generics/badge.jsx";
import InsightLinkRouterLink from "../../insights/InsightLinkRouterLink.jsx";
import InsightSearchLinkRouterLink from "../../insights/InsightSearchLinkRouterLink.jsx";

const CluedInMenuItemTextStyles = {
    hashTag: {
        float: 'left',
        marginRight: '2px',
        opacity: '0.65',
        color: '#abc6ca'
    },
    text: {
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        color: '#5ec1c6'
    }
};

class CluedInMenuItemText extends Component {
    render() {
        const { text, count, preText, query, entity } = this.props;

        let badgeComponent;
        let content;

        if( count && count > 0 ) {
            badgeComponent = <Badge style={{float:'right'}} text={count}></Badge>
        }

        if( entity ) {
            content = <InsightLinkRouterLink dark={true} entity={entity}>
                <span style={CluedInMenuItemTextStyles.hashTag}>{preText}</span>
                <span style={CluedInMenuItemTextStyles.text}>{text}</span>
                {badgeComponent}
            </InsightLinkRouterLink>
        } else {
            content = (<InsightSearchLinkRouterLink dark={true} query={query}>
                <span style={CluedInMenuItemTextStyles.hashTag}>{preText}</span>
                <span style={CluedInMenuItemTextStyles.text}>{text}</span>
                {badgeComponent}
            </InsightSearchLinkRouterLink>);
        }

        return <div styleName="menuItem">{content}</div>
    }
}

export default CluedInMenuItemText;