cluedin-widget/core/components/structure/CluedInMenu.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 LeftNav from 'material-ui/lib/left-nav';
import Colors from 'material-ui/lib/styles/colors';
import CluedInSavedSearch from '../navigations/CluedInSavedSearch.jsx'
import CluedInFollowedEntity from '../navigations/CluedInFollowedEntity.jsx'
import Divider from 'material-ui/lib/divider';
import User from 'material-ui/lib/svg-icons/action/assignment-ind';
import Description from 'material-ui/lib/svg-icons/action/description';
const enhanceWithClickOutside = require( 'react-click-outside' );

import { menuIcon } from '../../styles';

const leftNavStyle = {
    top: '48px',
    backgroundColor: Colors.grey900
};

class CluedInMenu extends Component {
    handleClickOutside( evt ) {
        const { clickOutSide } = this.props;
        clickOutSide( evt );
    }

    render() {
        const {
                  isMenuOpen,
                  searches,
                  userInsights,
                  entityInsights,
                  onEntityClick,
                  onSearchClick,
                  onViewMoreUserClick,
                  onViewMoreEntityClick,
                  onViewMoreSavedSearchesClick
              } = this.props;

        const AllEntitiesIcon = (<Description style={menuIcon}></Description>);
        const AllUsersIcon    = (<User style={menuIcon}></User>);
        return (
            <LeftNav style={leftNavStyle} open={isMenuOpen}>
                <div style={{paddingBottom: '48px'}}>
                    <CluedInSavedSearch onViewMoreClick={onViewMoreSavedSearchesClick}
                                        onSearchClick={onSearchClick}
                                        searches={searches}
                                        bgColor={Colors.grey900}></CluedInSavedSearch>
                    <Divider style={{backgroundColor:'#000'}}/>
                    <CluedInFollowedEntity title="Documents"
                                           iconTitle={AllEntitiesIcon}
                                           onEntityClick={onEntityClick}
                                           preText="#"
                                           insights={entityInsights}
                                           onViewMoreClick={onViewMoreEntityClick}
                                           noMoreText="No document followed"
                                           bgColor={Colors.grey900}></CluedInFollowedEntity>
                    <Divider style={{backgroundColor:'#000'}}/>
                    <CluedInFollowedEntity title="Users"
                                           iconTitle={AllUsersIcon}
                                           onEntityClick={onEntityClick}
                                           preText="@"
                                           insights={userInsights}
                                           onViewMoreClick={onViewMoreUserClick}
                                           noMoreText="No user followed"
                                           bgColor={Colors.grey900}></CluedInFollowedEntity>
                </div>
            </LeftNav>
        );
    }
}

export default enhanceWithClickOutside( CluedInMenu );