feat: 🆕 Add buttonsRender to Dropdown (#20815)

* 🆕 Add buttonsRender to Dropdown

* ✅ update snapshot

* 📝 update document for buttonsRender

* ✅ fix demo lint

components/dropdown/__tests__/__snapshots__/demo.test.js.snap

@@ -155,6 +155,43 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
   </div>
+  <div
+    class="ant-btn-group ant-dropdown-button"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        With Tooltip
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      type="button"
+    >
+      <span
+        aria-label="ellipsis"
+        class="anticon anticon-ellipsis"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="ellipsis"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
   <button
     class="ant-btn ant-dropdown-trigger"
     type="button"

components/dropdown/demo/dropdown-button.md

@@ -14,7 +14,7 @@ title:
 A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
 
 ```jsx
-import { Menu, Dropdown, Button, message } from 'antd';
+import { Menu, Dropdown, Button, message, Tooltip } from 'antd';
 import { DownOutlined, UserOutlined } from '@ant-design/icons';
 
 function handleButtonClick(e) {
@@ -55,6 +55,17 @@ ReactDOM.render(
     <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
       Dropdown
     </Dropdown.Button>
+    <Dropdown.Button
+      overlay={menu}
+      buttonsRender={([leftButton, rightButton]) => [
+        <Tooltip title="tooltip" key="leftButton">
+          {leftButton}
+        </Tooltip>,
+        rightButton,
+      ]}
+    >
+      With Tooltip
+    </Dropdown.Button>
     <Dropdown overlay={menu}>
       <Button>
         Button <DownOutlined />

components/dropdown/dropdown-button.tsx

@@ -17,19 +17,18 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps {
   htmlType?: ButtonHTMLType;
   disabled?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /**
-   * @since 3.17.0
-   */
   icon?: React.ReactNode;
   href?: string;
   children?: React.ReactNode;
   title?: string;
+  buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
 }
 
 export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
   static defaultProps = {
     placement: 'bottomRight' as DropDownProps['placement'],
     type: 'default' as DropdownButtonType,
+    buttonsRender: (buttons: React.ReactNode[]) => buttons,
   };
 
   renderButton = ({
@@ -54,6 +53,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
       href,
       icon = <EllipsisOutlined />,
       title,
+      buttonsRender,
       ...restProps
     } = this.props;
 
@@ -67,25 +67,32 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
       placement,
       getPopupContainer: getPopupContainer || getContextPopupContainer,
     } as DropDownProps;
+
     if ('visible' in this.props) {
       dropdownProps.visible = visible;
     }
 
+    const leftButton = (
+      <Button
+        type={type}
+        disabled={disabled}
+        onClick={onClick}
+        htmlType={htmlType}
+        href={href}
+        title={title}
+      >
+        {children}
+      </Button>
+    );
+
+    const rightButton = <Button type={type}>{icon}</Button>;
+
+    const [leftButtonToRender, rightButtonToRender] = buttonsRender!([leftButton, rightButton]);
+
     return (
       <ButtonGroup {...restProps} className={classNames(prefixCls, className)}>
-        <Button
-          type={type}
-          disabled={disabled}
-          onClick={onClick}
-          htmlType={htmlType}
-          href={href}
-          title={title}
-        >
-          {children}
-        </Button>
-        <Dropdown {...dropdownProps}>
-          <Button type={type}>{icon}</Button>
-        </Dropdown>
+        {leftButtonToRender}
+        <Dropdown {...dropdownProps}>{rightButtonToRender}</Dropdown>
       </ButtonGroup>
     );
   };

components/dropdown/index.en-US.md

@@ -46,3 +46,4 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | visible | Whether the dropdown menu is currently visible | boolean | - |  |
 | onClick | The same as [Button](/components/button): called when you click the button on the left | Function | - |  |
 | onVisibleChange | Called when the visible state is changed | Function | - |  |
+| buttonsRender | custom buttons inside Dropdown.Button | `([buttons: ReactNode[]]) => ReactNode` | - |  |

components/dropdown/index.zh-CN.md

@@ -47,3 +47,4 @@ title: Dropdown
 | visible | 菜单是否显示 | boolean | - |  |
 | onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |  |
 | onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |  |
+| buttonsRender | 自定义左右两个按钮 | `([buttons: ReactNode[]]) => ReactNode` | - |  |