feat: add loading prop for Dropdown.Button (#32467)

close #24017

components/dropdown/__tests__/dropdown-button.test.js

@@ -95,4 +95,12 @@ describe('DropdownButton', () => {
     expect(wrapper.find('.ant-dropdown').getDOMNode().className).toContain('className');
     expect(wrapper.find('.ant-dropdown').getDOMNode().style.color).toContain('red');
   });
+
+  it('should support loading', () => {
+    const wrapper = mount(<Dropdown.Button loading />);
+
+    expect(wrapper.find('.ant-dropdown-button .ant-btn-loading').getDOMNode().className).toContain(
+      'ant-btn',
+    );
+  });
 });

components/dropdown/demo/loading.md

@@ -0,0 +1,73 @@
+---
+order: 9
+title:
+  zh-CN: 加载中状态
+  en-US: Loading
+---
+
+## zh-CN
+
+添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
+
+## en-US
+
+A loading indicator can be added to a button by setting the `loading` property on the `Dropdown.Button`.
+
+```jsx
+import { Menu, Dropdown, Space } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+
+const menu = (
+  <Menu>
+    <Menu.Item key="1">Submit and continue</Menu.Item>
+  </Menu>
+);
+class App extends React.Component {
+  state = {
+    loadings: [],
+  };
+
+  enterLoading = index => {
+    const newLoadings = [...this.state.loadings];
+    newLoadings[index] = true;
+    this.setState({
+      loadings: newLoadings,
+    });
+    setTimeout(() => {
+      newLoadings[index] = false;
+      this.setState({ loadings: newLoadings });
+    }, 6000);
+  };
+
+  render() {
+    const { loadings } = this.state;
+    return (
+      <Space direction="vertical">
+        <Dropdown.Button type="primary" loading overlay={menu}>
+          Submit
+        </Dropdown.Button>
+        <Dropdown.Button type="primary" size="small" loading overlay={menu}>
+          Submit
+        </Dropdown.Button>
+        <Dropdown.Button
+          type="primary"
+          loading={loadings[0]}
+          overlay={menu}
+          onClick={() => this.enterLoading(0)}
+        >
+          Submit
+        </Dropdown.Button>
+        <Dropdown.Button
+          icon={<DownOutlined />}
+          loading={loadings[1]}
+          overlay={menu}
+          onClick={() => this.enterLoading(1)}
+        >
+          Submit
+        </Dropdown.Button>
+      </Space>
+    );
+  }
+}
+ReactDOM.render(<App />, mountNode);
+```

components/dropdown/dropdown-button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
-import Button from '../button';
+import Button, { ButtonProps } from '../button';
 import { ButtonHTMLType } from '../button/button';
 import { ButtonGroupProps } from '../button/button-group';
 import { ConfigContext } from '../config-provider';
@@ -15,6 +15,7 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps {
   type?: DropdownButtonType;
   htmlType?: ButtonHTMLType;
   disabled?: boolean;
+  loading?: ButtonProps['loading'];
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   icon?: React.ReactNode;
   href?: string;
@@ -38,6 +39,7 @@ const DropdownButton: DropdownButtonInterface = props => {
     prefixCls: customizePrefixCls,
     type = 'default',
     disabled,
+    loading,
     onClick,
     htmlType,
     children,
@@ -88,6 +90,7 @@ const DropdownButton: DropdownButtonInterface = props => {
     <Button
       type={type}
       disabled={disabled}
+      loading={loading}
       onClick={onClick}
       htmlType={htmlType}
       href={href}

components/dropdown/index.en-US.md

@@ -40,6 +40,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
+| loading | Set the loading status of button | boolean \| { delay: number } | false |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |

components/dropdown/index.zh-CN.md

@@ -44,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
+| loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
 | overlay | 菜单 | [Menu](/components/menu/) | - |  |

components/dropdown/style/index.less

@@ -347,10 +347,21 @@
 .@{dropdown-prefix-cls}-button {
   white-space: nowrap;
 
-  &.@{ant-prefix}-btn-group
-    > .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
-    padding-right: @padding-xs;
-    padding-left: @padding-xs;
+  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
+    &-loading,
+    &-loading + .@{ant-prefix}-btn {
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &-loading + .@{ant-prefix}-btn::before {
+      display: block;
+    }
+
+    &:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
+      padding-right: @padding-xs;
+      padding-left: @padding-xs;
+    }
   }
 }