From 273bf5d9da9a65d8ddf574c27a05e7baef680aec Mon Sep 17 00:00:00 2001
From: Hom <yanzhihong23@qq.com>
Date: Fri, 25 Feb 2022 20:47:00 +0800
Subject: [PATCH] feat: make network tabs scrollable (#5732)

* feat: make network tabs scrollable

* feat: add scrollable prop for AbstractTab

* fix: typo
---
 .../src/components/shared/AbstractTab.tsx     | 11 ++++++----
 .../mask/src/components/shared/NetworkTab.tsx | 20 +++++++++++++++----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/mask/src/components/shared/AbstractTab.tsx b/packages/mask/src/components/shared/AbstractTab.tsx
index 79bd3fe1f802..649d256897dc 100644
--- a/packages/mask/src/components/shared/AbstractTab.tsx
+++ b/packages/mask/src/components/shared/AbstractTab.tsx
@@ -35,13 +35,14 @@ export interface AbstractTabProps
     margin?: true | 'top' | 'bottom'
     height?: number | string
     hasOnlyOneChild?: boolean
+    scrollable?: boolean
 }
 
 export default function AbstractTab(props: AbstractTabProps) {
-    const { tabs, state, index, height = 200, hasOnlyOneChild = false } = props
+    const { tabs, state, index, height = 200, hasOnlyOneChild = false, scrollable = false } = props
     const classes = useStylesExtends(useStyles(), props)
     const [value, setValue] = state ?? [undefined, undefined]
-    const tabIndicatorStyle = tabs.length ? { width: 100 / tabs.length + '%' } : undefined
+    const tabIndicatorStyle = tabs.length && !scrollable ? { width: 100 / tabs.length + '%' } : undefined
 
     return (
         <>
@@ -53,10 +54,12 @@ export default function AbstractTab(props: AbstractTabProps) {
                         flexContainer: classes.flexContainer,
                     }}
                     value={index ? index : value ? value : 0}
-                    TabIndicatorProps={{ style: tabIndicatorStyle }}
-                    variant="fullWidth"
                     indicatorColor="primary"
                     textColor="primary"
+                    variant={scrollable ? 'scrollable' : 'fullWidth'}
+                    TabIndicatorProps={{ style: tabIndicatorStyle }}
+                    scrollButtons={scrollable}
+                    allowScrollButtonsMobile={scrollable}
                     onChange={(_: React.SyntheticEvent, newValue: number) => setValue?.(newValue)}>
                     {tabs.map((tab, i) => (
                         <Tab
diff --git a/packages/mask/src/components/shared/NetworkTab.tsx b/packages/mask/src/components/shared/NetworkTab.tsx
index aed9e83c8444..6087c1306c27 100644
--- a/packages/mask/src/components/shared/NetworkTab.tsx
+++ b/packages/mask/src/components/shared/NetworkTab.tsx
@@ -19,16 +19,27 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
     },
     tabs: {
         '& .MuiTabs-flexContainer': {
-            display: 'grid',
-            gridTemplateColumns: Array(props.chainLength)
-                .fill(100 / props.chainLength + '%')
-                .join(' '),
             backgroundColor: theme.palette.background.paper,
         },
         '& .Mui-selected': {
             color: '#ffffff',
             backgroundColor: `${theme.palette.primary.main}!important`,
         },
+        '& .MuiTabs-scroller': {
+            margin: '0 1px',
+        },
+        '& .MuiTabs-scrollButtons': {
+            width: 'unset',
+            backgroundColor: !props.isDashboard
+                ? `${theme.palette.background.default}!important`
+                : `${MaskColorVar.primaryBackground2}!important`,
+            '&.Mui-disabled': {
+                opacity: 1,
+                '& svg': {
+                    opacity: 0.3,
+                },
+            },
+        },
     },
 }))
 
@@ -52,6 +63,7 @@ export function NetworkTab(props: NetworkTabProps) {
         index: chains.indexOf(chainId),
         classes,
         hasOnlyOneChild: true,
+        scrollable: true,
     }
 
     return <AbstractTab {...tabProps} />