@stakefish/ui
Version:
<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>
184 lines (181 loc) • 7.62 kB
JavaScript
import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useMediaQuery from '@mui/material/useMediaQuery';
import { styled, useTheme } from '@mui/material/styles';
import MuiBox from '@mui/material/Box';
import MuiFade from '@mui/material/Fade';
import MuiModal from '@mui/material/Modal';
import Backdrop from '@mui/material/Backdrop';
import Container from './Container.js';
import IconButton from './IconButton.js';
import boxShadow from '../theme/boxShadow.js';
import '@mui/material/IconButton';
import './Icon.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
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 = styled(MuiBox)(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: boxShadow.lg,
borderRadius: sizeLevelMap[size] === SizeLevel.Large ? theme.borders.radius.xl1 : theme.borders.radius.sm,
padding: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 8 : 4)
},
_b[theme.breakpoints.down("sm")] = {
padding: theme.spacing(2),
width: "calc(100vw - ".concat(theme.spacing(2), ")"),
maxHeight: "calc(100vh - ".concat(theme.spacing(8), ")"),
bottom: theme.spacing(1)
},
_b);
});
var CloseButton = styled(MuiBox)(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 = styled(MuiModal)(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 = styled(MuiFade)({
// 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 = styled(MuiBox)(function (_a) {
var theme = _a.theme, $scrollable = _a.$scrollable;
return ({
overflow: $scrollable ? "auto" : "unset",
maxHeight: "calc(100vh - ".concat(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;
var theme = useTheme();
var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
var ModalContent = function () { return (jsxs(Paper, __assign({ size: size }, { children: [closeButton && (jsx(CloseButton, __assign({ size: size }, { children: jsx(IconButton, { iconProps: {
iconKey: typeof closeButton !== "string" ? "closeCircle" : closeButton,
size: sizeLevelMap[size] === SizeLevel.Large && !isMobile ? "md" : "sm",
color: "secondary"
}, onClick: function (event) {
if (onClose)
onClose(event, "escapeKeyDown");
} }, void 0) }), void 0)), jsx(Content, __assign({ "$scrollable": scrollable }, { children: children }), void 0)] }), void 0)); };
if (size !== "safeArea")
return jsx(ModalContent, {}, void 0);
return (jsx(Container, { children: 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 = __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 (jsx(StyledModal, __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, BackdropProps: __assign({ timeout: 500 }, backdrop) }, { children: jsx(Fade, __assign({ in: open }, { children: jsx("div", { children: jsx(BoxWrapper, __assign({ size: size, scrollable: scrollable, onClose: handleClose }, props), void 0) }, void 0) }), void 0) }), void 0));
};
export { Modal as default };