Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 4x 4x 4x 4x 3x 3x 3x 11x 3x 5x 3x 4x 5x 5x 11x 1x 10x 3x 7x 2x 2x 2x 5x 40x 5x 5x 11x 11x 5x 3x | import React, { ReactElement, useState } from 'react';
import { Menu } from 'antd';
import { Link, } from 'react-router-dom';
import { FileAddOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { DynamicIcon } from "../components";
import { openInCurrentTab, openInNewTab } from '@utils/BrowserUtils';
import { DynamicMenuProps, formRouterConfig, RouterConfig } from '@kernel/RoutersConfig';
const { SubMenu } = Menu;
const { Item: MenuItem } = Menu;
const AppNav = (props: {
menus: Array<DynamicMenuProps>;
mode: 'horizontal' | 'vertical' | 'inline' | undefined;
inlineCollapsed: boolean;
}): ReactElement => {
const { menus, mode, inlineCollapsed } = props;
const { t } = useTranslation();
const [current, setCurrent] = useState<string>("main");
const getIcon = (menu: DynamicMenuProps): ReactElement => {
return menu.icon ? <DynamicIcon type={menu.icon} /> : <FileAddOutlined />;
};
const getMenuItem = (menu: DynamicMenuProps, linkDestination: string, level: number): ReactElement => {
return (
<MenuItem
className="hover-style"
key={`${menu?.id}_${menu?.type.toLowerCase()}`}
icon={level >= 2 ? undefined :
<span className={`menu-icon-level-${level}`}>{getIcon(menu)}</span>}
title={t(`menu:${menu.label}`)}
>
<Link to={linkDestination}>{t(`menu:${menu.label}`)}</Link>
</MenuItem>
);
};
const renderLink = (menu: DynamicMenuProps, target: string, level: number): ReactElement => {
return (
<MenuItem
className="hover-style"
key={`${menu.id}_${menu?.type.toLowerCase()}`}
onClick={() => {
if (menu.link != null) {
if (target === '_blank') {
openInNewTab(menu.link);
} else {
openInCurrentTab(menu.link);
}
}
}}
icon={level >= 2 ? undefined :
<span className={`menu-icon-level-${level}`}>{getIcon(menu)}</span>}
>
{t(`menu:${menu.label}`)}
</MenuItem>
);
};
function renderMenuItems(menus: Array<DynamicMenuProps>, level: number): ReactElement[] {
const result: ReactElement[] = [];
menus.forEach(menu => {
let subMenu: ReactElement | null;
if (menu.type === "EXTERNAL_LINK") {
subMenu = renderLink(menu, '_blank', level);
} else if (menu.type === "INTERNAL_LINK") {
subMenu = renderLink(menu, '_self', level);
} else if (menu.type === "MENU_GROUP") {
const { children, label } = menu;
const childrenMenus = renderMenuItems(children ?? [], level + 1);
subMenu = (
<SubMenu
key={`${menu.id}_menu_group`}
title={t(`menu:${label}`)}
icon={<span className={`menu-icon-level-${level}`}>{getIcon(menu)}</span>}
>
{childrenMenus}
</SubMenu>);
} else {
const formType = menu.form?.type;
const configs: RouterConfig[] = formRouterConfig.filter(config => config?.formType === formType);
const dest = (configs?.length <= 0 || menu.form == null) ? "" :
(configs[0])?.getMenuLink?.(menu.form) ?? "";
subMenu = getMenuItem(menu, dest, level);
}
Eif (subMenu != null) {
result.push(subMenu);
}
});
return result;
}
return (
<div className="app-nav-container">
<Menu
triggerSubMenuAction="hover"
onClick={(e) => {
setCurrent(e.key.toString());
}}
defaultSelectedKeys={['main']}
selectedKeys={[current]}
mode={mode}
inlineCollapsed={inlineCollapsed}
>
{renderMenuItems(menus, 0)}
</Menu>
</div>
);
};
export default AppNav;
|