Skip to content

GitLab

A
ant-design-pro
Commit 57487480 authored by 陈帅's avatar 陈帅
Browse files
Options

remove file

parent aa7e9bd4
Show whitespace changes
Inline Side-by-side
Showing with 7 additions and 275 deletions
src/components/PageHeaderWrapper/Breadcrumb.tsx deleted 100644 → 0
View file @ aa7e9bd4
import React from 'react';
import pathToRegexp from 'path-to-regexp';
import Link from 'umi/link';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { urlToList } from '../_utils/pathTools';
import { PageHeaderWrapperProps } from '.';
import { MenuDataItem } from '../SiderMenu';
import { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
type BreadcrumbProps = PageHeaderWrapperProps;
// 渲染Breadcrumb 子节点
// Render the Breadcrumb child node
const itemRender: AntdBreadcrumbProps['itemRender'] = (route, params, routes, paths) => {
const last = routes.indexOf(route) === routes.length - 1;
return last || !route.component ? (
<span>{route.breadcrumbName}</span>
) : (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
);
};
const renderItemLocal = (item: MenuDataItem): React.ReactNode => {
if (item.locale) {
return <FormattedMessage id={item.locale} defaultMessage={item.name} />;
}
return item.name;
};
export const getBreadcrumb = (
breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
url: string,
): MenuDataItem => {
if (!breadcrumbNameMap) {
return {
path: '',
};
}
let breadcrumb = breadcrumbNameMap[url];
if (!breadcrumb) {
Object.keys(breadcrumbNameMap).forEach(item => {
if (pathToRegexp(item).test(url)) {
breadcrumb = breadcrumbNameMap[item];
}
});
}
return breadcrumb || { path: '' };
};
export const getBreadcrumbProps = (props: BreadcrumbProps): PageHeaderWrapperProps => {
const { location, breadcrumbNameMap } = props;
return {
location,
breadcrumbNameMap,
};
};
// Generated according to props
const conversionFromProps = (props: BreadcrumbProps): AntdBreadcrumbProps['routes'] => {
const { breadcrumbList = [] } = props;
return breadcrumbList
.map(item => {
const { title, href } = item;
return {
path: href,
breadcrumbName: title,
};
})
.filter(item => item.path);
};
const conversionFromLocation = (
routerLocation: PageHeaderWrapperProps['location'],
breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
props: BreadcrumbProps,
): AntdBreadcrumbProps['routes'] => {
if (!routerLocation) {
return [];
}
const { home } = props;
// Convert the url to an array
const pathSnippets = urlToList(routerLocation.pathname);
// Loop data mosaic routing
const extraBreadcrumbItems: AntdBreadcrumbProps['routes'] = pathSnippets
.map(url => {
const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
if (currentBreadcrumb.inherited) {
return { path: '', breadcrumbName: '' };
}
const name = renderItemLocal(currentBreadcrumb);
const { hideInBreadcrumb } = currentBreadcrumb;
return name && !hideInBreadcrumb
? {
path: url,
breadcrumbName: name,
}
: { path: '', breadcrumbName: '' };
})
.filter(item => item && item.path);
// Add home breadcrumbs to your head if defined
if (home) {
extraBreadcrumbItems.unshift({
path: '/',
breadcrumbName: home,
});
}
return extraBreadcrumbItems;
};
/**
* 将参数转化为面包屑
* Convert parameters into breadcrumbs
*/
export const conversionBreadcrumbList = (props: BreadcrumbProps): AntdBreadcrumbProps => {
const { breadcrumbList } = props;
const { location, breadcrumbNameMap } = getBreadcrumbProps(props);
if (breadcrumbList && breadcrumbList.length) {
return {
routes: conversionFromProps(props),
itemRender,
};
}
// 根据 location 生成 面包屑
// Generate breadcrumbs based on location
if (location && location.pathname) {
return {
routes: conversionFromLocation(location, breadcrumbNameMap, props),
itemRender,
};
}
return {
routes: [],
};
};
src/components/PageHeaderWrapper/breadcrumb.tsx deleted 100644 → 0
View file @ aa7e9bd4
import React from 'react';
import pathToRegexp from 'path-to-regexp';
import Link from 'umi/link';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { urlToList } from '../_utils/pathTools';
import { PageHeaderWrapperProps } from '.';
import { MenuDataItem } from '../SiderMenu';
import { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
type BreadcrumbProps = PageHeaderWrapperProps;
// 渲染Breadcrumb 子节点
// Render the Breadcrumb child node
const itemRender: AntdBreadcrumbProps['itemRender'] = (route, params, routes, paths) => {
const last = routes.indexOf(route) === routes.length - 1;
return last || !route.component ? (
<span>{route.breadcrumbName}</span>
) : (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
);
};
const renderItemLocal = (item: MenuDataItem): React.ReactNode => {
if (item.locale) {
return <FormattedMessage id={item.locale} defaultMessage={item.name} />;
}
return item.name;
};
export const getBreadcrumb = (
breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
url: string,
): MenuDataItem => {
if (!breadcrumbNameMap) {
return {
path: '',
};
}
let breadcrumb = breadcrumbNameMap[url];
if (!breadcrumb) {
Object.keys(breadcrumbNameMap).forEach(item => {
if (pathToRegexp(item).test(url)) {
breadcrumb = breadcrumbNameMap[item];
}
});
}
return breadcrumb || { path: '' };
};
export const getBreadcrumbProps = (props: BreadcrumbProps): PageHeaderWrapperProps => {
const { location, breadcrumbNameMap } = props;
return {
location,
breadcrumbNameMap,
};
};
// Generated according to props
const conversionFromProps = (props: BreadcrumbProps): AntdBreadcrumbProps['routes'] => {
const { breadcrumbList = [] } = props;
return breadcrumbList
.map(item => {
const { title, href } = item;
return {
path: href,
breadcrumbName: title,
};
})
.filter(item => item.path);
};
const conversionFromLocation = (
routerLocation: PageHeaderWrapperProps['location'],
breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
props: BreadcrumbProps,
): AntdBreadcrumbProps['routes'] => {
if (!routerLocation) {
return [];
}
const { home } = props;
// Convert the url to an array
const pathSnippets = urlToList(routerLocation.pathname);
// Loop data mosaic routing
const extraBreadcrumbItems: AntdBreadcrumbProps['routes'] = pathSnippets
.map(url => {
const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
if (currentBreadcrumb.inherited) {
return { path: '', breadcrumbName: '' };
}
const name = renderItemLocal(currentBreadcrumb);
const { hideInBreadcrumb } = currentBreadcrumb;
return name && !hideInBreadcrumb
? {
path: url,
breadcrumbName: name,
}
: { path: '', breadcrumbName: '' };
})
.filter(item => item && item.path);
// Add home breadcrumbs to your head if defined
if (home) {
extraBreadcrumbItems.unshift({
path: '/',
breadcrumbName: home,
});
}
return extraBreadcrumbItems;
};
/**
* 将参数转化为面包屑
* Convert parameters into breadcrumbs
*/
export const conversionBreadcrumbList = (props: BreadcrumbProps): AntdBreadcrumbProps => {
const { breadcrumbList } = props;
const { location, breadcrumbNameMap } = getBreadcrumbProps(props);
if (breadcrumbList && breadcrumbList.length) {
return {
routes: conversionFromProps(props),
itemRender,
};
}
// 根据 location 生成 面包屑
// Generate breadcrumbs based on location
if (location && location.pathname) {
return {
routes: conversionFromLocation(location, breadcrumbNameMap, props),
itemRender,
};
}
return {
routes: [],
};
};
src/components/PageHeaderWrapper/index.tsx
View file @ 57487480
import React from 'react';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { formatMessage } from 'umi-plugin-react/locale';
import { PageHeader, Tabs, Typography } from 'antd';
import { connect } from 'dva';
import classNames from 'classnames';
......@@ -46,13 +46,13 @@ export interface PageHeaderWrapperProps {
action?: React.ReactNode | string;
content?: React.ReactNode;
extraContent?: React.ReactNode;
breadcrumbList?: Array<{ title: string | number; href: string }>;
breadcrumbList?: Array<{ title: string; href: string }>;
tabList?: Array<{ key: string; tab: React.ReactNode }>;
tabActiveKey?: string;
onTabChange?: (key: string) => void;
tabBarExtraContent?: React.ReactNode;
style?: React.CSSProperties;
home?: React.ReactNode;
home?: string;
wide?: boolean;
contentWidth?: ContentWidth;
className?: string;
......@@ -84,7 +84,10 @@ class PageHeaderWrapper extends React.Component<PageHeaderWrapperProps> {
let pageTitle = title;
const breadcrumb = conversionBreadcrumbList({
...restProps,
home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
home: formatMessage({
id: 'menu.home',
defaultMessage: 'Home',
}),
});
if (!title && breadcrumb.routes) {
const router = breadcrumb.routes[breadcrumb.routes.length - 1];
......@@ -128,7 +131,6 @@ class PageHeaderWrapper extends React.Component<PageHeaderWrapperProps> {
const { children } = this.mergePropsAndChildren();
return (
<div style={{ margin: '-24px -24px 0' }} className={classNames(classNames, styles.main)}>
{this.renderPageHeader()}
{children ? (
<div className={styles['children-content']}>
<GridContent>{children}</GridContent>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment