From ac16b6f89b18b25eedd2a8432b72ac5207c850b6 Mon Sep 17 00:00:00 2001
From: nhattien015 <tienit0105@gmail.com>
Date: Mon, 2 May 2022 20:59:21 +0700
Subject: [PATCH] feat: add allowScrollCrossTabOnTouchMove props into Tabs
 Component to improve UX on mobile device

---
 src/Tabs.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index a5d134cc..08beef03 100644
--- 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;
+
+  allowScrollCrossTabOnTouchMove?: boolean;
 }
 
 function parseTabList(children: React.ReactNode): Tab[] {
@@ -110,6 +112,7 @@ function Tabs(
     onChange,
     onTabClick,
     onTabScroll,
+    allowScrollCrossTabOnTouchMove,
     ...restProps
   }: TabsProps,
   ref: React.Ref<HTMLDivElement>,
@@ -215,12 +218,24 @@ function Tabs(
     style: tabBarStyle,
     panes: children,
   };
-
+  
   if (renderTabBar) {
     tabNavBar = renderTabBar(tabNavBarProps, TabNavList);
   } else {
     tabNavBar = <TabNavList {...tabNavBarProps} />;
   }
+  
+  useEffect(() => {
+    if(allowScrollCrossTabOnTouchMove){
+      const rcTabsNav : Element | undefined = document.getElementsByClassName('rc-tabs-nav')[0];
+      if(rcTabsNav){
+        rcTabsNav.addEventListener('touchmove', function(ev){
+          ev.stopPropagation();
+        })
+      }
+    }
+      
+  }, []);
 
   return (
     <TabContext.Provider value={{ tabs, prefixCls }}>