fix: update antd to 4.X.(close #16)

YvesCoding · Mar 4, 2020 · bdcb30c · bdcb30c
1 parent 7713b53
commit bdcb30c
Show file tree

Hide file tree

Showing 8 changed files with 1,909 additions and 3,816 deletions.
diff --git a/packages/@rcpress/theme-default/assets/index.less b/packages/@rcpress/theme-default/assets/index.less
@@ -1,4 +1,4 @@
-@import '~antd/lib/style/v2-compatible-reset.less';
+// @import '~antd/lib/style/v2-compatible-reset.less';
 @import '~antd/dist/antd.less';
 @import '~antd/lib/style/themes/default.less';
 @import './common';

diff --git a/packages/@rcpress/theme-default/components/content/EditButton.tsx b/packages/@rcpress/theme-default/components/content/EditButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Tooltip, Icon } from 'antd';
+import { Tooltip } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
 
 const EditButton: React.SFC<{
   title: React.ReactNode;
@@ -8,7 +9,7 @@ const EditButton: React.SFC<{
   return (
     <Tooltip title={title}>
       <a className="edit-button" target="_blank" href={path}>
-        <Icon type="edit" />
+        <EditOutlined />
       </a>
     </Tooltip>
   );

diff --git a/packages/@rcpress/theme-default/components/menu/index.tsx b/packages/@rcpress/theme-default/components/menu/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import MobileMenu from 'rc-drawer';
-import { Badge, Col, Menu, Icon, Affix, Divider } from 'antd';
+import { Badge, Col, Menu, Affix, Divider } from 'antd';
+import { ExportOutlined } from '@ant-design/icons';
 import Link from '../MyLink';
 import Toc from '../Toc';
 
@@ -132,7 +133,7 @@ export default class LeftMenu extends React.PureComponent<MenuPros, MenuState> {
       >
         <Badge dot={item.important}>
           {before}
-          {text} <Icon type="export" />
+          {text} <ExportOutlined />
           {after}
         </Badge>
       </a>

diff --git a/packages/@rcpress/theme-default/components/prevAndNext/index.tsx b/packages/@rcpress/theme-default/components/prevAndNext/index.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import { Icon } from 'antd';
+import { LeftCircleOutlined, RightOutlined } from '@ant-design/icons';
 
 export default ({ prev, next }: { prev: React.Component | null; next: React.Component | null }) => {
   return (
     <section className="prev-next-nav">
       {prev ? (
         <div className="prev-page">
-          <Icon className="footer-nav-icon-before" type="left" />
+          <LeftCircleOutlined className="footer-nav-icon-before" />
           {prev.props.children}
         </div>
       ) : null}
       {next ? (
         <div className="next-page">
           {next.props.children}
-          <Icon className="footer-nav-icon-after" type="right" />
+          <RightOutlined className="footer-nav-icon-after" />
         </div>
       ) : null}
     </section>

diff --git a/packages/@rcpress/theme-default/components/search-box/index.tsx b/packages/@rcpress/theme-default/components/search-box/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { List, Input, Icon, Breadcrumb } from 'antd';
+import { List, Input, Breadcrumb } from 'antd';
 import { PageInfo } from '../utils';
+import { SearchOutlined } from '@ant-design/icons';
 import Link from '../MyLink';
 
 type filterDatas = {
@@ -34,17 +35,12 @@ function flattenToc(items: any[]): any[] {
     ? items.reduce((pre, cur) => {
         return pre
           .concat(cur as any)
-          .concat((cur.items && cur.items.length
-            ? flattenToc(cur.items)
-            : []) as any);
+          .concat((cur.items && cur.items.length ? flattenToc(cur.items) : []) as any);
       }, [])
     : [];
 }
 
-export default class Search extends React.Component<
-  SearchProps,
-  SearchState
-> {
+export default class Search extends React.Component<SearchProps, SearchState> {
   searchInput: Input | null | undefined;
   isClickLink: boolean = false;
 
@@ -112,17 +108,9 @@ export default class Search extends React.Component<
             important: currentItem.important
           }
         ]);
-      } else if (
-        currentItem.toc &&
-        currentItem.toc.items &&
-        currentItem.toc.items.length
-      ) {
+      } else if (currentItem.toc && currentItem.toc.items && currentItem.toc.items.length) {
         let tocs = flattenToc(currentItem.toc.items);
-        for (
-          let i = 0;
-          i < tocs.length && results.length < max;
-          i++
-        ) {
+        for (let i = 0; i < tocs.length && results.length < max; i++) {
           let t = tocs[i];
           if (match(t.title, query)) {
             results.push([
@@ -140,23 +128,12 @@ export default class Search extends React.Component<
       }
     }
 
-    for (
-      let i = 0;
-      i < datas.length && results.length < max;
-      i++
-    ) {
+    for (let i = 0; i < datas.length && results.length < max; i++) {
       const currentItem = datas[i];
       if (currentItem.path) {
         resolveOnePageItem(currentItem);
-      } else if (
-        currentItem.children &&
-        currentItem.children.length
-      ) {
-        for (
-          let j = 0;
-          j < currentItem.children.length;
-          j++
-        ) {
+      } else if (currentItem.children && currentItem.children.length) {
+        for (let j = 0; j < currentItem.children.length; j++) {
           resolveOnePageItem(currentItem.children[j]);
         }
       }
@@ -175,10 +152,7 @@ export default class Search extends React.Component<
       <div id="search-box" className="search-box">
         <div className="searchInput-component">
           <div className="icon-container">
-            <Icon
-              type="search"
-              onClick={this.handleClickIcon}
-            />
+            <SearchOutlined onClick={this.handleClickIcon} />
           </div>
           <Input
             ref={ref => {
@@ -193,19 +167,15 @@ export default class Search extends React.Component<
         </div>
 
         <div className="search-result-list">
-          {this.state.isSearchListShow &&
-          this.state.filterDatas.length ? (
+          {this.state.isSearchListShow && this.state.filterDatas.length ? (
             <List
               key="search-list"
               dataSource={filterDatas}
               renderItem={dataItem => {
                 return (
                   <List.Item>
                     <Link
-                      to={
-                        dataItem[dataItem.length - 1]
-                          .url as string
-                      }
+                      to={dataItem[dataItem.length - 1].url as string}
                       className="search-item "
                       onMouseDown={() => {
                         this.isClickLink = true;
@@ -217,10 +187,7 @@ export default class Search extends React.Component<
                     >
                       <List.Item.Meta
                         description={
-                          <Breadcrumb
-                            separator=">"
-                            className="ellipsis"
-                          >
+                          <Breadcrumb separator=">" className="ellipsis">
                             {dataItem.map((item, index) => (
                               // <Badge dot={i.important}>
                               <Breadcrumb.Item key={index}>
@@ -251,10 +218,7 @@ export default class Search extends React.Component<
   componentDidMount() {
     const { searchInput } = this;
     document.addEventListener('keyup', event => {
-      if (
-        event.keyCode === 83 &&
-        event.target === document.body
-      ) {
+      if (event.keyCode === 83 && event.target === document.body) {
         searchInput && searchInput.focus();
       }
     });

diff --git a/packages/@rcpress/theme-default/layout/header.tsx b/packages/@rcpress/theme-default/layout/header.tsx
@@ -2,10 +2,11 @@
 import React, { useRef, useEffect, useReducer } from 'react';
 import Link from '../components/MyLink';
 import * as utils from '../components/utils';
-import { Row, Col, Icon, Input, Menu, Button, Popover, Dropdown, Affix, Badge } from 'antd';
+import { Row, Col, Input, Menu, Button, Popover, Dropdown, Affix, Badge } from 'antd';
 import { useSiteContext } from '@rcpress/core';
 import SearchBox from '../components/search-box';
 import SubMenu from 'antd/lib/menu/SubMenu';
+import { DownOutlined, MenuOutlined } from '@ant-design/icons';
 
 type menuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
 
@@ -179,7 +180,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({ isMobile }) => {
               arrowPointAtCenter
               onVisibleChange={onMenuVisibleChange}
             >
-              <Icon className="nav-phone-icon" type="menu" onClick={handleShowMenu} />
+              <DownOutlined className="nav-phone-icon" onClick={handleShowMenu} />
             </Popover>
           </>
         ) : null}
@@ -201,7 +202,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({ isMobile }) => {
                 {currentLocate ? (
                   <Dropdown overlay={chooseLanguage} placement="bottomLeft">
                     <Button size="small">
-                      {themeConfig.selectText} <Icon type="down" />
+                      {themeConfig.selectText} <DownOutlined />
                     </Button>
                   </Dropdown>
                 ) : null}

diff --git a/packages/@rcpress/theme-default/package.json b/packages/@rcpress/theme-default/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.5",
   "description": "The default theme of RcPress",
   "dependencies": {
-    "antd": "latest",
+    "antd": "^4.0.1",
     "axios": "^0.18.0",
     "nprogress": "^0.2.0",
     "react-media": "next"