@onwave/ui
Version:
onwave ui library
59 lines • 5.04 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from "@emotion/styled";
import React, { useState } from "react";
import { BreakPoints } from "../../../core";
import { useDom } from "../../../utils";
import { OverlaidPortal } from "../OverlaidPortal";
export var ModalBottomSheet = function (_a) {
var children = _a.children, className = _a.className, onClose = _a.onClose, opener = _a.opener, title = _a.title;
var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
var canUseDom = useDom();
var showModal = function () {
setIsOpen(true);
};
var hideModal = function () {
setIsOpen(false);
};
var blockPropagation = function (e) {
e.stopPropagation();
};
var handleCloseModal = function () {
if (opener) {
hideModal();
}
onClose ? onClose() : hideModal();
};
if (!canUseDom) {
return opener !== null && opener !== void 0 ? opener : React.createElement(React.Fragment, null);
}
var clonedOpener = opener &&
React.cloneElement(opener, {
onClick: showModal,
});
return (React.createElement(React.Fragment, null,
clonedOpener,
React.createElement(StyledOverlaidPortal, { isOpen: isOpen, onClose: handleCloseModal },
React.createElement(Dialog, { isOpen: isOpen, className: className, onClick: blockPropagation },
React.createElement(DialogHead, null,
React.createElement(DialogTitle, null, title)),
React.createElement(DialogBody, null, children)))));
};
var StyledOverlaidPortal = styled(OverlaidPortal)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: ", "\n opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n ", ";\n"], ["\n transition: ", "\n opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n ",
";\n"])), function (_a) {
var isOpen = _a.isOpen;
return !isOpen && "visibility 0s linear 225ms,";
}, BreakPoints.media.sm(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n justify-content: flex-end;\n "], ["\n justify-content: flex-end;\n "]))));
var Dialog = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 32px;\n width: 480px;\n max-height: 800px;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n ", ";\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n padding: 32px;\n width: 480px;\n max-height: 800px;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n ",
";\n ",
"\n"])), BreakPoints.media.sm(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: none;\n padding: 24px;\n padding-bottom: calc(env(safe-area-inset-bottom) + 24px);\n width: 100%;\n max-height: calc(100% - 48px);\n height: auto;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n transition: all 225ms ease-out;\n "], ["\n flex: none;\n padding: 24px;\n padding-bottom: calc(env(safe-area-inset-bottom) + 24px);\n width: 100%;\n max-height: calc(100% - 48px);\n height: auto;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n transition: all 225ms ease-out;\n "]))), function (_a) {
var isOpen = _a.isOpen;
return !isOpen && BreakPoints.media.sm(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n transform: translateY(100%);\n "], ["\n transform: translateY(100%);\n "])));
});
var DialogHead = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: none;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n"], ["\n flex: none;\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n"])));
var DialogTitle = styled.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: auto;\n white-space: pre-line;\n word-break: break-all;\n font-size: 1.8rem;\n line-height: 1;\n margin-bottom: 12px;\n"], ["\n flex: auto;\n white-space: pre-line;\n word-break: break-all;\n font-size: 1.8rem;\n line-height: 1;\n margin-bottom: 12px;\n"])));
var DialogBody = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: auto;\n overflow-y: auto;\n overflow-x: hidden;\n word-break: break-all;\n overscroll-behavior: contain;\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n flex: auto;\n overflow-y: auto;\n overflow-x: hidden;\n word-break: break-all;\n overscroll-behavior: contain;\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
//# sourceMappingURL=index.js.map