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 plugInContent;
    let teamSettingsContent;

    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);

      if (currentUser.client.IsAdmin) {
        plugInContent = (
          <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>
        );

        teamSettingsContent = (<div>
          <a key="teamSettings" style={CluedInUserMenuStyle.userMenuListLink}
             href={config.location.gotToAdminAccountRoot()}>
            <MenuItem style={adminStyle}
                      primaryText={<FormattedMessage id="CluedInUserMenu.TeamSettings"></FormattedMessage>}
                      leftIcon={<SettingsAppIcon />}/>
          </a>
          <Divider />
        </div>);
      }

      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 />
        {teamSettingsContent}
        <a key="signOut" style={CluedInUserMenuStyle.userMenuListLink} href={config.location.goToSignOut()}>
          <MenuItem primaryText={<FormattedMessage id="CluedInUserMenu.SignOut"></FormattedMessage>}
                    leftIcon={<ExitToAppIcon />}/>
        </a></div>);
    }

    return (
      <div>
        <ul>
          {plugInContent}
          <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);