@yosgo/swap-ui 1.0.129 → 1.0.130

package/build/index.js

@@ -2996,6 +2996,13 @@ var useStyles$5 = core.makeStyles(function (theme) { return ({
         height: props.slide ? "100%" : 0,
         backgroundColor: theme.primary.primary50,
     }); },
+    scrollButtons: {
+        width: 32,
+        overflow: "hidden",
+        "&.Mui-disabled": {
+            width: 4,
+        },
+    },
 }); });
 var SegmentedTabs = function (_a) {
     var children = _a.children, width = _a.width, slide = _a.slide, other = __rest(_a, ["children", "width", "slide"]);
@@ -3004,23 +3011,30 @@ var SegmentedTabs = function (_a) {
         slide: slide,
     };
     var classes = useStyles$5(styleProps);
+    var tabsRef = React.useRef(null);
+    React.useEffect(function () {
+        if (tabsRef &&
+            tabsRef.current &&
+            other.variant &&
+            other.variant === "scrollable") {
+            //確保 scrollable tabs 的 selected tab 能夠顯示出來
+            var el_1 = tabsRef.current.querySelectorAll(".MuiButtonBase-root.MuiTab-root.MuiTab-textColorInherit.Mui-selected")[0];
+            if (el_1) {
+                setTimeout(function () {
+                    el_1.scrollIntoView({
+                        behavior: "smooth",
+                        block: "end",
+                        inline: "nearest",
+                    });
+                }, 1000);
+            }
+        }
+    }, []);
     return (React__default.createElement(MaterialTabs, __assign({}, other, { classes: {
             root: classes.root,
             indicator: classes.indicator,
-        }, indicatorColor: "primary", ScrollButtonComponent: function (props) {
-            //自訂按鈕，disabled 時不顯示按鈕
-            console.log(props);
-            if (props.disabled === true) {
-                return (React__default.createElement("div", { style: {
-                        width: "5px",
-                        transition: "width 1s",
-                        transitionTimingFunction: "ease-in-out",
-                    } }));
-            }
-            else {
-                return React__default.createElement(core.TabScrollButton, __assign({}, props));
-            }
-        } }), children));
+            scrollButtons: classes.scrollButtons,
+        }, indicatorColor: "primary", ref: tabsRef }), children));
 };
 
 function TabPanel(props) {