feat: support popupClassName (#539)

react-component · Jun 2, 2022 · 1e505e4 · 1e505e4 · vercel · Jun 2, 2022
1 parent 7534586
commit 1e505e4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx
@@ -24,6 +24,7 @@ export interface OperationNodeProps {
   removeAriaLabel?: string;
   onTabClick: (key: React.Key, e: React.MouseEvent | React.KeyboardEvent) => void;
   tabMoving?: boolean;
+  popupClassName?: string;
 }
 
 function OperationNode(
@@ -42,6 +43,7 @@ function OperationNode(
     rtl,
     removeAriaLabel,
     onTabClick,
+    popupClassName,
   }: OperationNodeProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -191,7 +193,7 @@ function OperationNode(
       visible={open}
       transitionName={moreTransitionName}
       onVisibleChange={setOpen}
-      overlayClassName={overlayClassName}
+      overlayClassName={classNames(overlayClassName, popupClassName)}
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
     >

diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
@@ -46,6 +46,7 @@ export interface TabNavListProps {
   onTabClick: (activeKey: string, e: React.MouseEvent | React.KeyboardEvent) => void;
   onTabScroll?: OnTabScroll;
   children?: (node: React.ReactElement) => React.ReactElement;
+  popupClassName?: string;
 }
 
 interface ExtraContentProps {

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
@@ -65,6 +65,8 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
   moreIcon?: React.ReactNode;
   /** @private Internal usage. Not promise will rename in future */
   moreTransitionName?: string;
+
+  popupClassName?: string;
 }
 
 function parseTabList(children: React.ReactNode): Tab[] {
@@ -110,6 +112,7 @@ function Tabs(
     onChange,
     onTabClick,
     onTabScroll,
+    popupClassName,
     ...restProps
   }: TabsProps,
   ref: React.Ref<HTMLDivElement>,
@@ -214,6 +217,7 @@ function Tabs(
     extra: tabBarExtraContent,
     style: tabBarStyle,
     panes: children,
+    popupClassName,
   };
 
   if (renderTabBar) {

diff --git a/tests/overflow.test.tsx b/tests/overflow.test.tsx
@@ -374,4 +374,24 @@ describe('Tabs.Overflow', () => {
     });
     expect(wrapper.find('.rc-tabs-dropdown-menu').first().text()).not.toContain('miu');
   });
+
+  it('should support popupClassName', () => {
+    jest.useFakeTimers();
+    const wrapper = mount(getTabs({ popupClassName: 'custom-popup' }));
+
+    triggerResize(wrapper);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    wrapper.find('.rc-tabs-nav-more').simulate('mouseenter');
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.find('.rc-tabs-dropdown').first().getDOMNode().className).toContain(
+      'custom-popup',
+    );
+  });
 });