feat: switch visible to open for Dropdown (#36799)

* feat: switch visible to open for Dropdown * feat: add warning when use visible * fix: visible in dropdown-button * chore: merge conflict Co-authored-by: 二货机器人 <smith3816@gmail.com>
2025-06-07 09:26:06 +08:00 · 2022-08-24 17:46:44 +08:00 · 2022-08-24 17:46:44 +08:00 · 41a8003241
commit 41a8003241
parent 771c7a6f2d
10 changed files with 53 additions and 42 deletions
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
@ -6934,7 +6934,7 @@ Array [
 ]
 `;

-exports[`renders ./components/dropdown/demo/overlay-visible.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/overlay-open.md extend context correctly 1`] = `
 Array [
  <a
    class="ant-dropdown-trigger"
--- a/components/dropdown/tests/snapshots/demo.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo.test.ts.snap
@ -755,7 +755,7 @@ exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
 </a>
 `;

-exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/overlay-open.md correctly 1`] = `
 <a
  class="ant-dropdown-trigger"
 >
--- a/components/dropdown/tests/dropdown-button.test.tsx
+++ b/components/dropdown/tests/dropdown-button.test.tsx
@ -43,8 +43,8 @@ describe('DropdownButton', () => {
      ),
      disabled: false,
      trigger: ['hover'],
-      visible: true,
-      onVisibleChange: () => {},
+      open: true,
+      onOpenChange: () => {},
    };

    render(<DropdownButton {...props} />);
@ -100,7 +100,7 @@ describe('DropdownButton', () => {
        overlayClassName="className"
        overlayStyle={{ color: 'red' }}
        overlay={menu}
-        visible
+        open
      />,
    );
    expect(container.querySelector('.ant-dropdown')?.classList).toContain('className');
--- a/components/dropdown/tests/index.test.tsx
+++ b/components/dropdown/tests/index.test.tsx
@ -38,7 +38,7 @@ describe('Dropdown', () => {

  it('overlay is function and has custom transitionName', () => {
    const { asFragment } = render(
-      <Dropdown overlay={() => <div>menu</div>} transitionName="move-up" visible>
+      <Dropdown overlay={() => <div>menu</div>} transitionName="move-up" open>
        <button type="button">button</button>
      </Dropdown>,
    );
@ -47,7 +47,7 @@ describe('Dropdown', () => {

  it('overlay is string', () => {
    const { asFragment } = render(
-      <Dropdown overlay={'string' as any} visible>
+      <Dropdown overlay={'string' as any} open>
        <button type="button">button</button>
      </Dropdown>,
    );
@ -64,7 +64,7 @@ describe('Dropdown', () => {
          </Menu.SubMenu>
        </Menu>
      ),
-      visible: true,
+      open: true,
      getPopupContainer: node => node,
    };

@ -100,7 +100,7 @@ describe('Dropdown', () => {
  // zombieJ: when replaced with react test lib, it may be mock fully content
  it('dropdown should support auto adjust placement', () => {
    render(
-      <Dropdown overlay={<div>menu</div>} visible>
+      <Dropdown overlay={<div>menu</div>} open>
        <button type="button">button</button>
      </Dropdown>,
    );
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@ -20,16 +20,16 @@ import { Dropdown, Menu, Space } from 'antd';
 import React, { useState } from 'react';

 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const handleMenuClick: MenuProps['onClick'] = e => {
    if (e.key === '3') {
-      setVisible(false);
+      setOpen(false);
    }
  };

-  const handleVisibleChange = (flag: boolean) => {
-    setVisible(flag);
+  const handleOpenChange = (flag: boolean) => {
+    setOpen(flag);
  };

  const menu = (
@ -53,7 +53,7 @@ const App: React.FC = () => {
  );

  return (
-    <Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
+    <Dropdown overlay={menu} onOpenChange={handleOpenChange} open={open}>
      <a onClick={e => e.preventDefault()}>
        <Space>
          Hover me
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@ -52,8 +52,8 @@ const DropdownButton: DropdownButtonInterface = props => {
    overlay,
    trigger,
    align,
-    visible,
-    onVisibleChange,
+    open,
+    onOpenChange,
    placement,
    getPopupContainer,
    href,
@ -77,7 +77,7 @@ const DropdownButton: DropdownButtonInterface = props => {
    overlay,
    disabled,
    trigger: disabled ? [] : trigger,
-    onVisibleChange,
+    onOpenChange,
    getPopupContainer: getPopupContainer || getContextPopupContainer,
    mouseEnterDelay,
    mouseLeaveDelay,
@ -86,8 +86,8 @@ const DropdownButton: DropdownButtonInterface = props => {
    destroyPopupOnHide,
  } as DropdownProps;

-  if ('visible' in props) {
-    dropdownProps.visible = visible;
+  if ('open' in props) {
+    dropdownProps.open = open;
  }

  if ('placement' in props) {
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -51,8 +51,8 @@ export interface DropdownProps {
  arrow?: boolean | DropdownArrowOptions;
  trigger?: ('click' | 'hover' | 'contextMenu')[];
  overlay: React.ReactElement | OverlayFunc;
-  onVisibleChange?: (visible: boolean) => void;
-  visible?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
  disabled?: boolean;
  destroyPopupOnHide?: boolean;
  align?: Align;
@ -82,6 +82,17 @@ const Dropdown: DropdownInterface = props => {
    direction,
  } = React.useContext(ConfigContext);

+  [
+    ['visible', 'open'],
+    ['onVisibleChange', 'onOpenChange'],
+  ].forEach(([deprecatedName, newName]) => {
+    warning(
+      !(deprecatedName in props),
+      'Dropdown',
+      `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
+    );
+  });
+
  const getTransitionName = () => {
    const rootPrefixCls = getPrefixCls();
    const { placement = '', transitionName } = props;
@ -121,8 +132,8 @@ const Dropdown: DropdownInterface = props => {
    disabled,
    getPopupContainer,
    overlayClassName,
-    visible,
-    onVisibleChange,
+    open,
+    onOpenChange,
  } = props;

  const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
@ -147,14 +158,14 @@ const Dropdown: DropdownInterface = props => {
    alignPoint = true;
  }

-  // =========================== Visible ============================
-  const [mergedVisible, setVisible] = useMergedState(false, {
-    value: visible,
+  // =========================== Open ============================
+  const [mergedOpen, setOpen] = useMergedState(false, {
+    value: open,
  });

-  const onInnerVisibleChange = useEvent((nextVisible: boolean) => {
-    onVisibleChange?.(nextVisible);
-    setVisible(nextVisible);
+  const onInnerOpenChange = useEvent((nextOpen: boolean) => {
+    onOpenChange?.(nextOpen);
+    setOpen(nextOpen);
  });

  // =========================== Overlay ============================
@ -168,7 +179,7 @@ const Dropdown: DropdownInterface = props => {
  });

  const onMenuClick = React.useCallback(() => {
-    setVisible(false);
+    setOpen(false);
  }, []);

  const renderOverlay = () => {
@ -216,7 +227,7 @@ const Dropdown: DropdownInterface = props => {
    <RcDropdown
      alignPoint={alignPoint}
      {...props}
-      visible={mergedVisible}
+      visible={mergedOpen}
      builtinPlacements={builtinPlacements}
      arrow={!!arrow}
      overlayClassName={overlayClassNameCustomized}
@ -226,7 +237,7 @@ const Dropdown: DropdownInterface = props => {
      trigger={triggerActions}
      overlay={renderOverlay}
      placement={getPlacement()}
-      onVisibleChange={onInnerVisibleChange}
+      onVisibleChange={onInnerOpenChange}
    >
      {dropdownTrigger}
    </RcDropdown>,
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -27,8 +27,8 @@ When there are more than a few options to choose from, you can wrap them in a `D
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
 | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| visible | Whether the dropdown menu is currently visible | boolean | - |  |
-| onVisibleChange | Called when the visible state is changed. Not trigger when hidden by click item | (visible: boolean) => void | - |  |
+| open | Whether the dropdown menu is currently open | boolean | - |  |
+| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean) => void | - |  |

 You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.

@ -50,6 +50,6 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | size | Size of the button, the same as [Button](/components/button/#API) | string | `default` |  |
 | trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | Type of the button, the same as [Button](/components/button/#API) | string | `default` |  |
-| visible | Whether the dropdown menu is currently visible | boolean | - |  |
+| open | Whether the dropdown menu is currently open | boolean | - |  |
 | onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - |  |
-| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - |  |
+| onOpenChange | Called when the open state is changed | (open: boolean) => void | - |  |
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| visible | 菜单是否显示 | boolean | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (visible: boolean) => void | - |  |
+| open | 菜单是否显示 | boolean | - |  |
+| onOpenChange | 菜单显示状态改变时调用，参数为 `open`。点击菜单按钮导致的消失不会触发 | (open: boolean) => void | - |  |

 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。

@ -54,6 +54,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
-| visible | 菜单是否显示 | boolean | - |  |
+| open | 菜单是否显示 | boolean | - |  |
 | onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - |  |
+| onOpenChange | 菜单显示状态改变时调用，参数为 `open` | (open: boolean) => void | - |  |
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@ -457,8 +457,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
      <Dropdown
        overlay={menu}
        trigger={['click']}
-        visible={mergedVisible}
-        onVisibleChange={onVisibleChange}
+        open={mergedVisible}
+        onOpenChange={onVisibleChange}
        getPopupContainer={getPopupContainer}
        placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
      >