@yosgo/swap-ui 1.0.129 → 1.0.130

package/build/index.esm.js

@@ -1,4 +1,4 @@
-import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Menu as Menu$1, MenuItem as MenuItem$1, Divider, Fade, Paper as Paper$1, TextField as TextField$1, Dialog, Modal as Modal$1, Breadcrumbs, Slide, FormControl, InputLabel, Select as Select$1, CssBaseline, Box, useTheme as useTheme$1, makeStyles as makeStyles$1, useMediaQuery, FormControlLabel, TabScrollButton, OutlinedInput, FormHelperText, ListItemIcon, Backdrop, fade as fade$1, Popper as Popper$1, InputBase, Grow } from '@material-ui/core';
+import { AppBar, Toolbar, Container as Container$1, Grid, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Menu as Menu$1, MenuItem as MenuItem$1, Divider, Fade, Paper as Paper$1, TextField as TextField$1, Dialog, Modal as Modal$1, Breadcrumbs, Slide, FormControl, InputLabel, Select as Select$1, CssBaseline, Box, useTheme as useTheme$1, makeStyles as makeStyles$1, useMediaQuery, FormControlLabel, OutlinedInput, FormHelperText, ListItemIcon, Backdrop, fade as fade$1, Popper as Popper$1, InputBase, Grow } from '@material-ui/core';
 export { CssBaseline } from '@material-ui/core';
 import React__default, { useEffect, useState, Component as Component$1, forwardRef, useRef, useLayoutEffect as useLayoutEffect$1, useCallback, createElement, createContext, useContext, useMemo, Fragment as Fragment$1 } from 'react';
 import styled from 'styled-components';
@@ -2991,6 +2991,13 @@ var useStyles$5 = makeStyles$1(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"]);
@@ -2999,23 +3006,30 @@ var SegmentedTabs = function (_a) {
         slide: slide,
     };
     var classes = useStyles$5(styleProps);
+    var tabsRef = useRef(null);
+    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(TabScrollButton, __assign({}, props));
-            }
-        } }), children));
+            scrollButtons: classes.scrollButtons,
+        }, indicatorColor: "primary", ref: tabsRef }), children));
 };
 
 function TabPanel(props) {