acklen-keystone
Version:
Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose
213 lines (204 loc) • 6.67 kB
JavaScript
import React, { Component } from 'react';
import { connect } from 'react-redux';
import clone from 'clone';
import { Link } from 'react-router';
import { Layout } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import Menu from '../uielements/menu';
import {
toggleOpenDrawer,
changeOpenKeys,
changeCurrent,
toggleCollapsed,
} from '../../redux/app/reducer';
import Logo from '../utility/logo';
import { allowMenuOption, allowSubMenuOption } from '../../../../utils/permissions';
const SubMenu = Menu.SubMenu;
const { Sider } = Layout;
class Sidebar extends Component {
constructor (props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.onOpenChange = this.onOpenChange.bind(this);
}
handleClick (e) {
this.props.changeCurrent(e.key);
if (this.props.app.view === 'MobileView') {
this.props.toggleCollapsed();
this.props.toggleOpenDrawer();
}
}
onOpenChange (newOpenKeys) {
const { app, changeOpenKeys } = this.props;
const latestOpenKey = newOpenKeys.find(
key => !(app.openKeys.indexOf(key) > -1)
);
const latestCloseKey = app.openKeys.find(
key => !(newOpenKeys.indexOf(key) > -1)
);
let nextOpenKeys = [];
if (latestOpenKey) {
nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
}
if (latestCloseKey) {
nextOpenKeys = this.getAncestorKeys(latestCloseKey);
}
changeOpenKeys(nextOpenKeys);
}
getAncestorKeys (key) {
const map = {
sub3: ['sub2'],
};
return map[key] || [];
}
getMenuIcon (key) {
const icons = [
{ key: 'home', value: 'ion-ios-home-outline' },
{ key: 'sitemapBlackList', value: 'ion-ios-paper' },
{ key: 'myAGA', value: 'ion-ios-contact-outline' },
{ key: 'SEO', value: 'ion-android-cloud-done' },
{ key: 'content', value: 'ion-ios-albums-outline' },
{ key: 'guidelines', value: 'ion-ios-bookmarks-outline' },
{ key: 'blog', value: 'ion-ios-compose-outline' },
{ key: 'patientInfoCenter', value: 'ion-ios-medkit-outline' },
{ key: 'education', value: 'ion-ios-book-outline' },
{ key: 'categories', value: 'ion-ios-browsers-outline' },
{ key: 'bannerBroadcast', value: 'ion-image' },
{ key: 'pageBuilder', value: 'ion-ios-list-outline' },
{ key: 'form', value: 'ion-ios-list-outline' },
{ key: 'others', value: 'ion-ios-paper-outline' },
{ key: 'menus', value: 'ion-android-options' },
{ key: 'modules', value: 'ion-paintbucket' },
{ key: 'globalFooter', value: 'ion-android-globe' },
{ key: 'agaFamilyWebsite', value: 'ion-social-buffer-outline' },
{ key: 'users', value: 'ion-person-stalker' },
{ key: 'researchAwards', value: 'ion-trophy' },
{ key: 'AdvocacyAndPolicy', value: 'ion-clipboard' },
{ key: 'mediaPress', value: 'ion-disc' },
{ key: 'newsFeed', value: 'ion-ios-list' },
{ key: 'Fellows', value: 'ion-ios-people-outline' },
{ key: 'sections', value: 'ion-ios-photos-outline' },
{ key: 'notifications', value: 'ion-speakerphone' },
{ key: 'pageRedirects', value: 'ion-arrow-swap' },
];
const optionFound = icons.find((item) => item.key === key);
if (optionFound) {
return optionFound.value;
}
return 'ion-ios-circle-outline';
}
render () {
const url = '/keystone';
const { app, toggleOpenDrawer, customizedTheme } = this.props;
const collapsed = clone(app.collapsed) && !clone(app.openDrawer);
const { openDrawer } = app;
const mode = collapsed === true ? 'vertical' : 'inline';
const onMouseEnter = event => {
if (openDrawer === false) {
toggleOpenDrawer();
}
return;
};
const onMouseLeave = () => {
if (openDrawer === true) {
toggleOpenDrawer();
}
return;
};
const scrollheight = app.height;
const styling = {
backgroundColor: customizedTheme.backgroundColor,
};
const submenuStyle = {
backgroundColor: 'rgba(0,0,0,0.3)',
color: customizedTheme.textColor,
};
const submenuColor = {
color: customizedTheme.textColor,
overflow: 'hidden',
textOverflow: 'ellipsis',
};
const { sections } = this.props;
const pathname = window.location.pathname;
const pathArr = pathname.split('/');
const selectedKey = pathArr.length > 2 ? `/${pathArr[1]}/${pathArr[2]}` : pathname;
const userIsAdministrator = Keystone.user.isAdministrator;
const userIsEditor = Keystone.user.isEditor;
return (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
width="240"
className="isomorphicSidebar"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
style={styling}
>
<Logo collapsed={collapsed} />
<Scrollbars style={{ height: scrollheight - 70 }}>
<Menu
onClick={this.handleClick}
theme="dark"
mode={mode}
openKeys={app.openKeys}
selectedKeys={[selectedKey]}
onOpenChange={this.onOpenChange}
className="isoDashboardMenu"
>
{
sections && sections.map((section, index) =>
section.lists.length === 1
? !allowMenuOption(sections[index],
userIsAdministrator, userIsEditor) ? null : (
<Menu.Item key={`${url}/${sections[index].lists[0].path}`}>
<Link to={`${url}/${sections[index].lists[0].path}`}>
<span className="isoMenuHolder" style={submenuColor}>
<i className={this.getMenuIcon(sections[index].key)} />
<span className="nav-text">
<span>{sections[index].label}</span>
</span>
</span>
</Link>
</Menu.Item>
) : (
!allowMenuOption(sections[index],
userIsAdministrator, userIsEditor) ? null : (
<SubMenu
key={`${url}/${sections[index].lists[0].path}`}
title={
<span className="isoMenuHolder" style={submenuColor}>
<i className={this.getMenuIcon(sections[index].key)} />
<span className="nav-text">
<span>{sections[index].label}</span>
</span>
</span>
}
>
{
section.lists.map((item) =>
!allowSubMenuOption(item,
userIsAdministrator, userIsEditor) ? null : (
<Menu.Item style={submenuStyle} key={`${url}/${item.path}`}>
<Link style={submenuColor} to={`${url}/${item.path}`}>
<span>{item.label}</span>
</Link>
</Menu.Item>)
)}
</SubMenu>)
)
)
}
</Menu>
</Scrollbars>
</Sider>
);
}
}
export default connect(
state => ({
app: state.App.toJS(),
customizedTheme: state.ThemeSwitcher.toJS().sidebarTheme,
}),
{ toggleOpenDrawer, changeOpenKeys, changeCurrent, toggleCollapsed }
)(Sidebar);