feat!: migrate more dropdown to open API (#1023)

Author: QDyanbing

README.md

@@ -108,7 +108,9 @@ Then open `http://localhost:8000`.
 | --- | --- | --- | --- |
 | `icon` | ReactNode | - | The icon shown in the more trigger. |
 | `popupRender` | `(menu: ReactElement, info: { restTabs: Tab[], onClose: () => void }) => ReactElement` | - | Customize the dropdown popup content. The `info` object provides `restTabs` (all overflowed tabs) and `onClose` (function to close the dropdown). |
-| Other dropdown props | from DropdownProps | - | All other [rc-dropdown](https://github.com/react-component/dropdown) props such as `trigger`, `overlayClassName`, `visible`, etc. are also supported. |
+| Other dropdown props | from DropdownProps | - | All other [rc-dropdown](https://github.com/react-component/dropdown) props such as `trigger`, `overlayClassName`, `open`, etc. are also supported. |
+
+Dropdown 2 uses `more.open` and `more.onOpenChange`. The previous `more.visible` and `more.onVisibleChange` props are no longer supported and must be migrated when upgrading.
 
 ## Development
 

README.zh-CN.md

@@ -108,7 +108,9 @@ npm start
 | --- | --- | --- | --- |
 | `icon` | ReactNode | - | 更多按钮的图标。 |
 | `popupRender` | `(menu: ReactElement, info: { restTabs: Tab[], onClose: () => void }) => ReactElement` | - | 自定义下拉弹层内容。`info` 对象提供 `restTabs`（所有溢出标签）和 `onClose`（关闭下拉菜单的函数）。 |
-| 其他下拉属性 | 来自 DropdownProps | - | 其他 [rc-dropdown](https://github.com/react-component/dropdown) 属性如 `trigger`、`overlayClassName`、`visible` 等也都支持。 |
+| 其他下拉属性 | 来自 DropdownProps | - | 其他 [rc-dropdown](https://github.com/react-component/dropdown) 属性如 `trigger`、`overlayClassName`、`open` 等也都支持。 |
+
+Dropdown 2 使用 `more.open` 和 `more.onOpenChange`。旧的 `more.visible` 和 `more.onVisibleChange` 已不再支持，升级时需要同步迁移。
 
 ## 本地开发
 

package.json

@@ -41,7 +41,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@rc-component/dropdown": "~1.0.0",
+    "@rc-component/dropdown": "~2.0.0",
     "@rc-component/menu": "~1.6.0",
     "@rc-component/motion": "^1.1.3",
     "@rc-component/resize-observer": "^1.0.0",

src/TabNavList/OperationNode.tsx

@@ -208,8 +208,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     <Dropdown
       prefixCls={dropdownPrefix}
       overlay={overlay}
-      visible={tabs.length ? open : false}
-      onVisibleChange={setOpen}
+      open={tabs.length ? open : false}
+      onOpenChange={setOpen}
       overlayClassName={overlayClassName}
       overlayStyle={popupStyle}
       mouseEnterDelay={0.1}

tests/overflow.test.tsx

@@ -111,6 +111,32 @@ describe('Tabs.Overflow', () => {
     unmount();
   });
 
+  it('supports more.open and more.onOpenChange', () => {
+    jest.useFakeTimers();
+    const onOpenChange = jest.fn();
+    const dropdown = (open: boolean) => getTabs({ more: { open, onOpenChange, trigger: 'click' } });
+    const { container, rerender, unmount } = render(dropdown(false));
+    triggerResize(container);
+    act(() => {
+      jest.runAllTimers();
+    });
+    const button = container.querySelector('.rc-tabs-nav-more');
+    fireEvent.click(button);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
+    expect(button).not.toHaveClass('rc-tabs-dropdown-open');
+
+    rerender(dropdown(true));
+    expect(button).toHaveClass('rc-tabs-dropdown-open');
+    fireEvent.click(button);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
+    expect(button).toHaveClass('rc-tabs-dropdown-open');
+
+    rerender(dropdown(false));
+    expect(button).not.toHaveClass('rc-tabs-dropdown-open');
+    unmount();
+    jest.useRealTimers();
+  });
+
   [KeyCode.SPACE, KeyCode.ENTER].forEach(code => {
     it(`keyboard with select keycode: ${code}`, () => {
       jest.useFakeTimers();