feat: upgrade antd version to 4.24.16

.github/workflows/CD.yml

@@ -13,16 +13,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 14.x
           cache: yarn
 
       - name: Cache yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
@@ -38,7 +38,7 @@ jobs:
           cp yarn.lock package-temp-dir
       - name: Cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -51,21 +51,21 @@ jobs:
     runs-on: ubuntu-latest
     needs: [setup]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 14.x
 
       - name: Restore cache from yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: Restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}

.github/workflows/CI.yml

@@ -5,26 +5,26 @@ name: CI
 # Triggers the workflow on push or pull request events but only for the master branch
 on:
   # push:
-  #   branches: "*"
+  #   branches: ["*"]
   pull_request:
-    branches: "*"
+    branches: ["*"]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   setup:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 14.x
           cache: yarn
 
       - name: Cache yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
@@ -40,7 +40,7 @@ jobs:
           cp yarn.lock package-temp-dir
       - name: Cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -53,16 +53,16 @@ jobs:
     needs: [setup]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Restore cache from yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: Restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -74,16 +74,16 @@ jobs:
     needs: [setup, prettier]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Restore cache from yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: Restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -95,16 +95,16 @@ jobs:
     runs-on: ubuntu-latest
     needs: [setup]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Restore cache from yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: Restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}
@@ -116,20 +116,20 @@ jobs:
     runs-on: ubuntu-latest
     needs: [setup, prettier, eslint, stylelint]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-            node-version: 14.x
+          node-version: 14.x
 
       - name: Restore cache from yarn.lock
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: Restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/package-temp-dir/yarn.lock') }}

components/datepicker/demo/light.md

@@ -11,7 +11,7 @@ title:
 仅暗黑主题下使用，默认主题下使用无效
 
 - 为组件添加类名`dt-form-light-bg`
-- 设置组件的属性 `dropdownClassName` 为`dt-form-light-bg`
+- 设置组件的属性 `popupClassName` 为`dt-form-light-bg`
 
 ```jsx
 import { DatePicker } from '../../index';
@@ -22,13 +22,13 @@ const { MonthPicker, RangePicker } = DatePicker;
 const dateFormat = 'YYYY-MM-DD';
 ReactDOM.render(
   <div className="demo-datepicker-light demo-datepicker-box">
-    <DatePicker className="dt-form-light-bg dt-ant-datepicker-basic" dropdownClassName="dt-form-light-bg" defaultValue={moment('2015-06-06', dateFormat)} />
+    <DatePicker className="dt-form-light-bg dt-ant-datepicker-basic" popupClassName="dt-form-light-bg" defaultValue={moment('2015-06-06', dateFormat)} />
     <br />
-    <MonthPicker className="dt-form-light-bg dt-ant-datepicker-basic" dropdownClassName="dt-form-light-bg" defaultValue={moment('2015-06', 'YYYY-MM')} />
+    <MonthPicker className="dt-form-light-bg dt-ant-datepicker-basic" popupClassName="dt-form-light-bg" defaultValue={moment('2015-06', 'YYYY-MM')} />
     <br />
     <RangePicker
       className="dt-form-light-bg dt-ant-datepicker-basic"
-      dropdownClassName="dt-form-light-bg"
+      popupClassName="dt-form-light-bg"
       defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
     />
   </div>,

components/drawer/demo/basic-right.md

@@ -61,7 +61,7 @@ class App extends React.Component {
           title="Small Drawer"
           placement="right"
           onClose={this.onClose}
-          visible={this.state.smallVisible}
+          open={this.state.smallVisible}
         >
           <p>Some contents...</p>
           <p>Some contents...</p>
@@ -72,7 +72,7 @@ class App extends React.Component {
           placement="right"
           width={1000}
           onClose={this.onClose}
-          visible={this.state.visible}
+          open={this.state.visible}
         >
           <p>Some contents...</p>
           <p>Some contents...</p>
@@ -83,7 +83,7 @@ class App extends React.Component {
           placement="right"
           width={1256}
           onClose={this.onClose}
-          visible={this.state.largeVisible}
+          open={this.state.largeVisible}
         >
           <p>Some contents...</p>
           <p>Some contents...</p>

components/drawer/demo/placement.md

@@ -60,7 +60,7 @@ class App extends React.Component {
           placement={this.state.placement}
           closable={false}
           onClose={this.onClose}
-          visible={this.state.visible}
+          open={this.state.visible}
         >
           <p>Some contents...</p>
           <p>Some contents...</p>

components/dropdown/demo/basic.md

@@ -16,28 +16,29 @@ The most basic dropdown menu.
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
-const menu = (
-  <Menu>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
+const items = [
+  {
+    label: (<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
         1st menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
+      </a>),
+      key: '0',
+  },
+  {
+    label: (<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
         2nd menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
+      </a>),
+    key: '1',
+  },
+  {
+    label: (<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
         3rd menu item
-      </a>
-    </Menu.Item>
-  </Menu>
-);
+      </a>),
+    key: '2',
+  }
+];
 
 ReactDOM.render(
-  <Dropdown overlay={menu}>
+  <Dropdown menu={{ items }}>
     <a onClick={e => e.preventDefault()}>
       <Space>
         Hover me

components/dropdown/demo/placement.md

@@ -16,45 +16,46 @@ Support 6 placements.
 ```jsx
 import { Menu, Dropdown, Button } from 'antd';
 
-const menu = (
-  <Menu>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
+const items = [
+  {
+    label: (<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
         1st menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
+      </a>),
+      key: '0',
+  },
+  {
+    label: (<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
         2nd menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
+      </a>),
+    key: '1',
+  },
+  {
+    label: (<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
         3rd menu item
-      </a>
-    </Menu.Item>
-  </Menu>
-);
+      </a>),
+    key: '2',
+  }
+];
 
 ReactDOM.render(
   <div>
-    <Dropdown overlay={menu} placement="bottomLeft">
+    <Dropdown menu={{items}} placement="bottomLeft">
       <Button>bottomLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="bottomCenter">
+    <Dropdown menu={{items}} placement="bottomCenter">
       <Button>bottomCenter</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="bottomRight">
+    <Dropdown menu={{items}} placement="bottomRight">
       <Button>bottomRight</Button>
     </Dropdown>
     <br />
-    <Dropdown overlay={menu} placement="topLeft">
+    <Dropdown menu={{items}} placement="topLeft">
       <Button>topLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="topCenter">
+    <Dropdown menu={{items}} placement="topCenter">
       <Button>topCenter</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="topRight">
+    <Dropdown menu={{items}} placement="topRight">
       <Button>topRight</Button>
     </Dropdown>
   </div>,

components/empty/demo/light.md

@@ -59,13 +59,13 @@ class Demo extends React.Component {
         <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
           <div className="config-provider">
             <h3>Select</h3>
-            <Select dropdownClassName="dt-form-light-bg" className="dt-form-light-bg" style={style} />
+            <Select popupClassName="dt-form-light-bg" className="dt-form-light-bg" style={style} />
 
             <h3>TreeSelect</h3>
-            <TreeSelect dropdownClassName="dt-form-light-bg" className="dt-form-light-bg" style={style} treeData={[]} />
+            <TreeSelect popupClassName="dt-form-light-bg" className="dt-form-light-bg" style={style} treeData={[]} />
 
             <h3>Cascader</h3>
-            <Cascader dropdownClassName="dt-form-light-bg"  className="dt-form-light-bg" style={style} options={[]} placeholder="Please select" />
+            <Cascader popupClassName="dt-form-light-bg"  className="dt-form-light-bg" style={style} options={[]} placeholder="Please select" />
           </div>
         </ConfigProvider>
       </div>

components/form/demo/light.md

@@ -73,7 +73,7 @@ class NormalLoginForm extends React.Component {
           <Input placeholder="Username"/>
         </Form.Item>
         <Form.Item name="role" colon={false} label={'角色'} rules={[{ required: true, message: 'It is required!' }]}>
-          <Select dropdownClassName="dt-form-light-bg" placeholder="Please select">
+          <Select popupClassName="dt-form-light-bg" placeholder="Please select">
               <Option value="1">项目所有者</Option>
               <Option value="2">数据分析师</Option>
               <Option value="3">管理员</Option>
@@ -99,7 +99,7 @@ class NormalLoginForm extends React.Component {
           <Switch />
         </Form.Item>
         <Form.Item name="location" colon={false} label={'位置'} rules={[{ required: false, message: 'It is required!' }]}>
-          <Cascader dropdownClassName="dt-form-light-bg" options={options} placeholder="Please select" />
+          <Cascader popupClassName="dt-form-light-bg" options={options} placeholder="Please select" />
         </Form.Item>
         <Form.Item>
           <Button type="primary" htmlType="submit">