diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js index 7eb6de182c519e97501371d88e277e1e73fcd91c..df5148749dad22b35ebb0bd9122429e96ef5e813 100644 --- a/src/components/PageHeader/index.js +++ b/src/components/PageHeader/index.js @@ -7,8 +7,7 @@ import styles from './index.less'; const { TabPane } = Tabs; - -function getBreadcrumb(breadcrumbNameMap, url) { +export function getBreadcrumb(breadcrumbNameMap, url) { let breadcrumb = breadcrumbNameMap[url]; if (!breadcrumb) { Object.keys(breadcrumbNameMap).forEach((item) => { @@ -20,6 +19,14 @@ function getBreadcrumb(breadcrumbNameMap, url) { return breadcrumb || {}; } +// /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id'] +export function urlToList(url) { + const urllist = url.split('/').filter(i => i); + return urllist.map((urlItem, index) => { + return `/${urllist.slice(0, index + 1).join('/')}`; + }); +} + export default class PageHeader extends PureComponent { static contextTypes = { routes: PropTypes.array, @@ -62,11 +69,10 @@ export default class PageHeader extends PureComponent { } conversionFromLocation = (routerLocation, breadcrumbNameMap) => { const { breadcrumbSeparator, linkElement = 'a' } = this.props; - // Convert the path to an array - const pathSnippets = routerLocation.pathname.split('/').filter(i => i); + // Convert the url to an array + const pathSnippets = urlToList(routerLocation.pathname); // Loop data mosaic routing - const extraBreadcrumbItems = pathSnippets.map((_, index) => { - const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; + const extraBreadcrumbItems = pathSnippets.map((url, index) => { const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url); const isLinkable = (index !== pathSnippets.length - 1) && currentBreadcrumb.component; return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? ( diff --git a/src/components/PageHeader/index.test.js b/src/components/PageHeader/index.test.js new file mode 100644 index 0000000000000000000000000000000000000000..385a3d31da4910474fd67b83a2c607b57b8c6dfc --- /dev/null +++ b/src/components/PageHeader/index.test.js @@ -0,0 +1,71 @@ +import { getBreadcrumb, urlToList } from './index'; + +describe('test urlToList', () => { + it('A path', () => { + expect(urlToList('/userinfo')).toEqual(['/userinfo']); + }); + it('Secondary path', () => { + expect(urlToList('/userinfo/2144')).toEqual([ + '/userinfo', + '/userinfo/2144', + ]); + }); + it('Three paths', () => { + expect(urlToList('/userinfo/2144/addr')).toEqual([ + '/userinfo', + '/userinfo/2144', + '/userinfo/2144/addr', + ]); + }); +}); + +const routerData = { + '/dashboard/analysis': { + name: '分析页', + }, + '/userinfo': { + name: '用户列表', + }, + '/userinfo/:id': { + name: '用户信息', + }, + '/userinfo/:id/addr': { + name: '收货订单', + }, +}; +describe('test getBreadcrumb', () => { + it('Simple url', () => { + expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual( + '分析页' + ); + }); + it('Parameters url', () => { + expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual( + '用户信息' + ); + }); + it('The middle parameter url', () => { + expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual( + '收货订单' + ); + }); + it('Loop through the parameters', () => { + const urlNameList = urlToList('/userinfo/2144/addr').map((url) => { + return getBreadcrumb(routerData, url).name; + }); + expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']); + }); + + it('a path', () => { + const urlNameList = urlToList('/userinfo').map((url) => { + return getBreadcrumb(routerData, url).name; + }); + expect(urlNameList).toEqual(['用户列表']); + }); + it('Secondary path', () => { + const urlNameList = urlToList('/userinfo/2144').map((url) => { + return getBreadcrumb(routerData, url).name; + }); + expect(urlNameList).toEqual(['用户列表', '用户信息']); + }); +});