Skip to content

Commit 781ea48

Browse files
xpioneerxpioneer
committed
ant v3 -> v4
1 parent ac3f005 commit 781ea48

35 files changed

+1113
-1002
lines changed

‎package.json

+8-7
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,17 @@
2222
"url": "https://github.com/xpioneer/react-typescript/issues"
2323
},
2424
"dependencies": {
25-
"antd": "^3.25.1",
25+
"@ant-design/icons": "^4.6.2",
26+
"antd": "^4.16.11",
2627
"axios": "^0.19.0",
2728
"echarts": "^4.2.0-rc.2",
2829
"mobx": "^5.15.0",
2930
"mobx-react": "^6.1.4",
3031
"quill": "^1.3.7",
3132
"quill-image-resize-module": "^3.0.0",
32-
"react": "^16.11.0",
33-
"react-dom": "^16.11.0",
34-
"react-router-dom": "^5.1.2"
33+
"react": "^17.0.2",
34+
"react-dom": "^17.0.2",
35+
"react-router-dom": "^5.2.0"
3536
},
3637
"devDependencies": {
3738
"@babel/core": "^7.12.10",
@@ -42,9 +43,9 @@
4243
"@babel/preset-typescript": "^7.12.7",
4344
"@types/echarts": "^4.1.3",
4445
"@types/quill": "^2.0.1",
45-
"@types/react": "^16.7.7",
46-
"@types/react-dom": "^16.0.10",
47-
"@types/react-router-dom": "^4.3.1",
46+
"@types/react": "^17.0.17",
47+
"@types/react-dom": "^17.0.9",
48+
"@types/react-router-dom": "^5.1.8",
4849
"@typescript-eslint/eslint-plugin": "^4.10.0",
4950
"@typescript-eslint/parser": "^4.10.0",
5051
"babel-loader": "^8.2.2",

‎src/components/datePicker/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
2+
import generatePicker from 'antd/es/date-picker/generatePicker';
3+
import 'antd/es/date-picker/style/index';
4+
5+
export const DatePicker = generatePicker<Date>(dateFnsGenerateConfig);

‎src/pages/article/articleCreate.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
44
import Editor from '@components/editor'
55

66
const FormItem = Form.Item

‎src/pages/article/articleEdit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
44
import Editor from '@components/editor'
55

66
const FormItem = Form.Item

‎src/pages/article/articleList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
44
import { ColumnProps } from 'antd/lib/table'
55
import { IArticle } from '@models/article'
66

@@ -53,11 +53,11 @@ export default class ArticleList extends React.Component<ICommonProps> {
5353
}]
5454

5555
viewDetail (data: IArticle) {
56-
this.props.history.push(`/home/blog-article/${data.id}`)
56+
this.props.history.push(`/home/blog/article/detail/${data.id}`)
5757
}
5858

5959
create = () => {
60-
this.props.history.push('/home/blog-articleCreate')
60+
this.props.history.push('/home/blog/article/create')
6161
}
6262

6363
componentDidMount () {

‎src/pages/articleType/articleTypeCreate.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
44

55
const FormItem = Form.Item
66

‎src/pages/articleType/articleTypeEdit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
44

55
const FormItem = Form.Item
66

‎src/pages/articleType/articleTypeList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
44
import { ColumnProps } from 'antd/lib/table'
55
import { IArticleType } from '@models/articleType'
66

@@ -51,11 +51,11 @@ export default class ArticleTypeList extends React.Component<ICommonProps> {
5151
}]
5252

5353
viewDetail (data: IArticleType) {
54-
this.props.history.push(`/home/blog-type/${data.id}`)
54+
this.props.history.push(`/home/blog/type/detail/${data.id}`)
5555
}
5656

5757
create = () => {
58-
this.props.history.push('/home/blog-typeCreate')
58+
this.props.history.push('/home/blog/type/create')
5959
}
6060

6161
componentDidMount () {

‎src/pages/comment/commentEdit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
44

55
const FormItem = Form.Item
66

‎src/pages/comment/commentList.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Form, Icon, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
3+
import { Row, Col, Form, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
44
import { ColumnProps } from 'antd/lib/table'
55
import { IComment } from '@models/comment'
66

@@ -49,7 +49,7 @@ export default class CommentList extends React.Component<ICommonProps> {
4949
}]
5050

5151
viewDetail (data: IComment) {
52-
this.props.history.push(`/home/blog-comment/${data.id}`)
52+
this.props.history.push(`/home/blog/comment/${data.id}`)
5353
}
5454

5555
componentDidMount () {

‎src/pages/demo/demo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import {inject, observer} from 'mobx-react'
3-
import { Row, Col, Button, Badge, Icon, Form, Input, Select } from 'antd'
3+
import { Row, Col, Button, Badge, Form, Input, Select } from 'antd'
44

55
const FormItem = Form.Item
66
const TextArea = Input.TextArea

‎src/pages/demo/demoMobx.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import { observable, action, autorun, runInAction, computed } from 'mobx'
33
import {inject, observer} from 'mobx-react'
4-
import { Row, Col, Button, Badge, Icon, Form, Input, Select } from 'antd'
4+
import { Row, Col, Button, Badge, Form, Input, Select } from 'antd'
55

66
const FormItem = Form.Item
77
const TextArea = Input.TextArea

‎src/pages/demo/demoRedux.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Row, Col, Button, Badge, Icon, Form, Input, Select } from 'antd'
2+
import { Row, Col, Button, Badge, Form, Input, Select } from 'antd'
33
import { ReduxProvider, connect } from '../../plugins/react-redux'
44
import { store, countActions } from './reducer'
55

‎src/pages/home/components/header.tsx

+16-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import * as React from 'react'
2-
import { Layout, Icon, Popover } from 'antd'
2+
import { Layout, Popover } from 'antd'
3+
import {
4+
MenuFoldOutlined, MenuUnfoldOutlined,
5+
UserOutlined
6+
} from '@ant-design/icons'
7+
38

49
const { Header } = Layout
510

@@ -17,24 +22,27 @@ export default class HeaderComponent extends React.Component<IHeaderProps> {
1722
background: '#fff',
1823
padding: 0,
1924
display: 'flex',
20-
alignItems: 'center'
25+
alignItems: 'center',
26+
justifyContent: 'flex-end'
2127
}}>
22-
<div style={{flex: '1 1 0'}}>
23-
<Icon
28+
{/* <div style={{flex: '1 1 0'}} onClick={toggleMenu}> */}
29+
{/* {collapsed ? <MenuFoldOutlined/> : <MenuFoldOutlined/>} */}
30+
{/* <Icon
2431
style={{cursor: 'pointer'}}
2532
type={collapsed ? 'menu-unfold' : 'menu-fold'}
26-
onClick={toggleMenu}/>
27-
</div>
33+
onClick={toggleMenu}/> */}
34+
{/* </div> */}
2835
<div style={{paddingRight: 12}}>
2936
<Popover trigger="click" placement="bottomRight" content={
3037
<div className="user-menu">
3138
<div onClick={() => toggleLang(lang)}>{lang ? 'English' : '中文'}</div>
3239
<div onClick={logout}>退出登录</div>
3340
</div>
3441
}>
35-
<Icon
42+
<UserOutlined/>
43+
{/* <Icon
3644
style={{cursor: 'pointer', fontSize: 24}}
37-
type='user'/>
45+
type='user'/> */}
3846
</Popover>
3947
</div>
4048
</Header>)

‎src/pages/home/components/sider.tsx

+35-31
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,65 @@
11
import * as React from 'react'
2-
import { NavLink, Link, withRouter, RouteComponentProps } from 'react-router-dom'
3-
import { Layout, Menu, Icon } from 'antd'
2+
import { Link, withRouter } from 'react-router-dom'
3+
import { Layout, Menu } from 'antd'
4+
import {
5+
HomeOutlined, AreaChartOutlined, MehOutlined, FrownOutlined, FormOutlined, UserOutlined,
6+
BookOutlined, SmileOutlined, StockOutlined, BulbOutlined, DollarOutlined, FundOutlined, BarChartOutlined, ExperimentOutlined, FileSearchOutlined
7+
} from '@ant-design/icons'
8+
import { LeftMenuConfig } from '../../../routes/pageRoutes'
49

510
const { Sider } = Layout
611
const {Item, SubMenu} = Menu
712

8-
interface ISiderProps extends RouteComponentProps {
13+
interface ISiderProps extends ICommonProps {
914
collapsed?: boolean
1015
}
1116

1217
const MenuList = [
1318
{
14-
key: '1', title: 'Home', path: '/home', icon: 'home'
19+
key: '1', title: 'Home', path: '/home', icon: <HomeOutlined/>
1520
},
1621
{
17-
key: '2', title: 'Charts', path: '/home/charts', icon: 'area-chart'
22+
key: '2', title: 'Charts', path: '/home/charts', icon: <AreaChartOutlined/>
1823
},
1924
{
20-
key: '3', title: 'Log', icon: 'file-search',
25+
key: '3', title: 'Log', icon: <FileSearchOutlined/>,
2126
children: [
22-
{ key: '3-0', title: 'API', path: '/home/log-api', icon: 'meh' },
23-
{ key: '3-1', title: 'Errors', path: '/home/log-errors', icon: 'frown' }
27+
{ key: '3-0', title: 'API', path: '/home/log-api', icon: <MehOutlined/> },
28+
{ key: '3-1', title: 'Errors', path: '/home/log-errors', icon: <FrownOutlined/> }
2429
]
2530
},
2631
{
27-
key: '4', title: 'Essay', icon: 'book',
32+
key: '4', title: 'Essay', icon: <BookOutlined/>,
2833
children: [
29-
{ key: '4-0', title: '文章', path: '/home/blog-article', icon: 'form' },
30-
{ key: '4-1', title: '文章类型', path: '/home/blog-type', icon: 'form' },
31-
{ key: '4-2', title: '标签', path: '/home/blog-tag', icon: 'form' },
32-
{ key: '4-3', title: '评论', path: '/home/blog-comment', icon: 'form' },
33-
{ key: '4-4', title: '留言', path: '/home/blog-message', icon: 'form' },
34-
{ key: '4-5', title: '用户', path: '/home/blog-user', icon: 'user' }
34+
{ key: '4-0', title: '文章', path: '/home/blog-article', icon: <FormOutlined/> },
35+
{ key: '4-1', title: '文章类型', path: '/home/blog-type', icon: <FormOutlined/> },
36+
{ key: '4-2', title: '标签', path: '/home/blog-tag', icon: <FormOutlined/> },
37+
{ key: '4-3', title: '评论', path: '/home/blog-comment', icon: <FormOutlined/> },
38+
{ key: '4-4', title: '留言', path: '/home/blog-message', icon: <FormOutlined/> },
39+
{ key: '4-5', title: '用户', path: '/home/blog-user', icon: <UserOutlined/> }
3540
]
3641
},
3742
{
38-
key: '5', title: 'Lottery', icon: 'smile',
43+
key: '5', title: 'Lottery', icon: <SmileOutlined/>,
3944
children: [
40-
{ y: '5-0', title: '双色球', path: '/home/lottery-balls', icon: 'dollar' },
41-
{ key: '5-1', title: '趋势图', path: '/home/lottery-trend', icon: 'fund' },
42-
{ key: '5-2', title: '统计图', path: '/home/lottery-chart', icon: 'bar-chart' }
45+
{ y: '5-0', title: '双色球', path: '/home/lottery-balls', icon: <DollarOutlined/> },
46+
{ key: '5-1', title: '趋势图', path: '/home/lottery-trend', icon: <FundOutlined/> },
47+
{ key: '5-2', title: '统计图', path: '/home/lottery-chart', icon: <BarChartOutlined/> }
4348
]
4449
},
4550
{
46-
key: '6', title: 'Stocks', icon: 'stock',
51+
key: '6', title: 'Stocks', icon: <StockOutlined/>,
4752
children: [
48-
{ key: '6-0', title: 'Stock', path: '/home/stocks', icon: 'dollar' },
49-
{ key: '6-1', title: 'Stock History', path: '/home/stocks-history', icon: 'fund' }
53+
{ key: '6-0', title: 'Stock', path: '/home/stocks', icon: <DollarOutlined/> },
54+
{ key: '6-1', title: 'Stock History', path: '/home/stocks-history', icon: <FundOutlined/> }
5055
]
5156
},
5257
{
53-
key: '99', title: 'Demo', icon: 'bulb',
58+
key: '99', title: 'Demo', icon: <BulbOutlined/>,
5459
children: [
55-
{ key: '99-0', title: '示例', path: '/home/demos', icon: 'experiment' },
56-
{ key: '99-1', title: '示例mobx', path: '/home/demo-mobx', icon: 'experiment' },
57-
{ key: '99-2', title: '示例redux', path: '/home/demo-redux', icon: 'experiment' }
60+
{ key: '99-0', title: '示例', path: '/home/demos', icon: <ExperimentOutlined/> },
61+
{ key: '99-1', title: '示例mobx', path: '/home/demo-mobx', icon: <ExperimentOutlined/> },
62+
{ key: '99-2', title: '示例redux', path: '/home/demo-redux', icon: <ExperimentOutlined/> }
5863
]
5964
}
6065
]
@@ -99,21 +104,20 @@ class SiderComponent extends React.Component<ISiderProps> {
99104
return m.children ?
100105
<SubMenu
101106
key={m.key}
102-
title={<span><Icon type={m.icon} /><span>{m.title}</span></span>}>
107+
icon={m.icon}
108+
title={<span>{m.title}</span>}>
103109
{
104110
m.children.map(mc => {
105-
return <Item key={mc.key}>
111+
return <Item key={mc.key} icon={m.icon}>
106112
<Link to={mc.path}>
107-
<Icon type={mc.icon} />
108113
<span>{mc.title}</span>
109114
</Link>
110115
</Item>
111116
})
112117
}
113118
</SubMenu> :
114-
<Item key={m.key}>
119+
<Item key={m.key} icon={m.icon}>
115120
<Link to={m.path}>
116-
<Icon type={m.icon} />
117121
<span>{m.title}</span>
118122
</Link>
119123
</Item>

0 commit comments

Comments
 (0)