compatible with antd @ 4

ant-design · Dec 17, 2019 · ecf9425 · ecf9425
1 parent 1f6e658
commit ecf9425
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,8 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@ant-design/compatible": "^0.0.1-alpha.7",
+    "@ant-design/icons": "^4.0.0-alpha.11",
     "antd": "^3.25.1",
     "classnames": "^2.2.6",
     "moment": "^2.24.0",

diff --git a/src/Form/index.tsx b/src/Form/index.tsx
@@ -1,16 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Form,
-  Input,
-  Row,
-  Col,
-  TimePicker,
-  InputNumber,
-  DatePicker,
-  Select,
-  Button,
-  Icon,
-} from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Input, Row, Col, TimePicker, InputNumber, DatePicker, Select, Button } from 'antd';
 import moment, { Moment } from 'moment';
 import RcResizeObserver from 'rc-resize-observer';
 import { FormComponentProps } from 'antd/lib/form';
@@ -231,13 +223,11 @@ const FormSearch = <T, U = {}>({ form, onSubmit, momentFormat = 'string' }: Form
                         }}
                       >
                         {collapse ? '展开' : '收起'}{' '}
-                        <Icon
+                        <DownOutlined
                           style={{
                             transition: '0.3s all',
                             transform: `rotate(${collapse ? 0 : 0.5}turn)`,
-                          }}
-                          type="down"
-                        />
+                          }} />
                       </a>
                     )}
                   </Col>

diff --git a/src/component/columnSetting/index.tsx b/src/component/columnSetting/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
-import { Checkbox, Popover, Icon, Tooltip } from 'antd';
+import { PushpinOutlined, SettingOutlined, VerticalAlignMiddleOutlined } from '@ant-design/icons';
+import { Checkbox, Popover, Tooltip } from 'antd';
 import Container, { ColumnsMapItem } from '../../container';
 import { ProColumns } from '../../Table';
 import './index.less';
@@ -74,23 +75,21 @@ const CheckboxList: React.FC<{
             title="固定到左边"
             show={fixed !== 'left'}
           >
-            <Icon
-              type="pushpin"
+            <PushpinOutlined
               style={{
                 transform: 'rotate(-90deg)',
-              }}
-            />
+              }} />
           </ToolTipIcon>
           <ToolTipIcon columnKey={columnKey} fixed={undefined} title="取消固定" show={!!fixed}>
-            <Icon type="vertical-align-middle" />
+            <VerticalAlignMiddleOutlined />
           </ToolTipIcon>
           <ToolTipIcon
             columnKey={columnKey}
             fixed="right"
             title="固定到右边"
             show={fixed !== 'right'}
           >
-            <Icon type="pushpin" />
+            <PushpinOutlined />
           </ToolTipIcon>
         </span>
       </span>
@@ -213,13 +212,11 @@ const ColumnSetting = <T, U = {}>(props: ColumnSettingProps<T>) => {
                   document.body) as any) as HTMLElement
               }
             >
-              <Icon
-                type="setting"
+              <SettingOutlined
                 className={`${toolBarClassName}-item-icon`}
                 style={{
                   fontSize: 16,
-                }}
-              />
+                }} />
             </Tooltip>
           </Popover>
         );

diff --git a/src/component/dropdown/index.tsx b/src/component/dropdown/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { Dropdown, Menu, Button, Icon } from 'antd';
+import { DownOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { Dropdown, Menu, Button } from 'antd';
 import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
 import './index.less';
 
@@ -38,7 +39,7 @@ const DropdownButton: React.FC<DropdownProps> = ({
       return (
         <Dropdown overlay={menu} className={classnames(tempClassName, className)}>
           <Button style={style}>
-            {children} <Icon type="down" />
+            {children} <DownOutlined />
           </Button>
         </Dropdown>
       );
@@ -72,7 +73,7 @@ const TableDropdown: React.FC<DropdownProps> & { Button: typeof DropdownButton }
           className={classnames(className, propsClassName)}
         >
           <a style={style}>
-            <Icon type="ellipsis" />
+            <EllipsisOutlined />
           </a>
         </Dropdown>
       );

diff --git a/src/component/toolBar/FullscreenIcon.tsx b/src/component/toolBar/FullscreenIcon.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Icon, Tooltip } from 'antd';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 
 const FullScreenIcon = () => {
   const [fullscreen, setFullscreen] = useState<boolean>(false);
@@ -15,7 +16,7 @@ const FullScreenIcon = () => {
         ((document.getElementById('ant-design-pro-table') || document.body) as any) as HTMLElement
       }
     >
-      <Icon type="fullscreen-exit" />
+      <FullscreenExitOutlined />
     </Tooltip>
   ) : (
     <Tooltip
@@ -24,7 +25,7 @@ const FullScreenIcon = () => {
         ((document.getElementById('ant-design-pro-table') || document.body) as any) as HTMLElement
       }
     >
-      <Icon type="fullscreen" />
+      <FullscreenOutlined />
     </Tooltip>
   );
 };

diff --git a/src/component/toolBar/index.tsx b/src/component/toolBar/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Icon, Divider, Tooltip } from 'antd';
+import { ReloadOutlined, SettingOutlined } from '@ant-design/icons';
+import { Divider, Tooltip } from 'antd';
 import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
 import ColumnSetting from '../columnSetting';
 
@@ -38,11 +39,11 @@ const buttonText = {
   },
   reload: {
     text: '刷新',
-    icon: <Icon type="reload" />,
+    icon: <ReloadOutlined />,
   },
   setting: {
     text: '列设置',
-    icon: <Icon type="setting" />,
+    icon: <SettingOutlined />,
   },
 };