Skip to content
Permalink
4420ae2c22
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
131 lines (121 sloc) 3.21 KB
/**
* Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
* You can view component api by:
* https://github.com/ant-design/ant-design-pro-layout
*/
import { ConnectProps, ConnectState } from '@/models/connect';
import ProLayout, {
MenuDataItem,
BasicLayoutProps as ProLayoutProps,
Settings,
} from '@ant-design/pro-layout';
import React, { useState } from 'react';
import Authorized from '@/utils/Authorized';
import Link from 'umi/link';
import RightContent from '@/components/GlobalHeader/RightContent';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import { isAntDesignPro } from '@/utils/utils';
import logo from '../assets/logo.svg';
export interface BasicLayoutProps extends ProLayoutProps, Omit<ConnectProps, 'location'> {
breadcrumbNameMap: {
[path: string]: MenuDataItem;
};
settings: Settings;
}
export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
breadcrumbNameMap: {
[path: string]: MenuDataItem;
};
};
/**
* use Authorized check all menu item
*/
const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
menuList.map(item => {
const localItem = {
...item,
children: item.children ? menuDataRender(item.children) : [],
};
return Authorized.check(item.authority, localItem, null) as MenuDataItem;
});
const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
if (!isAntDesignPro()) {
return defaultDom;
}
return (
<>
{defaultDom}
<div
style={{
padding: '0px 24px 24px',
textAlign: 'center',
}}
>
<a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
<img
src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
width="82px"
alt="netlify logo"
/>
</a>
</div>
</>
);
};
const BasicLayout: React.FC<BasicLayoutProps> = props => {
const { dispatch, children, settings } = props;
/**
* constructor
*/
useState(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
dispatch({
type: 'settings/getSetting',
});
}
});
/**
* init variables
*/
const handleMenuCollapse = (payload: boolean): void =>
dispatch &&
dispatch({
type: 'global/changeLayoutCollapsed',
payload,
});
return (
<ProLayout
logo={logo}
onCollapse={handleMenuCollapse}
menuItemRender={(menuItemProps, defaultDom) => (
<Link to={menuItemProps.path}>{defaultDom}</Link>
)}
breadcrumbRender={(routers = []) => [
{
path: '/',
breadcrumbName: formatMessage({
id: 'menu.home',
defaultMessage: 'Home',
}),
},
...routers,
]}
footerRender={footerRender}
menuDataRender={menuDataRender}
formatMessage={formatMessage}
rightContentRender={rightProps => <RightContent {...rightProps} />}
{...props}
{...settings}
>
{children}
</ProLayout>
);
};
export default connect(({ global, settings }: ConnectState) => ({
collapsed: global.collapsed,
settings,
}))(BasicLayout);