@ovine/core
Version:
Build flexible admin system with json.
83 lines (82 loc) • 3.43 kB
JavaScript
import { AsideNav } from 'amis';
import { find } from 'lodash';
import React, { useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { breakpoints, message, storage } from "../../constants";
import { publish } from "../../utils/message";
import { getGlobal, getStore } from "../../utils/store";
const toggleAsideOff = () => {
publish(message.asideLayoutCtrl.msg, {
key: message.asideLayoutCtrl.toggleScreen,
toggle: false,
});
};
export default (props) => {
const { theme, asideMenus } = props;
const location = useLocation();
useEffect(() => {
if (window.innerWidth <= breakpoints.sm) {
toggleAsideOff();
}
}, [location.pathname]);
const isActive = (link) => {
const { path, children, sideVisible = true } = link;
const active = sideVisible && path && path === location.pathname;
// 子菜单 可见时，默认高亮 最近的父菜单
const invisibleItem = find(children, (i) => i.path === location.pathname && i.sideVisible === false && i.highlightParent !== false);
if (!active && invisibleItem) {
return true;
}
return active;
};
return (React.createElement(AsideNav, { theme: theme, renderLink: renderNav, isActive: isActive, navigations: asideMenus }));
};
function renderNav({ link, toggleExpand, classnames: cx }) {
const { children: routeChildren, sideVisible = true, active, icon, label, badge, badgeClassName, path, href, } = link;
const children = [];
const enableRouteTabs = getStore(storage.enableRouteTabs);
const getRoutePath = () => {
const storeQuery = getGlobal(storage.routeQuery) || {};
const query = storeQuery[path];
return query ? `${path}?${query}` : path;
};
const onToggleExpand = (e) => toggleExpand(link, e);
const onLinkClick = () => {
publish(message.routeTabChange);
};
if (sideVisible === false) {
return null;
}
if (routeChildren && routeChildren.some((i) => i.asideVisible !== false)) {
children.push(React.createElement("span", { key: "expand-toggle", className: cx('AsideNav-itemArrow'), onClick: onToggleExpand }));
}
if (badge) {
children.push(React.createElement("b", { key: "badge", className: cx('AsideNav-itemBadge', badgeClassName || 'bg-info') }, badge));
}
if (icon) {
children.push(React.createElement("i", { key: "icon", className: cx('AsideNav-itemIcon', icon) }));
}
if (label) {
children.push(React.createElement("span", { className: cx('AsideNav-itemLabel'), key: "label" }, label));
}
if (!path) {
return (
// eslint-disable-next-line
React.createElement("a", { onClick: routeChildren ? () => toggleExpand(link) : undefined }, children));
}
if (active) {
// eslint-disable-next-line
return React.createElement("a", { onClick: toggleAsideOff },
" ",
children,
" ");
}
if (href) {
const [target, urlHref] = typeof href === 'string' ? ['_blank', href] : href;
return (React.createElement("a", { target: target, href: urlHref }, children));
}
if (enableRouteTabs) {
return (React.createElement(Link, { to: getRoutePath(), onClick: onLinkClick }, children));
}
return React.createElement(Link, { to: path }, children);
}