@popsure/dirty-swan 0.28.8 → 0.28.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +12 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/modal/hooks/useOnClose.d.ts +5 -3
- package/dist/esm/components/modal/bottomModal/index.js +3 -3
- package/dist/esm/components/modal/bottomModal/index.js.map +1 -1
- package/dist/esm/components/modal/bottomOrRegularModal/index.js +1 -1
- package/dist/esm/components/modal/regularModal/index.js +4 -4
- package/dist/esm/components/modal/regularModal/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/components/modal/hooks/useOnClose.d.ts +5 -3
- package/dist/esm/{useOnClose-54f9e6b9.js → useOnClose-d818a54f.js} +8 -2
- package/dist/esm/useOnClose-d818a54f.js.map +1 -0
- package/dist/index.css +24 -0
- package/dist/index.css.map +1 -1
- package/dist/lib/scss/private/base/_typography.scss +32 -0
- package/package.json +1 -1
- package/src/lib/components/modal/bottomModal/index.tsx +7 -2
- package/src/lib/components/modal/hooks/useOnClose.ts +17 -2
- package/src/lib/components/modal/regularModal/index.tsx +11 -4
- package/src/lib/components/modal/regularModal/style.module.scss +1 -1
- package/src/lib/scss/private/base/_typography.scss +32 -0
- package/dist/esm/useOnClose-54f9e6b9.js.map +0 -1
package/dist/cjs/index.js
CHANGED
|
@@ -8731,6 +8731,12 @@ var useOnClose = function (onClose, isOpen, dismissable) {
|
|
|
8731
8731
|
setIsClosing(false);
|
|
8732
8732
|
}, 300);
|
|
8733
8733
|
}, [setIsClosing, onClose]);
|
|
8734
|
+
var handleOnOverlayClick = require$$0.useCallback(function () {
|
|
8735
|
+
if (!dismissable) {
|
|
8736
|
+
return;
|
|
8737
|
+
}
|
|
8738
|
+
handleOnClose();
|
|
8739
|
+
}, [dismissable, handleOnClose]);
|
|
8734
8740
|
var handleEscKey = require$$0.useCallback(function (e) {
|
|
8735
8741
|
if (e.code !== 'Escape')
|
|
8736
8742
|
return;
|
|
@@ -8755,13 +8761,13 @@ var useOnClose = function (onClose, isOpen, dismissable) {
|
|
|
8755
8761
|
var handleContainerClick = function (e) {
|
|
8756
8762
|
e.stopPropagation();
|
|
8757
8763
|
};
|
|
8758
|
-
return { isClosing: isClosing, handleContainerClick: handleContainerClick, handleOnClose: handleOnClose };
|
|
8764
|
+
return { isClosing: isClosing, handleContainerClick: handleContainerClick, handleOnClose: handleOnClose, handleOnOverlayClick: handleOnOverlayClick };
|
|
8759
8765
|
};
|
|
8760
8766
|
|
|
8761
8767
|
var BottomModal = (function (_a) {
|
|
8762
8768
|
var title = _a.title, isOpen = _a.isOpen, children = _a.children, onClose = _a.onClose, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c;
|
|
8763
8769
|
var _d = require$$0.useState(0), containerXOffset = _d[0], setContainerXOffset = _d[1];
|
|
8764
|
-
var _e = useOnClose(onClose, isOpen, dismissible), isClosing = _e.isClosing, handleContainerClick = _e.handleContainerClick, handleOnClose = _e.handleOnClose;
|
|
8770
|
+
var _e = useOnClose(onClose, isOpen, dismissible), isClosing = _e.isClosing, handleContainerClick = _e.handleContainerClick, handleOnClose = _e.handleOnClose, handleOnOverlayClick = _e.handleOnOverlayClick;
|
|
8765
8771
|
var containerRef = require$$0.useCallback(function (node) {
|
|
8766
8772
|
if (node !== null) {
|
|
8767
8773
|
setContainerXOffset(Math.max(window.innerHeight * 0.1, window.innerHeight - node.getBoundingClientRect().height));
|
|
@@ -8770,12 +8776,12 @@ var BottomModal = (function (_a) {
|
|
|
8770
8776
|
if (!isOpen) {
|
|
8771
8777
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
8772
8778
|
}
|
|
8773
|
-
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$j['overlay--close'] : styles$j.overlay, onClick:
|
|
8779
|
+
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$j['overlay--close'] : styles$j.overlay, onClick: handleOnOverlayClick }, { children: jsxRuntime.jsxs("div", __assign({ className: (isClosing ? styles$j['container--close'] : styles$j.container) + " " + className, ref: containerRef, style: { top: containerXOffset + "px" }, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$j.header }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-h4 " + styles$j.title }, { children: title }), void 0),
|
|
8774
8780
|
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$j.close, onClick: handleOnClose }, { children: jsxRuntime.jsx("img", { src: imageClose$1, alt: "Close" }, void 0) }), void 0))] }), void 0),
|
|
8775
8781
|
jsxRuntime.jsx("div", __assign({ className: styles$j.content }, { children: children }), void 0)] }), void 0) }), void 0));
|
|
8776
8782
|
});
|
|
8777
8783
|
|
|
8778
|
-
var css_248z$j = "@keyframes style-module_fade-in__nLzzO {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n}\n@keyframes style-module_fade-out__IuSV7 {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n}\n@keyframes style-module_appear-in__2ZMqz {\n 0% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n}\n@keyframes style-module_disappear-out__38TSV {\n 0% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n 100% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n}\n.style-module_overlay__1Zbce, .style-module_overlay--close__2dytn {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__nLzzO 0.3s both;\n}\n.style-module_overlay--close__2dytn {\n animation-delay: 0.1s;\n animation: style-module_fade-out__IuSV7 0.3s both;\n}\n\n.style-module_container__1XZj_, .style-module_container--close__3UYsJ {\n position: relative;\n display: flex;\n align-items: center;\n max-width: 592px;\n width: 100%;\n min-height: 100%;\n margin: 0 auto;\n animation-name: style-module_appear-in__2ZMqz;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n.style-module_container--close__3UYsJ {\n animation-name: style-module_disappear-out__38TSV;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_body__lbUih {\n background-color: white;\n border-radius: 8px;\n margin:
|
|
8784
|
+
var css_248z$j = "@keyframes style-module_fade-in__nLzzO {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n}\n@keyframes style-module_fade-out__IuSV7 {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n}\n@keyframes style-module_appear-in__2ZMqz {\n 0% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n}\n@keyframes style-module_disappear-out__38TSV {\n 0% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n 100% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n}\n.style-module_overlay__1Zbce, .style-module_overlay--close__2dytn {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__nLzzO 0.3s both;\n}\n.style-module_overlay--close__2dytn {\n animation-delay: 0.1s;\n animation: style-module_fade-out__IuSV7 0.3s both;\n}\n\n.style-module_container__1XZj_, .style-module_container--close__3UYsJ {\n position: relative;\n display: flex;\n align-items: center;\n max-width: 592px;\n width: 100%;\n min-height: 100%;\n margin: 0 auto;\n animation-name: style-module_appear-in__2ZMqz;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n.style-module_container--close__3UYsJ {\n animation-name: style-module_disappear-out__38TSV;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_body__lbUih {\n background-color: white;\n border-radius: 8px;\n margin: 80px auto;\n}\n\n.style-module_header__2oEKp {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 0 24px;\n}\n\n.style-module_close__p3Axi {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}";
|
|
8779
8785
|
var styles$i = {"overlay":"style-module_overlay__1Zbce","overlay--close":"style-module_overlay--close__2dytn","fade-in":"style-module_fade-in__nLzzO","fade-out":"style-module_fade-out__IuSV7","container":"style-module_container__1XZj_","container--close":"style-module_container--close__3UYsJ","appear-in":"style-module_appear-in__2ZMqz","disappear-out":"style-module_disappear-out__38TSV","body":"style-module_body__lbUih","header":"style-module_header__2oEKp","close":"style-module_close__p3Axi"};
|
|
8780
8786
|
styleInject(css_248z$j);
|
|
8781
8787
|
|
|
@@ -8783,11 +8789,11 @@ var imageClose = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%
|
|
|
8783
8789
|
|
|
8784
8790
|
var RegularModal = (function (_a) {
|
|
8785
8791
|
var title = _a.title, isOpen = _a.isOpen, children = _a.children, onClose = _a.onClose, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c;
|
|
8786
|
-
var _d = useOnClose(onClose, isOpen, dismissible), isClosing = _d.isClosing, handleContainerClick = _d.handleContainerClick, handleOnClose = _d.handleOnClose;
|
|
8792
|
+
var _d = useOnClose(onClose, isOpen, dismissible), isClosing = _d.isClosing, handleContainerClick = _d.handleContainerClick, handleOnClose = _d.handleOnClose, handleOnOverlayClick = _d.handleOnOverlayClick;
|
|
8787
8793
|
if (!isOpen) {
|
|
8788
8794
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
8789
8795
|
}
|
|
8790
|
-
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$i['overlay--close'] : styles$i.overlay, onClick:
|
|
8796
|
+
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$i['overlay--close'] : styles$i.overlay, onClick: handleOnOverlayClick }, { children: jsxRuntime.jsx("div", __assign({ className: (isClosing ? styles$i['container--close'] : styles$i.container) + " " + className }, { children: jsxRuntime.jsxs("div", __assign({ className: styles$i.body, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$i.header }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-h2 " + styles$i.title }, { children: title }), void 0),
|
|
8791
8797
|
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$i.close, onClick: handleOnClose }, { children: jsxRuntime.jsx("img", { src: imageClose, alt: "Close" }, void 0) }), void 0))] }), void 0), children] }), void 0) }), void 0) }), void 0));
|
|
8792
8798
|
});
|
|
8793
8799
|
|