cluedin-widget/core/components/insights/InsightList.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 "../entityRelated/EntityIcon.jsx";
import InsightLink from "./internal/InsightLink.jsx";
import Radium from "radium";

const InsightListStyles = {
    list: {
        margin: 0,
        padding: 0
    },
    listItem: {
        listStyle: 'none',
        position: 'relative',
        padding: 0,
        borderBottom: '1px solid #dee5e7',
        minHeight: '50px',
        display: 'flex',
        ':hover': {
            backgroundColor: '#f2f2f2'
        }
    },
    link: {
        textDecoration: 'none',
        cursor: 'pointer',
        fontSize: '18px',
        lineHeight: '50px',
        paddingLeft: '15px'
    },
    iconWrapper: {
        paddingTop: '5px',
        marginRight: '10px',
        marginLeft: '10px'
    }
};

class InsightList extends Component {

    render() {
        const { insights, onInsightClick } = this.props;
        let insightContent;

        insightContent = insights.map( ( insight, index ) => {
            return <li style={InsightListStyles.listItem} onClick={onInsightClick} key={index}>
                <div style={InsightListStyles.iconWrapper}>
                    <EntityIcon entityType={insight.Entity.EntityType}></EntityIcon>
                </div>
                <div style={InsightListStyles.link}>
                    <InsightLink insight={insight}></InsightLink>
                </div>
            </li>
        } );

        return (<div>
            <ul style={InsightListStyles.list}>
                {insightContent}
            </ul>
        </div>);
    }
}

export default Radium( InsightList );