ant v3 -> v4

Author: xpioneer

package.json

@@ -22,16 +22,17 @@
     "url": "https://github.com/xpioneer/react-typescript/issues"
   },
   "dependencies": {
-    "antd": "^3.25.1",
+    "@ant-design/icons": "^4.6.2",
+    "antd": "^4.16.11",
     "axios": "^0.19.0",
     "echarts": "^4.2.0-rc.2",
     "mobx": "^5.15.0",
     "mobx-react": "^6.1.4",
     "quill": "^1.3.7",
     "quill-image-resize-module": "^3.0.0",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-router-dom": "^5.1.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -42,9 +43,9 @@
     "@babel/preset-typescript": "^7.12.7",
     "@types/echarts": "^4.1.3",
     "@types/quill": "^2.0.1",
-    "@types/react": "^16.7.7",
-    "@types/react-dom": "^16.0.10",
-    "@types/react-router-dom": "^4.3.1",
+    "@types/react": "^17.0.17",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
     "babel-loader": "^8.2.2",

src/components/datePicker/index.tsx

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

src/pages/article/articleCreate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
 import Editor from '@components/editor'
 
 const FormItem = Form.Item

src/pages/article/articleEdit.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
 import Editor from '@components/editor'
 
 const FormItem = Form.Item

src/pages/article/articleList.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { IArticle } from '@models/article'
 
@@ -53,11 +53,11 @@ export default class ArticleList extends React.Component<ICommonProps> {
   }]
 
   viewDetail (data: IArticle) {
-    this.props.history.push(`/home/blog-article/${data.id}`)
+    this.props.history.push(`/home/blog/article/detail/${data.id}`)
   }
 
   create = () => {
-    this.props.history.push('/home/blog-articleCreate')
+    this.props.history.push('/home/blog/article/create')
   }
 
   componentDidMount () {

src/pages/articleType/articleTypeCreate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
 
 const FormItem = Form.Item
 

src/pages/articleType/articleTypeEdit.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
 
 const FormItem = Form.Item
 

src/pages/articleType/articleTypeList.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { IArticleType } from '@models/articleType'
 
@@ -51,11 +51,11 @@ export default class ArticleTypeList extends React.Component<ICommonProps> {
   }]
 
   viewDetail (data: IArticleType) {
-    this.props.history.push(`/home/blog-type/${data.id}`)
+    this.props.history.push(`/home/blog/type/detail/${data.id}`)
   }
 
   create = () => {
-    this.props.history.push('/home/blog-typeCreate')
+    this.props.history.push('/home/blog/type/create')
   }
 
   componentDidMount () {

src/pages/comment/commentEdit.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
 
 const FormItem = Form.Item
 

src/pages/comment/commentList.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
+import { Row, Col, Form, Input, Button, DatePicker, Table, Modal, Badge, } from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { IComment } from '@models/comment'
 
@@ -49,7 +49,7 @@ export default class CommentList extends React.Component<ICommonProps> {
   }]
 
   viewDetail (data: IComment) {
-    this.props.history.push(`/home/blog-comment/${data.id}`)
+    this.props.history.push(`/home/blog/comment/${data.id}`)
   }
 
   componentDidMount () {