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 Drawer from "material-ui/Drawer";
import { grey900 } from "material-ui/styles/colors";
import CluedInSavedSearch from "../navigations/CluedInSavedSearch.jsx";
import CluedInFollowedEntity from "../navigations/CluedInFollowedEntity.jsx";
import Divider from "material-ui/Divider";
import User from "material-ui/svg-icons/action/assignment-ind";
import Description from "material-ui/svg-icons/action/description";
import { FormattedMessage } from "react-intl";
import { menuIcon } from "../../styles";
const enhanceWithClickOutside = require( 'react-click-outside' );

const leftNavStyle = {
    top: '48px',
    backgroundColor: 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 (
            <Drawer containerStyle={leftNavStyle} open={isMenuOpen}>
                <div style={{paddingBottom: '48px'}}>
                    <CluedInSavedSearch onViewMoreClick={onViewMoreSavedSearchesClick}
                                        onSearchClick={onSearchClick}
                                        searches={searches}
                                        bgColor={grey900}></CluedInSavedSearch>
                    <Divider style={{backgroundColor:'#000'}}/>
                    <CluedInFollowedEntity title={<FormattedMessage id="CluedInMenu.Documents"></FormattedMessage>}
                                           iconTitle={AllEntitiesIcon}
                                           onEntityClick={onEntityClick}
                                           preText="#"
                                           insights={entityInsights}
                                           onViewMoreClick={onViewMoreEntityClick}
                                           noMoreText="No document followed"
                                           bgColor={grey900}></CluedInFollowedEntity>
                    <Divider style={{backgroundColor:'#000'}}/>
                    <CluedInFollowedEntity title={<FormattedMessage id="CluedInMenu.Users"></FormattedMessage>}
                                           iconTitle={AllUsersIcon}
                                           onEntityClick={onEntityClick}
                                           preText="@"
                                           insights={userInsights}
                                           onViewMoreClick={onViewMoreUserClick}
                                           noMoreText="No user followed"
                                           bgColor={grey900}></CluedInFollowedEntity>
                </div>
            </Drawer>
        );
    }
}

export default enhanceWithClickOutside( CluedInMenu );