Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
A
ant-design-pro
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
ant-design-pro
Commits
f5b34755
Commit
f5b34755
authored
Apr 05, 2019
by
陈帅
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix type error
parent
57487480
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
138 additions
and
0 deletions
+138
-0
src/components/PageHeaderWrapper/Breadcrumb.tsx
src/components/PageHeaderWrapper/Breadcrumb.tsx
+138
-0
No files found.
src/components/PageHeaderWrapper/Breadcrumb.tsx
0 → 100644
View file @
f5b34755
import
React
from
'
react
'
;
import
pathToRegexp
from
'
path-to-regexp
'
;
import
Link
from
'
umi/link
'
;
import
{
formatMessage
}
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
):
string
=>
{
if
(
item
.
locale
)
{
return
formatMessage
({
id
:
item
.
locale
,
defaultMessage
:
item
.
name
,
});
}
return
item
.
name
as
string
;
};
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
:
[],
};
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment