@yosgo/swap-ui 1.0.139 → 1.0.141

package/build/index.js

@@ -664,7 +664,7 @@ var ModalOpenEffect = function (props) {
         React__default.createElement("div", null, props.children)))));
 };
 var SWAPModal = function (_a) {
-    var open = _a.open, title = _a.title, onClose = _a.onClose, helpText = _a.helpText, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, children = _a.children, steps = _a.steps, successMessage = _a.successMessage, errorMessage = _a.errorMessage, closeWindowOnSuccessMessage = _a.closeWindowOnSuccessMessage, reloadOnWindowClose = _a.reloadOnWindowClose;
+    var open = _a.open, title = _a.title, onClose = _a.onClose, helpText = _a.helpText, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, children = _a.children, steps = _a.steps, successMessage = _a.successMessage, errorMessage = _a.errorMessage, closeWindowOnSuccessMessage = _a.closeWindowOnSuccessMessage, reloadOnWindowClose = _a.reloadOnWindowClose, fullScreen = _a.fullScreen;
     var _b = React.useState(false), sm = _b[0], setSm = _b[1];
     var _c = React.useState(0), stepIndex = _c[0], setStepIndex = _c[1];
     var handleModalSize = function () {
@@ -725,7 +725,7 @@ var SWAPModal = function (_a) {
         React__default.createElement(core.Fade, { in: open, timeout: { enter: 300, exit: 300 } },
             React__default.createElement(SWAPModalWrap, { id: "modal_wrap_" + title },
                 React__default.createElement(ModalOpenEffect, { in: open, sm: sm },
-                    React__default.createElement(core.Paper, { className: "modal_inner", id: "modal_inner_" + title },
+                    React__default.createElement(core.Paper, { className: "modal_inner " + (fullScreen ? 'full_screen' : ''), id: "modal_inner_" + title },
                         React__default.createElement("div", { className: "modal_inner_header", id: "modal_header_" + title },
                             React__default.createElement(core.Container, { maxWidth: "lg" },
                                 React__default.createElement(SWAPSpace, { size: "m" }),
@@ -781,7 +781,7 @@ var SWAPModal = function (_a) {
                                             React__default.createElement(core.Button, { variant: "text", size: sm ? "medium" : "large", onClick: function () { return handleStepButton("next"); } }, steps[stepIndex].nextStepText || "下一步"))))),
                                 React__default.createElement(SWAPSpace, { size: "m" })))))))));
 };
-var SWAPModalWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"], ["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"])));
+var SWAPModalWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  .full_screen {\n    width: 100vw;\n    height: 100vh;\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"], ["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  .full_screen {\n    width: 100vw;\n    height: 100vh;\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"])));
 var templateObject_1$5;
 
 function objectToGetParams(object) {
@@ -7376,8 +7376,8 @@ var useStyles$f = core.makeStyles(function (theme) { return ({
         border: "unset",
         borderRadius: 12,
         margin: function (_a) {
-            var fullWidth = _a.fullWidth, match_XS = _a.match_XS;
-            return fullWidth ? 0 : match_XS ? "0px 24px" : "0px 16px";
+            var fullWidth = _a.fullWidth, fullScreen = _a.fullScreen, match_XS = _a.match_XS;
+            return (fullWidth || fullScreen) ? 0 : match_XS ? "0px 24px" : "0px 16px";
         },
     },
     backdrop: {
@@ -7385,36 +7385,44 @@ var useStyles$f = core.makeStyles(function (theme) { return ({
     },
     modal: {
         width: function (_a) {
-            var width = _a.width, size = _a.size;
-            return width
-                ? width
-                : size === "large"
-                    ? 800
-                    : size === "medium"
-                        ? 640
-                        : size === "small"
-                            ? 480
-                            : size === "extraSmall"
-                                ? 320
-                                : "100%";
+            var fullScreen = _a.fullScreen, width = _a.width, size = _a.size;
+            return fullScreen
+                ? "100vw"
+                : width
+                    ? width
+                    : size === "large"
+                        ? 800
+                        : size === "medium"
+                            ? 640
+                            : size === "small"
+                                ? 480
+                                : size === "extraSmall"
+                                    ? 320
+                                    : "100%";
         },
         maxWidth: function (_a) {
             var maxWidth = _a.maxWidth;
             return maxWidth;
         },
         borderRadius: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return fullWidth ? "12px 12px 0px 0px" : 12;
+            var fullWidth = _a.fullWidth, fullScreen = _a.fullScreen;
+            return fullScreen ? 0 : fullWidth ? "12px 12px 0px 0px" : 12;
         },
         border: "unset",
-        boxShadow: theme.boxShadow.l,
+        boxShadow: function (_a) {
+            var fullScreen = _a.fullScreen;
+            return fullScreen ? "unset" : theme.boxShadow.l;
+        },
         display: "flex",
         flexDirection: "column",
         outline: 0,
     },
     head: {
         height: "100%",
-        borderRadius: "12px 12px 0px 0px",
+        borderRadius: function (_a) {
+            var fullScreen = _a.fullScreen;
+            return fullScreen ? 0 : "12px 12px 0px 0px";
+        },
         padding: function (_a) {
             var headpadding = _a.headpadding, mobile = _a.mobile, disCloseIcon = _a.disCloseIcon, helpText = _a.helpText, multiline = _a.multiline;
             return headpadding
@@ -7694,8 +7702,8 @@ var useStyles$f = core.makeStyles(function (theme) { return ({
     body: {
         transition: "all 0.2s ease-in-out",
         height: function (_a) {
-            var height = _a.height;
-            return (height ? height : "100%");
+            var fullScreen = _a.fullScreen, height = _a.height;
+            return fullScreen ? "calc(100vh - 146px)" : height ? height : "100%";
         },
         padding: function (_a) {
             var bodyPadding = _a.bodyPadding, mobile = _a.mobile;
@@ -7707,8 +7715,14 @@ var useStyles$f = core.makeStyles(function (theme) { return ({
             return (onExit ? "none" : "unset");
         },
         maxHeight: function (_a) {
-            var bodyMaxHeight = _a.bodyMaxHeight, fullWidth = _a.fullWidth, clientHeight = _a.clientHeight;
-            return bodyMaxHeight ? bodyMaxHeight : fullWidth ? clientHeight : "unset";
+            var bodyMaxHeight = _a.bodyMaxHeight, fullWidth = _a.fullWidth, fullScreen = _a.fullScreen, clientHeight = _a.clientHeight;
+            return fullScreen
+                ? "calc(100vh - 146px)"
+                : bodyMaxHeight
+                    ? bodyMaxHeight
+                    : fullWidth
+                        ? clientHeight
+                        : "unset";
         },
         overflowY: function (_a) {
             var onExit = _a.onExit;
@@ -7762,7 +7776,7 @@ var useStyles$f = core.makeStyles(function (theme) { return ({
     },
 }); });
 var Modal = React__default.forwardRef(function (props, ref) {
-    var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer;
+    var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, fullScreen = props.fullScreen, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer;
     var _a = React.useState(0), clientHeight = _a[0], setClientHeight = _a[1];
     var _b = React.useState(0), scorllbarWidth = _b[0], setScorllbarWidth = _b[1];
     React.useEffect(function () {
@@ -7788,6 +7802,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
     var match_XS = useBreakpoints("xs");
     var classes = useStyles$f({
         fullWidth: fullWidth,
+        fullScreen: fullScreen,
         match_XS: match_XS,
         width: width,
         size: size,
@@ -7814,7 +7829,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
             className: classes.backdrop,
             style: { overflow: "auto", WebkitOverflowScrolling: "touch" },
         } },
-        React__default.createElement(ModalTransitionEffect, { in: open, slide: fullWidth, style: {
+        React__default.createElement(ModalTransitionEffect, { in: open, slide: fullWidth || fullScreen, style: {
                 outline: "none",
                 transition: "ease-in-out",
                 width: "100%",
@@ -7866,7 +7881,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
                                     : mobile
                                         ? -16
                                         : -24,
-                                position: bodyMaxHeight || height || (mobile && fullWidth)
+                                position: bodyMaxHeight || height || (mobile && fullWidth) || fullScreen
                                     ? "fixed"
                                     : "absolute",
                                 width: width
@@ -7880,13 +7895,15 @@ var Modal = React__default.forwardRef(function (props, ref) {
                                                 : size === "extraSmall"
                                                     ? 320
                                                     : "100%",
-                                height: bodyMaxHeight
-                                    ? bodyMaxHeight
-                                    : height
-                                        ? height
-                                        : mobile && fullWidth
-                                            ? clientHeight
-                                            : "100%",
+                                height: fullScreen
+                                    ? "100vh"
+                                    : bodyMaxHeight
+                                        ? bodyMaxHeight
+                                        : height
+                                            ? height
+                                            : mobile && fullWidth
+                                                ? clientHeight
+                                                : "100%",
                                 background: "black",
                                 opacity: 0.5,
                                 zIndex: 10,