tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

remove file

pull/4293/head
陈帅 7 years ago
parent
aa7e9bd46f
commit
5748748074
3 changed files with 7 additions and 275 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      src/components/PageHeaderWrapper/Breadcrumb.tsx
  2. 135
      src/components/PageHeaderWrapper/breadcrumb.tsx
  3. 12
      src/components/PageHeaderWrapper/index.tsx

135
src/components/PageHeaderWrapper/Breadcrumb.tsx
View File

@ -1,135 +0,0 @@
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: [],
};
};

135
src/components/PageHeaderWrapper/breadcrumb.tsx
View File

@ -1,135 +0,0 @@
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: [],
};
};

12
src/components/PageHeaderWrapper/index.tsx
View File

@ -1,5 +1,5 @@
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>

Write Preview
Loading…
Cancel
Save