@vlinderclimate/net-zero-ui
Version:
<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>
197 lines (190 loc) • 8.81 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var useMediaQuery = require('@mui/material/useMediaQuery');
var styles = require('@mui/material/styles');
var MuiBox = require('@mui/material/Box');
var MuiFade = require('@mui/material/Fade');
var MuiModal = require('@mui/material/Modal');
var Backdrop = require('@mui/material/Backdrop');
var components_Container = require('./Container.js');
var components_IconButton = require('./IconButton.js');
var theme_boxShadow = require('../theme/boxShadow.js');
require('@mui/material/IconButton');
require('./Icon.js');
require('../icons/ArrowLeft.js');
require('../icons/ArrowRight.js');
require('../icons/CheckCircle.js');
require('../icons/CloseCircle.js');
require('../icons/InfoCircle.js');
require('../icons/ErrorCircle.js');
require('../icons/Attention.js');
require('../icons/HelpCircle.js');
require('../icons/Lock.js');
require('../icons/Delete.js');
require('../icons/TriangleRight.js');
require('../icons/TriangleLeft.js');
require('../icons/TriangleUp.js');
require('../icons/TriangleDown.js');
require('../icons/Download.js');
require('../icons/Key.js');
require('../icons/Edit.js');
require('../icons/Expand.js');
require('../icons/Collapse.js');
require('../icons/Success.js');
require('../icons/Fail.js');
require('../icons/Loading.js');
require('../icons/Check.js');
require('../icons/ChevronLeft.js');
require('../icons/ChevronRight.js');
require('../icons/Plus.js');
require('../icons/Minus.js');
require('../icons/Link.js');
require('../icons/Copy.js');
require('../icons/Medium.js');
require('../icons/Twitter.js');
require('../icons/Telegram.js');
require('../icons/Sort.js');
require('../icons/Close.js');
require('../icons/Search.js');
require('../icons/Instagram.js');
require('../icons/LinkedIn.js');
require('../icons/Reddit.js');
require('../icons/YouTube.js');
require('../icons/Update.js');
require('../icons/Facebook.js');
require('../icons/Cart.js');
require('../icons/Menu.js');
require('../icons/ShowPassword.js');
require('../icons/HidePassword.js');
require('../icons/Collection.js');
require('../icons/Sprout.js');
require('../icons/Verify.js');
require('../icons/User.js');
require('../icons/Convert.js');
require('../icons/Deposit.js');
require('../icons/Send.js');
require('../icons/Receive.js');
require('../icons/To.js');
require('../icons/Withdraw.js');
require('../icons/Clock.js');
require('../icons/Play.js');
require('../icons/Help.js');
require('../icons/CloseSmall.js');
require('../icons/MinusSmall.js');
require('../icons/PlusSmall.js');
require('../icons/Dropdown.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
var MuiBox__default = /*#__PURE__*/_interopDefaultLegacy(MuiBox);
var MuiFade__default = /*#__PURE__*/_interopDefaultLegacy(MuiFade);
var MuiModal__default = /*#__PURE__*/_interopDefaultLegacy(MuiModal);
var Backdrop__default = /*#__PURE__*/_interopDefaultLegacy(Backdrop);
var sizeMap = {
xs: 440,
sm: 590,
md: 700,
safeArea: "100%",
fullScreen: "100%"
};
var SizeLevel;
(function (SizeLevel) {
SizeLevel[SizeLevel["Regular"] = 0] = "Regular";
SizeLevel[SizeLevel["Large"] = 1] = "Large";
})(SizeLevel || (SizeLevel = {}));
var sizeLevelMap = {
xs: SizeLevel.Regular,
sm: SizeLevel.Regular,
md: SizeLevel.Regular,
safeArea: SizeLevel.Large,
fullScreen: SizeLevel.Large
};
var defaultSize = "md";
var Paper = styles.styled(MuiBox__default["default"])(function (_a) {
var _b;
var theme = _a.theme, size = _a.size;
return (_b = {
position: "relative",
width: sizeMap[size],
maxWidth: "100%",
backgroundColor: theme.palette.gray.white,
boxShadow: theme_boxShadow["default"].md,
borderRadius: theme.borders.radius.xlarge,
padding: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 8 : 4)
},
_b[theme.breakpoints.down("sm")] = {
padding: theme.spacing(2),
width: "calc(100vw - " + theme.spacing(2) + ")",
maxHeight: "calc(100vh - " + theme.spacing(8) + ")",
bottom: theme.spacing(2)
},
_b);
});
var CloseButton = styles.styled(MuiBox__default["default"])(function (_a) {
var _b;
var theme = _a.theme, size = _a.size;
return (_b = {
position: "absolute",
top: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 2.5 : 1),
right: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 2.5 : 1)
},
_b[theme.breakpoints.down("sm")] = {
top: theme.spacing(1),
right: theme.spacing(1)
},
_b);
});
var StyledModal = styles.styled(MuiModal__default["default"])(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
display: "flex",
alignItems: "center",
justifyContent: "center"
},
_b[theme.breakpoints.down("sm")] = {
alignItems: "flex-end",
width: "100vw"
},
_b);
});
var Fade = styles.styled(MuiFade__default["default"])({
// We disable the focus ring for mouse, touch and keyboard users.
// At some point, it would be better to keep it for keyboard users.
// :focus-ring CSS pseudo-class will help.
outline: "none !important"
});
var Content = styles.styled(MuiBox__default["default"])(function (_a) {
var theme = _a.theme, $scrollable = _a.$scrollable;
return ({
overflow: $scrollable ? "auto" : "unset",
maxHeight: "calc(100vh - " + theme.spacing(10) + ")"
});
});
var BoxWrapper = function (_a) {
var _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.closeButton, closeButton = _c === void 0 ? false : _c, _d = _a.scrollable, scrollable = _d === void 0 ? false : _d, onClose = _a.onClose, children = _a.children, props = tslib_es6.__rest(_a, ["size", "closeButton", "scrollable", "onClose", "children"]);
var theme = styles.useTheme();
var isMobile = useMediaQuery__default["default"](theme.breakpoints.down("sm"));
var ModalContent = function () { return (jsxRuntime.jsxs(Paper, tslib_es6.__assign({ size: size }, props, { children: [closeButton && (jsxRuntime.jsx(CloseButton, tslib_es6.__assign({ size: size }, { children: jsxRuntime.jsx(components_IconButton["default"], { iconProps: {
iconKey: typeof closeButton !== "string" ? "close" : closeButton,
size: sizeLevelMap[size] === SizeLevel.Large && !isMobile ? "md" : "sm",
color: "secondary"
}, onClick: function (event) {
if (onClose)
onClose(event, "escapeKeyDown");
} }, void 0) }), void 0)), jsxRuntime.jsx(Content, tslib_es6.__assign({ "$scrollable": scrollable }, { children: children }), void 0)] }), void 0)); };
if (size !== "safeArea")
return jsxRuntime.jsx(ModalContent, {}, void 0);
return (jsxRuntime.jsx(components_Container["default"], { children: jsxRuntime.jsx(ModalContent, {}, void 0) }, void 0));
};
var Modal = function (_a) {
var open = _a.open, onClose = _a.onClose, titleId = _a.titleId, descriptionId = _a.descriptionId, _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.scrollable, scrollable = _c === void 0 ? false : _c, transparentBackdrop = _a.transparentBackdrop, props = tslib_es6.__rest(_a, ["open", "onClose", "titleId", "descriptionId", "size", "scrollable", "transparentBackdrop"]);
var handleClose = function (event, reason) {
if (onClose)
onClose(event, reason);
};
var backdrop = transparentBackdrop ? { sx: { background: "transparent" } } : undefined;
return (jsxRuntime.jsx(StyledModal, tslib_es6.__assign({ "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : undefined, "aria-describedby": descriptionId !== null && descriptionId !== void 0 ? descriptionId : undefined, open: open, onClose: handleClose, closeAfterTransition: true, BackdropComponent: Backdrop__default["default"], BackdropProps: tslib_es6.__assign({ timeout: 500 }, backdrop) }, { children: jsxRuntime.jsx(Fade, tslib_es6.__assign({ in: open }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(BoxWrapper, tslib_es6.__assign({ size: size, scrollable: scrollable, onClose: handleClose }, props), void 0) }, void 0) }), void 0) }), void 0));
};
exports["default"] = Modal;