feat(Sidebar): Refactoring sidebar menu with feature and permissions abilities control.

This commit is contained in:
a.bouhuolia
2022-04-17 05:05:35 +02:00
parent 682b296f7c
commit 944bc29f4d
25 changed files with 1187 additions and 1031 deletions

View File

@@ -0,0 +1,73 @@
import React from 'react';
import { Menu } from '@blueprintjs/core';
import * as R from 'ramda';
import { MenuItem, MenuItemLabel } from 'components';
import { ISidebarMenuItemType } from 'containers/Dashboard/Sidebar/interfaces';
import { useIsSidebarMenuItemActive } from './hooks';
import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
/**
* Sidebar menu item.
* @returns {JSX.Element}
*/
function SidebarMenuItem({ item, index }) {
// Detarmine whether the item is active.
const isActive = useIsSidebarMenuItemActive(item);
return (
<MenuItem
key={index}
text={item.text}
disabled={item.disabled}
dropdownType={item.dropdownType || 'collapse'}
caretIconSize={16}
onClick={item.onClick}
active={isActive}
hasSubmenu={item.hasChildren}
/>
);
}
SidebarMenuItem.ItemTypes = [
ISidebarMenuItemType.Link,
ISidebarMenuItemType.Overlay,
ISidebarMenuItemType.Dialog,
];
/**
* Detarmines which sidebar menu item type should display.
* @returns {JSX.Element}
*/
function SidebarMenuItemComposer({ item, index }) {
// Link item type.
return SidebarMenuItem.ItemTypes.indexOf(item.type) !== -1 ? (
<SidebarMenuItem item={item} index={index} />
) : // Group item type.
item.type === ISidebarMenuItemType.Group ? (
<MenuItemLabel text={item.text} />
) : null;
}
/**
* Sidebar menu.
* @returns {JSX.Element}
*/
function SidebarMenuJSX({ menu }) {
return (
<div>
<Menu className="sidebar-menu">
{menu.map((item, index) => (
<SidebarMenuItemComposer index={index} item={item} />
))}
</Menu>
</div>
);
}
export const SidebarMenu = R.compose(
withSubscriptions(
({ isSubscriptionActive }) => ({ isSubscriptionActive }),
'main',
),
)(SidebarMenuJSX);