feat: Support menuTab

README.md

@@ -105,6 +105,7 @@ React.render(
 | key | string | - | corresponding to activeKey, should be unique |
 | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
 | tab | ReactNode | - | current tab's title corresponding to current tabPane |
+| menuTab | ReactNode | - | Tab title in dropdown menu |
 | closeIcon | ReactNode | - | Config close icon |
 
 ## Development

examples/mix.tsx

@@ -7,7 +7,13 @@ function getTabPanes(count = 50) {
   const tabs: React.ReactElement[] = [];
   for (let i = 0; i < count; i += 1) {
     tabs.push(
-      <TabPane key={i} tab={`Tab ${i}`} disabled={i === 3} closable={i === 5 ? false : undefined}>
+      <TabPane
+        key={i}
+        tab={`Tab ${i}`}
+        menuTab={i === 0 ? 'FIRST ONE!' : null}
+        disabled={i === 3}
+        closable={i === 5 ? false : undefined}
+      >
         Content of {i}
       </TabPane>,
     );

src/TabNavList/OperationNode.tsx

@@ -73,7 +73,7 @@ function OperationNode(
           aria-controls={id && `${id}-panel-${tab.key}`}
           disabled={tab.disabled}
         >
-          {tab.tab}
+          {tab.menuTab ?? tab.tab}
         </MenuItem>
       ))}
     </Menu>
@@ -149,8 +149,8 @@ function OperationNode(
   }
 
   const overlayClassName = classNames({
-    [`${dropdownPrefix}-rtl`]: rtl
-  })
+    [`${dropdownPrefix}-rtl`]: rtl,
+  });
 
   const moreNode: React.ReactElement = mobile ? null : (
     <Dropdown

src/TabPanelList/TabPane.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 export interface TabPaneProps {
   tab?: React.ReactNode;
+  menuTab?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;

tests/common/util.tsx

@@ -62,7 +62,7 @@ export function getTransformY(wrapper: ReactWrapper) {
   return Number(match[1]);
 }
 
-export function getTabs(props: TabsProps = null) {
+export function getTabs(props: TabsProps = null, moreTabs?: React.ReactNode) {
   return (
     <Tabs {...props}>
       <TabPane tab="light" key="light">
@@ -80,6 +80,7 @@ export function getTabs(props: TabsProps = null) {
       <TabPane tab="miu" key="miu">
         Miu
       </TabPane>
+      {moreTabs}
     </Tabs>
   );
 }

tests/overflow.test.tsx

@@ -88,6 +88,35 @@ describe('Tabs.Overflow', () => {
     jest.useRealTimers();
   });
 
+  it('menuTab', () => {
+    jest.useFakeTimers();
+    const wrapper = mount(
+      getTabs(
+        null,
+        <TabPane key="menu" tab="Menu" menuTab="Tab In Menu">
+          Test
+        </TabPane>,
+      ),
+    );
+
+    triggerResize(wrapper);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // Click to open
+    wrapper.find('.rc-tabs-nav-more').simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(
+      wrapper
+        .find('.rc-tabs-dropdown li')
+        .last()
+        .text(),
+    ).toEqual('Tab In Menu');
+  });
+
   [KeyCode.SPACE, KeyCode.ENTER].forEach(code => {
     it(`keyboard with select keycode: ${code}`, () => {
       jest.useFakeTimers();