124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { Menu, MenuDivider } from '@blueprintjs/core';
|
|
import { useHistory, useLocation } from 'react-router-dom';
|
|
|
|
import { Choose } from 'components';
|
|
import Icon from 'components/Icon';
|
|
import MenuItem from 'components/MenuItem';
|
|
import { MenuItemLabel } from 'components';
|
|
import classNames from 'classnames';
|
|
import SidebarOverlay from 'components/SidebarOverlay';
|
|
import { compose } from 'redux';
|
|
import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
|
|
|
|
const DEFAULT_ITEM = {
|
|
text: '',
|
|
href: '',
|
|
};
|
|
|
|
function matchPath(pathname, path, matchExact) {
|
|
return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
|
|
}
|
|
|
|
function SidebarMenuItemSpace({ space }) {
|
|
return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
|
|
}
|
|
|
|
function SidebarMenu({ menu, isSubscriptionActive }) {
|
|
const history = useHistory();
|
|
const location = useLocation();
|
|
|
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
const [currentItem, setCurrentItem] = React.useState(null);
|
|
|
|
const menuItemsMapper = (list) => {
|
|
return list.map((item, index) => {
|
|
const hasChildren = Array.isArray(item.children);
|
|
|
|
const isActive =
|
|
(item.children
|
|
? item.children.some((c) =>
|
|
matchPath(location.pathname, c.href, item.matchExact),
|
|
)
|
|
: item.href &&
|
|
matchPath(location.pathname, item.href, item.matchExact)) ||
|
|
currentItem === item;
|
|
|
|
const handleItemClick = () => {
|
|
if (item.href) {
|
|
history.push(item.href);
|
|
}
|
|
if (item.children && item.children.length > 0) {
|
|
setIsOpen(true);
|
|
setCurrentItem(item);
|
|
} else {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Choose>
|
|
<Choose.When condition={item.spacer}>
|
|
<SidebarMenuItemSpace space={item.spacer} />
|
|
</Choose.When>
|
|
|
|
<Choose.When condition={item.divider}>
|
|
<MenuDivider key={index} title={item.title} />
|
|
</Choose.When>
|
|
|
|
<Choose.When condition={item.label}>
|
|
<MenuItemLabel key={index} text={item.text} />
|
|
</Choose.When>
|
|
|
|
<Choose.Otherwise>
|
|
<MenuItem
|
|
key={index}
|
|
active={isActive}
|
|
icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
|
|
text={item.text}
|
|
disabled={item.disabled}
|
|
dropdownType={item.dropdownType || 'collapse'}
|
|
caretIconSize={16}
|
|
onClick={handleItemClick}
|
|
callapseActive={!!isActive}
|
|
itemClassName={classNames({
|
|
'is-active': isActive,
|
|
'has-icon': !hasChildren && item.icon,
|
|
})}
|
|
hasSubmenu={hasChildren}
|
|
/>
|
|
</Choose.Otherwise>
|
|
</Choose>
|
|
);
|
|
});
|
|
};
|
|
|
|
const filterItems = menu.filter(
|
|
(item) => isSubscriptionActive || item.enableBilling,
|
|
);
|
|
const items = menuItemsMapper(filterItems);
|
|
|
|
const handleSidebarOverlayClose = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Menu className="sidebar-menu">{items}</Menu>{' '}
|
|
<SidebarOverlay
|
|
isOpen={isOpen}
|
|
label={currentItem?.text || ''}
|
|
items={currentItem?.children || []}
|
|
onClose={handleSidebarOverlayClose}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default compose(
|
|
withSubscriptions(
|
|
({ isSubscriptionActive }) => ({ isSubscriptionActive }),
|
|
'main',
|
|
),
|
|
)(SidebarMenu);
|