diff --git a/src/components/PageHeaderWrapper/Breadcrumb.tsx b/src/components/PageHeaderWrapper/Breadcrumb.tsx deleted file mode 100644 index a099d88180c96893a560d97d9fc0289e1e73b070..0000000000000000000000000000000000000000 --- a/src/components/PageHeaderWrapper/Breadcrumb.tsx +++ /dev/null @@ -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 ? ( - {route.breadcrumbName} - ) : ( - {route.breadcrumbName} - ); -}; - -const renderItemLocal = (item: MenuDataItem): React.ReactNode => { - if (item.locale) { - return ; - } - 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: [], - }; -}; diff --git a/src/components/PageHeaderWrapper/breadcrumb.tsx b/src/components/PageHeaderWrapper/breadcrumb.tsx deleted file mode 100644 index a099d88180c96893a560d97d9fc0289e1e73b070..0000000000000000000000000000000000000000 --- a/src/components/PageHeaderWrapper/breadcrumb.tsx +++ /dev/null @@ -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 ? ( - {route.breadcrumbName} - ) : ( - {route.breadcrumbName} - ); -}; - -const renderItemLocal = (item: MenuDataItem): React.ReactNode => { - if (item.locale) { - return ; - } - 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: [], - }; -}; diff --git a/src/components/PageHeaderWrapper/index.tsx b/src/components/PageHeaderWrapper/index.tsx index 367f052a4e83546215f4473df0449d3de0efbed1..ff0083424ce8e2c997412c8d933e26934c073325 100644 --- a/src/components/PageHeaderWrapper/index.tsx +++ b/src/components/PageHeaderWrapper/index.tsx @@ -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 { let pageTitle = title; const breadcrumb = conversionBreadcrumbList({ ...restProps, - 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 { const { children } = this.mergePropsAndChildren(); return ( - {this.renderPageHeader()} {children ? ( {children}