cluedin-widget/core/components/navigations/CluedInUserMenu.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 Radium from "radium";
import { Link } from "react-router";
import IconMenu from "material-ui/IconMenu";
import MenuItem from "material-ui/MenuItem";
import IconButton from "material-ui/IconButton";
import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";
import Divider from "material-ui/Divider";
import PersonIcon from "material-ui/svg-icons/social/person";
import SettingsIcon from "material-ui/svg-icons/action/settings";
import ExitToAppIcon from "material-ui/svg-icons/action/exit-to-app";
import SettingsAppIcon from "material-ui/svg-icons/action/settings-applications";
import { pink600 } from "material-ui/styles/colors";
import ProviderLoadingNotification from "../providerRelated/ProviderLoadingNotification.jsx";
import FontIcon from "material-ui/FontIcon";
import config from "../../config";
import RefreshIndicator from "material-ui/RefreshIndicator";
import { FormattedMessage } from "react-intl";

const CluedInUserMenuStyle = {
    refreshWrapper: {
        textAlign: 'center',
        marginTop: '10px',
        marginBottom: '10px',
        minWidth: '200px'
    },
    refresh: {
        display: 'inline-block',
        position: 'relative'
    },
    userMenuList: {
        float: 'left',
        position: 'relative'
    },
    userMenuListLink: {
        color: '#fff',
        position: 'relative',
        display: 'block',
        textDecoration: 'none'
    },
    mainLinkHover: {
        ':hover': {
            backgroundColor: '#08c6cf'
        }
    }

};

class CluedInUserMenu extends Component {
    openIntegrationReport() {
        var eventOpenIntegration = new Event( 'OpenIntegrationPanel' );

        window.dispatchEvent( eventOpenIntegration );
    }

    needOne() {

    }

    render() {
        const { currentUser } = this.props;

        let white      = "#fff";
        let adminStyle = { color: pink600 };
        let fontStyle  = { fontSize: '14px' };

        let menuContent = <div style={CluedInUserMenuStyle.refreshWrapper}>
            <RefreshIndicator style={CluedInUserMenuStyle.refresh} top={0} left={0} status="loading"></RefreshIndicator>
        </div>;

        if( currentUser && currentUser.entity ) {
            let personUrl = config.location.goToEntity( currentUser.entity );

            menuContent = (<div>
                <Link key="profile" style={CluedInUserMenuStyle.userMenuListLink} to={personUrl}>
                    <MenuItem primaryText={<FormattedMessage id="CluedInUserMenu.Profile"></FormattedMessage>}
                              leftIcon={<PersonIcon />}/>
                </Link>
                <a key="setting" style={CluedInUserMenuStyle.userMenuListLink}
                   href={config.location.gotToAdminUserRoot()}>
                    <MenuItem primaryText={<FormattedMessage id="CluedInUserMenu.Settings"></FormattedMessage>}
                              leftIcon={<SettingsIcon />}/>
                </a>
                <Divider />
                <a key="teamSettings" style={CluedInUserMenuStyle.userMenuListLink}
                   href={config.location.gotToAdminAccountRoot()}>
                    <MenuItem style={adminStyle}
                              primaryText={<FormattedMessage id="CluedInUserMenu.TeamSettings"></FormattedMessage>}
                              leftIcon={<SettingsAppIcon />}/>
                </a>
                <Divider />
                <a key="signOut" style={CluedInUserMenuStyle.userMenuListLink} href={config.location.goToSignOut()}>
                    <MenuItem primaryText={<FormattedMessage id="CluedInUserMenu.SignOut"></FormattedMessage>}
                              leftIcon={<ExitToAppIcon />}/>
                </a></div>);
        }

        return (
            <div>
                <ul>
                    <li key="integration"
                        style={[CluedInUserMenuStyle.userMenuList, CluedInUserMenuStyle.mainLinkHover]}>
                        <IconButton iconStyle={fontStyle} onClick={this.openIntegrationReport.bind(this)}>
                            <ProviderLoadingNotification></ProviderLoadingNotification>
                            <FontIcon
                                className="fa fa-plug"
                                color={white}
                            />
                        </IconButton>
                    </li>
                    <li key="dropdown" style={[CluedInUserMenuStyle.userMenuList, CluedInUserMenuStyle.mainLinkHover]}>
                        <IconMenu
                            className="CluedInUserMenu-IconMenu"
                            iconButtonElement={<IconButton ><MoreVertIcon color={white} /></IconButton>}
                            anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
                            targetOrigin={{horizontal: 'right', vertical: 'top'}}
                        >
                            {menuContent}
                        </IconMenu>
                    </li>
                </ul>
            </div>
        );
    }
}

export default Radium( CluedInUserMenu );