Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
ant-design-pro
提交
a5b5f9c8
A
ant-design-pro
项目概览
知鸟1号
/
ant-design-pro
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design-pro
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a5b5f9c8
编写于
7月 16, 2018
作者:
杨
杨伟荣
提交者:
陈帅
7月 26, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修复侧边栏菜单不能动态显示的问题
上级
76d8fcbf
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
254 addition
and
0 deletion
+254
-0
src/components/SiderMenu/SiderMenu.js
src/components/SiderMenu/SiderMenu.js
+254
-0
未找到文件。
src/components/SiderMenu/SiderMenu.js
0 → 100644
浏览文件 @
a5b5f9c8
import
React
,
{
PureComponent
}
from
'
react
'
;
import
{
Layout
,
Menu
,
Icon
}
from
'
antd
'
;
import
pathToRegexp
from
'
path-to-regexp
'
;
import
{
Link
}
from
'
dva/router
'
;
import
styles
from
'
./index.less
'
;
import
{
urlToList
}
from
'
../_utils/pathTools
'
;
const
{
Sider
}
=
Layout
;
const
{
SubMenu
}
=
Menu
;
// Allow menu.js config icon as string or ReactNode
// icon: 'setting',
// icon: 'http://demo.com/icon.png',
// icon: <Icon type="setting" />,
const
getIcon
=
icon
=>
{
if
(
typeof
icon
===
'
string
'
&&
icon
.
indexOf
(
'
http
'
)
===
0
)
{
return
<
img
src
=
{
icon
}
alt
=
"
icon
"
className
=
{
`
${
styles
.
icon
}
sider-menu-item-img`
}
/>
;
}
if
(
typeof
icon
===
'
string
'
)
{
return
<
Icon
type
=
{
icon
}
/>
;
}
return
icon
;
};
/**
* Recursively flatten the data
* [{path:string},{path:string}] => {path,path2}
* @param menu
*/
export
const
getFlatMenuKeys
=
menu
=>
menu
.
reduce
((
keys
,
item
)
=>
{
keys
.
push
(
item
.
path
);
if
(
item
.
children
)
{
return
keys
.
concat
(
getFlatMenuKeys
(
item
.
children
));
}
return
keys
;
},
[]);
/**
* Find all matched menu keys based on paths
* @param flatMenuKeys: [/abc, /abc/:id, /abc/:id/info]
* @param paths: [/abc, /abc/11, /abc/11/info]
*/
export
const
getMenuMatchKeys
=
(
flatMenuKeys
,
paths
)
=>
paths
.
reduce
(
(
matchKeys
,
path
)
=>
matchKeys
.
concat
(
flatMenuKeys
.
filter
(
item
=>
pathToRegexp
(
item
).
test
(
path
))),
[]
);
export
default
class
SiderMenu
extends
PureComponent
{
constructor
(
props
)
{
super
(
props
);
this
.
flatMenuKeys
=
getFlatMenuKeys
(
props
.
menuData
);
this
.
state
=
{
openKeys
:
this
.
getDefaultCollapsedSubMenus
(
props
),
};
}
componentWillReceiveProps
(
nextProps
)
{
const
{
location
}
=
this
.
props
;
if
(
nextProps
.
location
.
pathname
!==
location
.
pathname
)
{
this
.
setState
({
openKeys
:
this
.
getDefaultCollapsedSubMenus
(
nextProps
),
});
}
}
/**
* Convert pathname to openKeys
* /list/search/articles = > ['list','/list/search']
* @param props
*/
getDefaultCollapsedSubMenus
(
props
)
{
const
{
location
:
{
pathname
},
}
=
props
||
this
.
props
;
return
getMenuMatchKeys
(
this
.
flatMenuKeys
,
urlToList
(
pathname
));
}
/**
* 判断是否是http链接.返回 Link 或 a
* Judge whether it is http link.return a or Link
* @memberof SiderMenu
*/
getMenuItemPath
=
item
=>
{
const
itemPath
=
this
.
conversionPath
(
item
.
path
);
const
icon
=
getIcon
(
item
.
icon
);
const
{
target
,
name
}
=
item
;
// Is it a http link
if
(
/^https
?
:
\/\/
/
.
test
(
itemPath
))
{
return
(
<
a
href
=
{
itemPath
}
target
=
{
target
}
>
{
icon
}
<
span
>
{
name
}
<
/span
>
<
/a
>
);
}
const
{
location
,
isMobile
,
onCollapse
}
=
this
.
props
;
return
(
<
Link
to
=
{
itemPath
}
target
=
{
target
}
replace
=
{
itemPath
===
location
.
pathname
}
onClick
=
{
isMobile
?
()
=>
{
onCollapse
(
true
);
}
:
undefined
}
>
{
icon
}
<
span
>
{
name
}
<
/span
>
<
/Link
>
);
};
/**
* get SubMenu or Item
*/
getSubMenuOrItem
=
item
=>
{
if
(
item
.
children
&&
item
.
children
.
some
(
child
=>
child
.
name
))
{
const
childrenItems
=
this
.
getNavMenuItems
(
item
.
children
);
// 当无子菜单时就不展示菜单
if
(
childrenItems
&&
childrenItems
.
length
>
0
)
{
return
(
<
SubMenu
title
=
{
item
.
icon
?
(
<
span
>
{
getIcon
(
item
.
icon
)}
<
span
>
{
item
.
name
}
<
/span
>
<
/span
>
)
:
(
item
.
name
)
}
key
=
{
item
.
path
}
>
{
childrenItems
}
<
/SubMenu
>
);
}
return
null
;
}
else
{
return
<
Menu
.
Item
key
=
{
item
.
path
}
>
{
this
.
getMenuItemPath
(
item
)}
<
/Menu.Item>
;
}
};
/**
* 获得菜单子节点
* @memberof SiderMenu
*/
getNavMenuItems
=
menusData
=>
{
if
(
!
menusData
)
{
return
[];
}
return
menusData
.
filter
(
item
=>
item
.
name
&&
!
item
.
hideInMenu
)
.
map
(
item
=>
{
// make dom
const
ItemDom
=
this
.
getSubMenuOrItem
(
item
);
return
this
.
checkPermissionItem
(
item
.
authority
,
ItemDom
);
})
.
filter
(
item
=>
item
);
};
// Get the currently selected menu
getSelectedMenuKeys
=
()
=>
{
const
{
location
:
{
pathname
},
}
=
this
.
props
;
return
getMenuMatchKeys
(
this
.
flatMenuKeys
,
urlToList
(
pathname
));
};
// conversion Path
// 转化路径
conversionPath
=
path
=>
{
if
(
path
&&
path
.
indexOf
(
'
http
'
)
===
0
)
{
return
path
;
}
else
{
return
`/
${
path
||
''
}
`
.
replace
(
/
\/
+/g
,
'
/
'
);
}
};
// permission to check
checkPermissionItem
=
(
authority
,
ItemDom
)
=>
{
const
{
Authorized
}
=
this
.
props
;
if
(
Authorized
&&
Authorized
.
check
)
{
const
{
check
}
=
Authorized
;
return
check
(
authority
,
ItemDom
);
}
return
ItemDom
;
};
isMainMenu
=
key
=>
{
return
this
.
props
.
menuData
.
some
(
item
=>
key
&&
(
item
.
key
===
key
||
item
.
path
===
key
));
};
handleOpenChange
=
openKeys
=>
{
const
lastOpenKey
=
openKeys
[
openKeys
.
length
-
1
];
const
moreThanOne
=
openKeys
.
filter
(
openKey
=>
this
.
isMainMenu
(
openKey
)).
length
>
1
;
this
.
setState
({
openKeys
:
moreThanOne
?
[
lastOpenKey
]
:
[...
openKeys
],
});
};
render
()
{
const
{
logo
,
collapsed
,
onCollapse
}
=
this
.
props
;
const
{
openKeys
}
=
this
.
state
;
// Don't show popup menu when it is been collapsed
const
menuProps
=
collapsed
?
{}
:
{
openKeys
,
};
// if pathname can't match, use the nearest parent's key
let
selectedKeys
=
this
.
getSelectedMenuKeys
();
if
(
!
selectedKeys
.
length
)
{
selectedKeys
=
[
openKeys
[
openKeys
.
length
-
1
]];
}
return
(
<
Sider
trigger
=
{
null
}
collapsible
collapsed
=
{
collapsed
}
breakpoint
=
"
lg
"
onCollapse
=
{
onCollapse
}
width
=
{
256
}
className
=
{
styles
.
sider
}
>
<
div
className
=
{
styles
.
logo
}
key
=
"
logo
"
>
<
Link
to
=
"
/
"
>
<
img
src
=
{
logo
}
alt
=
"
logo
"
/>
<
h1
>
Ant
Design
Pro
<
/h1
>
<
/Link
>
<
/div
>
<
Menu
key
=
"
Menu
"
theme
=
"
dark
"
mode
=
"
inline
"
{...
menuProps
}
onOpenChange
=
{
this
.
handleOpenChange
}
selectedKeys
=
{
selectedKeys
}
style
=
{{
padding
:
'
16px 0
'
,
width
:
'
100%
'
}}
>
{
this
.
getNavMenuItems
(
this
.
props
.
menuData
)}
<
/Menu
>
<
/Sider
>
);
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录