-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
93 lines (88 loc) · 2.53 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { memo } from "react"
import { Breadcrumb } from "antd"
import { LooseObject } from "common-screw"
interface Props {
className?: string // class名称
componentProps: { Link: any; IconFont?: any } // 组件
breadProps: LooseObject // 面包屑属性
baseProps: {
isShowIcon: boolean
homeName: string
homeUrl: string
homeIcon: string
} // 基础属性
specialList: {
noJumpList?: LooseObject
jumpList?: LooseObject
noShowList?: string[]
} // 需特殊处理URL信息
pathname: string // 当前URL
pathInfo: LooseObject // URL对应信息(name,icon)
pathShowList: string[] // 可展示的URL
}
/**
* @name 面包屑导航
* @param {Props} 配置项
* @example
* <MidBreadcrumb
className={styles.antdBread}
componentProps={componentProps}
breadProps={breadProps}
baseProps={baseProps}
specialList={specialList}
pathname={pathname}
pathInfo={breadcrumbList}
pathShowList={ablePathList}
/>
*/
export const MidBreadcrumb = memo((props: Props) => {
const {
className,
componentProps: { Link, IconFont },
breadProps,
baseProps: { isShowIcon, homeName, homeUrl, homeIcon },
specialList: { noJumpList = {}, jumpList = {}, noShowList = [] },
pathname,
pathInfo,
pathShowList
} = props
const pathSnippets: string[] = pathname?.split("/").filter((i: string) => i)
const extraBreadcrumbItems = pathSnippets.map((_: string, index: number) => {
if (noJumpList[_]) {
return <Breadcrumb.Item key={index}>{noJumpList[_]}</Breadcrumb.Item>
}
const url = `/${pathSnippets.slice(0, index + 1).join("/")}`
let toUrl = url
if (Object.keys(jumpList).includes(_)) {
toUrl = jumpList[_]
}
if (!pathInfo[url]?.name || noShowList.includes(_)) {
// 无路径名称或 不显示路径
return ""
}
const content = (
<>
{isShowIcon && IconFont && pathInfo[url]?.icon && (
<IconFont type={`icon-${pathInfo[url]?.icon}1`} />
)}
{pathInfo[url]?.name}
</>
)
return (
<Breadcrumb.Item key={url}>
{toUrl ? <Link to={toUrl}>{content}</Link> : content}
</Breadcrumb.Item>
)
})
return (
<Breadcrumb {...breadProps} className={className}>
{pathShowList.includes(homeUrl) && (
<Breadcrumb.Item href={homeUrl}>
{isShowIcon && IconFont && <IconFont type={homeIcon} />}
{homeName}
</Breadcrumb.Item>
)}
{pathShowList.includes(pathname) && extraBreadcrumbItems}
</Breadcrumb>
)
})