feat: support overwrite the more tabs dropdown props (#396)

Author: vincentLiuxiang

src/TabNavList/OperationNode.tsx

@@ -6,6 +6,7 @@ import Menu, { MenuItem } from 'rc-menu';
 import Dropdown from 'rc-dropdown';
 import type { Tab, TabsLocale, EditableConfig } from '../interface';
 import AddButton from './AddButton';
+import type { DropdownProps } from 'rc-dropdown/lib/Dropdown';
 
 export interface OperationNodeProps {
   prefixCls: string;
@@ -19,6 +20,7 @@ export interface OperationNodeProps {
   mobile: boolean;
   moreIcon?: React.ReactNode;
   moreTransitionName?: string;
+  moreTabsDropdownProps?: Partial<DropdownProps>;
   editable?: EditableConfig;
   locale?: TabsLocale;
   onTabClick: (key: React.Key, e: React.MouseEvent | React.KeyboardEvent) => void;
@@ -39,6 +41,7 @@ function OperationNode(
     tabBarGutter,
     rtl,
     onTabClick,
+    moreTabsDropdownProps,
   }: OperationNodeProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -163,6 +166,7 @@ function OperationNode(
       overlayClassName={overlayClassName}
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
+      {...moreTabsDropdownProps}
     >
       <button
         type="button"

src/TabNavList/index.tsx

@@ -25,6 +25,7 @@ import useTouchMove from '../hooks/useTouchMove';
 import useRefs from '../hooks/useRefs';
 import AddButton from './AddButton';
 import useSyncState from '../hooks/useSyncState';
+import type { DropdownProps } from 'rc-dropdown/lib/Dropdown';
 
 export interface TabNavListProps {
   id: string;
@@ -36,6 +37,7 @@ export interface TabNavListProps {
   extra?: TabBarExtraContent;
   editable?: EditableConfig;
   moreIcon?: React.ReactNode;
+  moreTabsDropdownProps?: Partial<DropdownProps>;
   moreTransitionName?: string;
   mobile: boolean;
   tabBarGutter?: number;
@@ -89,6 +91,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     children,
     onTabClick,
     onTabScroll,
+    moreTabsDropdownProps,
   } = props;
   const tabsWrapperRef = useRef<HTMLDivElement>();
   const tabListRef = useRef<HTMLDivElement>();
@@ -478,6 +481,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
         ref={operationsRef}
         prefixCls={prefixCls}
         tabs={hiddenTabs}
+        moreTabsDropdownProps={moreTabsDropdownProps}
         className={!hasDropdown && operationsHiddenClassName}
       />
 

src/Tabs.tsx

@@ -20,6 +20,7 @@ import type {
   TabBarExtraContent,
 } from './interface';
 import TabContext from './TabContext';
+import type { DropdownProps } from 'rc-dropdown/lib/Dropdown';
 
 /**
  * Should added antd:
@@ -51,6 +52,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
   tabBarStyle?: React.CSSProperties;
   tabPosition?: TabPosition;
   destroyInactiveTabPane?: boolean;
+  moreTabsDropdownProps?: Partial<DropdownProps>;
 
   onChange?: (activeKey: string) => void;
   onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
@@ -106,6 +108,7 @@ function Tabs(
     moreIcon,
     moreTransitionName,
     destroyInactiveTabPane,
+    moreTabsDropdownProps,
     renderTabBar,
     onChange,
     onTabClick,
@@ -149,7 +152,7 @@ function Tabs(
     defaultValue: defaultActiveKey,
   });
   const [activeIndex, setActiveIndex] = useState(() =>
-    tabs.findIndex(tab => tab.key === mergedActiveKey),
+  tabs.findIndex(tab => tab.key === mergedActiveKey),
   );
 
   // Reset active key if not exist anymore
@@ -212,6 +215,7 @@ function Tabs(
     extra: tabBarExtraContent,
     style: tabBarStyle,
     panes: children,
+    moreTabsDropdownProps,
   };
 
   if (renderTabBar) {

tests/operation-overflow.test.tsx

@@ -62,4 +62,32 @@ describe('Tabs.Operation-Overflow', () => {
 
     jest.useRealTimers();
   });
+
+  it('moreTabsDropdownProps trigger click', () => {
+    jest.useFakeTimers();
+    const onEdit = jest.fn();
+    const wrapper = mount(
+      getTabs({ editable: { onEdit }, moreTabsDropdownProps: { trigger: 'click' } }),
+    );
+
+    triggerResize(wrapper);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // hover
+    wrapper.find('.rc-tabs-nav-more').simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.rc-tabs-dropdown')).toHaveLength(0);
+
+    // click
+    wrapper.find('.rc-tabs-nav-more').simulate('click');
+    expect(wrapper.find('.rc-tabs-dropdown').hasClass('ant-tabs-dropdown-hidden')).toBeFalsy();
+
+    wrapper.unmount();
+
+    jest.useRealTimers();
+  });
 });