From 231e725abd99c91c4304001fbf784f426f85925e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sat, 22 Sep 2018 18:06:08 +0800 Subject: [PATCH] add hiddenBreadcrumb props in PageHeader --- src/components/PageHeader/breadcrumb.js | 176 ++++++++++++++++++++++++ src/components/PageHeader/index.d.ts | 1 + src/components/PageHeader/index.js | 175 +---------------------- src/components/PageHeader/index.md | 1 + 4 files changed, 183 insertions(+), 170 deletions(-) create mode 100644 src/components/PageHeader/breadcrumb.js diff --git a/src/components/PageHeader/breadcrumb.js b/src/components/PageHeader/breadcrumb.js new file mode 100644 index 00000000..28c71b06 --- /dev/null +++ b/src/components/PageHeader/breadcrumb.js @@ -0,0 +1,176 @@ +import React, { PureComponent, createElement } from 'react'; +import pathToRegexp from 'path-to-regexp'; +import { Breadcrumb } from 'antd'; +import styles from './index.less'; +import { urlToList } from '../_utils/pathTools'; + +export const getBreadcrumb = (breadcrumbNameMap, url) => { + let breadcrumb = breadcrumbNameMap[url]; + if (!breadcrumb) { + Object.keys(breadcrumbNameMap).forEach(item => { + if (pathToRegexp(item).test(url)) { + breadcrumb = breadcrumbNameMap[item]; + } + }); + } + return breadcrumb || {}; +}; + +export default class BreadcrumbView extends PureComponent { + state = { + breadcrumb: null, + }; + + componentDidMount() { + this.getBreadcrumbDom(); + } + + componentDidUpdate(preProps) { + const { location } = this.props; + if (!location || !preProps.location) { + return; + } + const prePathname = preProps.location.pathname; + if (prePathname !== location.pathname) { + this.getBreadcrumbDom(); + } + } + + getBreadcrumbDom = () => { + const breadcrumb = this.conversionBreadcrumbList(); + this.setState({ + breadcrumb, + }); + }; + + getBreadcrumbProps = () => { + const { routes, params, location, breadcrumbNameMap } = this.props; + return { + routes, + params, + routerLocation: location, + breadcrumbNameMap, + }; + }; + + // Generated according to props + conversionFromProps = () => { + const { breadcrumbList, breadcrumbSeparator, itemRender, linkElement = 'a' } = this.props; + return ( + + {breadcrumbList.map(item => { + const title = itemRender ? itemRender(item) : item.title; + return ( + + {item.href + ? createElement( + linkElement, + { + [linkElement === 'a' ? 'href' : 'to']: item.href, + }, + title + ) + : title} + + ); + })} + + ); + }; + + conversionFromLocation = (routerLocation, breadcrumbNameMap) => { + const { breadcrumbSeparator, home, itemRender, linkElement = 'a' } = this.props; + // Convert the url to an array + const pathSnippets = urlToList(routerLocation.pathname); + // Loop data mosaic routing + const extraBreadcrumbItems = pathSnippets.map((url, index) => { + const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url); + if (currentBreadcrumb.inherited) { + return null; + } + const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component; + const name = itemRender ? itemRender(currentBreadcrumb) : currentBreadcrumb.name; + return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? ( + + {createElement( + isLinkable ? linkElement : 'span', + { [linkElement === 'a' ? 'href' : 'to']: url }, + name + )} + + ) : null; + }); + // Add home breadcrumbs to your head + extraBreadcrumbItems.unshift( + + {createElement( + linkElement, + { + [linkElement === 'a' ? 'href' : 'to']: '/', + }, + home || 'Home' + )} + + ); + return ( + + {extraBreadcrumbItems} + + ); + }; + + /** + * 将参数转化为面包屑 + * Convert parameters into breadcrumbs + */ + conversionBreadcrumbList = () => { + const { breadcrumbList, breadcrumbSeparator } = this.props; + const { routes, params, routerLocation, breadcrumbNameMap } = this.getBreadcrumbProps(); + if (breadcrumbList && breadcrumbList.length) { + return this.conversionFromProps(); + } + // 如果传入 routes 和 params 属性 + // If pass routes and params attributes + if (routes && params) { + return ( + route.breadcrumbName)} + params={params} + itemRender={this.itemRender} + separator={breadcrumbSeparator} + /> + ); + } + // 根据 location 生成 面包屑 + // Generate breadcrumbs based on location + if (routerLocation && routerLocation.pathname) { + return this.conversionFromLocation(routerLocation, breadcrumbNameMap); + } + return null; + }; + + // 渲染Breadcrumb 子节点 + // Render the Breadcrumb child node + itemRender = (route, params, routes, paths) => { + const { linkElement = 'a' } = this.props; + const last = routes.indexOf(route) === routes.length - 1; + return last || !route.component ? ( + {route.breadcrumbName} + ) : ( + createElement( + linkElement, + { + href: paths.join('/') || '/', + to: paths.join('/') || '/', + }, + route.breadcrumbName + ) + ); + }; + + render() { + const { breadcrumb } = this.state; + return breadcrumb; + } +} diff --git a/src/components/PageHeader/index.d.ts b/src/components/PageHeader/index.d.ts index f4d56c26..c64e592b 100644 --- a/src/components/PageHeader/index.d.ts +++ b/src/components/PageHeader/index.d.ts @@ -17,6 +17,7 @@ export interface IPageHeaderProps { style?: React.CSSProperties; home?: React.ReactNode; wide?: boolean; + hiddenBreadcrumb?:boolean; } export default class PageHeader extends React.Component {} diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js index 764e7b39..5d47b345 100644 --- a/src/components/PageHeader/index.js +++ b/src/components/PageHeader/index.js @@ -1,43 +1,11 @@ -import React, { PureComponent, createElement } from 'react'; -import pathToRegexp from 'path-to-regexp'; -import { Breadcrumb, Tabs, Skeleton } from 'antd'; +import React, { PureComponent } from 'react'; +import { Tabs, Skeleton } from 'antd'; import classNames from 'classnames'; import styles from './index.less'; -import { urlToList } from '../_utils/pathTools'; +import BreadcrumbView from './breadcrumb'; const { TabPane } = Tabs; -export const getBreadcrumb = (breadcrumbNameMap, url) => { - let breadcrumb = breadcrumbNameMap[url]; - if (!breadcrumb) { - Object.keys(breadcrumbNameMap).forEach(item => { - if (pathToRegexp(item).test(url)) { - breadcrumb = breadcrumbNameMap[item]; - } - }); - } - return breadcrumb || {}; -}; - export default class PageHeader extends PureComponent { - state = { - breadcrumb: null, - }; - - componentDidMount() { - this.getBreadcrumbDom(); - } - - componentDidUpdate(preProps) { - const { location } = this.props; - if (!location || !preProps.location) { - return; - } - const prePathname = preProps.location.pathname; - if (prePathname !== location.pathname) { - this.getBreadcrumbDom(); - } - } - onChange = key => { const { onTabChange } = this.props; if (onTabChange) { @@ -45,139 +13,6 @@ export default class PageHeader extends PureComponent { } }; - getBreadcrumbProps = () => { - const { routes, params, location, breadcrumbNameMap } = this.props; - return { - routes, - params, - routerLocation: location, - breadcrumbNameMap, - }; - }; - - getBreadcrumbDom = () => { - const breadcrumb = this.conversionBreadcrumbList(); - this.setState({ - breadcrumb, - }); - }; - - // Generated according to props - conversionFromProps = () => { - const { breadcrumbList, breadcrumbSeparator, itemRender, linkElement = 'a' } = this.props; - return ( - - {breadcrumbList.map(item => { - const title = itemRender ? itemRender(item) : item.title; - return ( - - {item.href - ? createElement( - linkElement, - { - [linkElement === 'a' ? 'href' : 'to']: item.href, - }, - title - ) - : title} - - ); - })} - - ); - }; - - conversionFromLocation = (routerLocation, breadcrumbNameMap) => { - const { breadcrumbSeparator, home, itemRender, linkElement = 'a' } = this.props; - // Convert the url to an array - const pathSnippets = urlToList(routerLocation.pathname); - // Loop data mosaic routing - const extraBreadcrumbItems = pathSnippets.map((url, index) => { - const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url); - if (currentBreadcrumb.inherited) { - return null; - } - const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component; - const name = itemRender ? itemRender(currentBreadcrumb) : currentBreadcrumb.name; - return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? ( - - {createElement( - isLinkable ? linkElement : 'span', - { [linkElement === 'a' ? 'href' : 'to']: url }, - name - )} - - ) : null; - }); - // Add home breadcrumbs to your head - extraBreadcrumbItems.unshift( - - {createElement( - linkElement, - { - [linkElement === 'a' ? 'href' : 'to']: '/', - }, - home || 'Home' - )} - - ); - return ( - - {extraBreadcrumbItems} - - ); - }; - - /** - * 将参数转化为面包屑 - * Convert parameters into breadcrumbs - */ - conversionBreadcrumbList = () => { - const { breadcrumbList, breadcrumbSeparator } = this.props; - const { routes, params, routerLocation, breadcrumbNameMap } = this.getBreadcrumbProps(); - if (breadcrumbList && breadcrumbList.length) { - return this.conversionFromProps(); - } - // 如果传入 routes 和 params 属性 - // If pass routes and params attributes - if (routes && params) { - return ( - route.breadcrumbName)} - params={params} - itemRender={this.itemRender} - separator={breadcrumbSeparator} - /> - ); - } - // 根据 location 生成 面包屑 - // Generate breadcrumbs based on location - if (routerLocation && routerLocation.pathname) { - return this.conversionFromLocation(routerLocation, breadcrumbNameMap); - } - return null; - }; - - // 渲染Breadcrumb 子节点 - // Render the Breadcrumb child node - itemRender = (route, params, routes, paths) => { - const { linkElement = 'a' } = this.props; - const last = routes.indexOf(route) === routes.length - 1; - return last || !route.component ? ( - {route.breadcrumbName} - ) : ( - createElement( - linkElement, - { - href: paths.join('/') || '/', - to: paths.join('/') || '/', - }, - route.breadcrumbName - ) - ); - }; - render() { const { title, @@ -192,8 +27,8 @@ export default class PageHeader extends PureComponent { tabBarExtraContent, loading = false, wide = false, + hiddenBreadcrumb = false, } = this.props; - const { breadcrumb } = this.state; const clsString = classNames(styles.pageHeader, className); const activeKeyProps = {}; @@ -213,7 +48,7 @@ export default class PageHeader extends PureComponent { paragraph={{ rows: 3 }} avatar={{ size: 'large', shape: 'circle' }} > - {breadcrumb} + {hiddenBreadcrumb ? null : }
{logo &&
{logo}
}
diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md index c0de288e..e82c8b89 100644 --- a/src/components/PageHeader/index.md +++ b/src/components/PageHeader/index.md @@ -20,6 +20,7 @@ order: 11 | content | 内容区 | ReactNode | - | | extraContent | 额外内容区，位于content的右侧 | ReactNode | - | | breadcrumbList | 面包屑数据，配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - | +| hiddenBreadcrumb |隐藏面包屑 | boolean | false | | routes | 面包屑相关属性，router 的路由栈信息 | object[] | - | | params | 面包屑相关属性，路由的参数 | object | - | | location | 面包屑相关属性，当前的路由信息 | object | - | -- GitLab