Nav0.jsx
4.83 KB
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import React from 'react';
import { findDOMNode } from 'react-dom';
import TweenOne from 'rc-tween-one';
import { Menu, Popover, Icon } from 'antd';
import NavLink from 'umi/navlink';
const Item = Menu.Item;
const { SubMenu } = Menu;
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
phoneOpen: false,
menuHeight: 0,
};
}
phoneClick = () => {
const menu = findDOMNode(this.menu);
const phoneOpen = !this.state.phoneOpen;
this.setState({
phoneOpen,
menuHeight: phoneOpen ? menu.scrollHeight : 0,
});
};
render() {
const { ...props } = this.props;
const { dataSource, isMobile } = props;
delete props.dataSource;
delete props.isMobile;
const { menuHeight, phoneOpen } = this.state;
const navData = dataSource.Menu.children;
const navChildren = Object.keys(navData).map((key, i) => (
<Item key={i.toString()} {...navData[key]}>
<NavLink
{...navData[key].a}
href={navData[key].a.href}
to={navData[key].a.href}
target={navData[key].a.target}
>
{navData[key].a.children}
</NavLink>
</Item>
));
return (
<TweenOne
component="header"
animation={{ opacity: 0, type: 'from' }}
{...dataSource.wrapper}
{...props}
>
<div
{...dataSource.page}
className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
>
<TweenOne
animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
{...dataSource.logo}
>
{/* <img width="100%" src={dataSource.logo.children} alt="img" /> */}
<h1>
<a href="">Luban H5</a>
</h1>
</TweenOne>
<TweenOne
animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
{...dataSource.logo}
>
<span style={{color: 'rgba(0,0,0,.65)'}}>移动建站平台</span>
</TweenOne>
{isMobile && (
<div
{...dataSource.mobileMenu}
onClick={() => {
this.phoneClick();
}}
>
<em />
<em />
<em />
</div>
)}
<TweenOne
{...dataSource.Menu}
animation={{ x: 30, type: 'from', ease: 'easeOutQuad' }}
ref={(c) => {
this.menu = c;
}}
style={isMobile ? { height: menuHeight } : null}
>
<Menu
mode={isMobile ? 'inline' : 'horizontal'}
defaultSelectedKeys={['0']}
theme={isMobile ? 'dark' : 'default'}
>
{/* {navChildren} */}
<SubMenu
style={{color: 'black'}}
title={
<span className="submenu-title-wrapper">
<Icon type="appstore" />
相关链接
</span>
}
>
<Menu.ItemGroup title="项目地址">
<Menu.Item key="setting:3" onClick={() => {
window.open('https://api.luban-h5.wxjcart.com/main')
}}>Website</Menu.Item>
<Menu.Item key="setting:3.1" onClick={() => {
window.open('https://github.com/ly525/luban-h5')
}}>GitHub</Menu.Item>
<Menu.Item key="setting:4" onClick={() => {
window.open('https://gitee.com/ly525/luban-h5')
}}>Gitee</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="联系方式">
<Menu.Item key="setting:5.0" onClick={() => {
window.open('https://support.qq.com/products/93432/')
}}>论坛</Menu.Item>
<Menu.Item key="setting:5" onClick={() => {
window.open('https://gitee.com/ly525/luban-h5#%E4%BA%A4%E6%B5%81%E7%BE%A4')
}}>钉钉群</Menu.Item>
<Menu.Item key="setting:6" onClick={() => {
window.open('https://gitee.com/ly525/luban-h5#%E4%BA%A4%E6%B5%81%E7%BE%A4')
}}>微信群</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Document">
<Menu.Item key="setting:1" onClick={() => {
window.open('https://ly525.github.io/luban-h5/zh/')
}}>中文文档</Menu.Item>
<Menu.Item key="setting:2" onClick={() => {
window.open('https://ly525.github.io/luban-h5')
}}>English Doc</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
</Menu>
</TweenOne>
</div>
</TweenOne>
);
}
}
export default Header;