From eef4203e0b0a91e5116b8adee7a391d123a9fe85 Mon Sep 17 00:00:00 2001
From: rinick <rinick@gmail.com>
Date: Thu, 12 Nov 2020 01:28:45 -0800
Subject: [PATCH] add menuTab property to TabPane

---
 examples/overflow.tsx            | 7 +++++++
 src/TabNavList/OperationNode.tsx | 2 +-
 src/TabPanelList/TabPane.tsx     | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/examples/overflow.tsx b/examples/overflow.tsx
index 815a9ad7..6b3e8ac5 100644
--- a/examples/overflow.tsx
+++ b/examples/overflow.tsx
@@ -13,6 +13,13 @@ for (let i = 0; i < 50; i += 1) {
   );
 }
 
+// add a tab to demo the menuTab feature
+tabs.push(
+  <TabPane key={50} menuTab='Fancy Tab' tab={(<span><span style={{ 'color': 'red' }}> Fancy </span> Tab </span>)}>
+    Show different tab in the dropdown menu with the menuTab property.
+  </TabPane>,
+);
+
 export default () => {
   const [gutter, setGutter] = React.useState(true);
   const [destroy, setDestroy] = React.useState(false);
diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx
index 857ad944..533a5602 100644
--- a/src/TabNavList/OperationNode.tsx
+++ b/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>
diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx
index c21996ab..6f927147 100644
--- a/src/TabPanelList/TabPane.tsx
+++ b/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;