@cimpress/react-components
Version:
React components to support the MCP styleguide
236 lines (230 loc) • 8.53 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisplayModal = void 0;
const react_1 = __importStar(require("react"));
const react_dom_1 = __importDefault(require("react-dom"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("../theme/cvar"));
const breakpoint_1 = require("../breakpoint");
const internal_1 = require("../internal");
const colors_1 = require("../colors");
const defaultSizeStyles = (0, css_1.css) `
max-height: 72vh;
@media screen and (max-width: ${breakpoint_1.BREAKPOINT_S}) {
width: 100%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_S} + 1px)) and (max-width: ${breakpoint_1.BREAKPOINT_M}) {
width: 58%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_M} + 1px)) and (max-width: ${breakpoint_1.BREAKPOINT_L}) {
width: 50%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_L} + 1px)) {
width: 38%;
}
`;
const largeSizeStyles = (0, css_1.css) `
max-height: 84vh;
@media screen and (max-width: ${breakpoint_1.BREAKPOINT_S}) {
width: 100%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_S} + 1px)) and (max-width: ${breakpoint_1.BREAKPOINT_M}) {
width: 72%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_M} + 1px)) and (max-width: ${breakpoint_1.BREAKPOINT_L}) {
width: 60%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_L} + 1px)) {
width: 50%;
}
`;
const xLargeSizeStyles = (0, css_1.css) `
max-height: 96vh;
@media screen and (max-width: ${breakpoint_1.BREAKPOINT_S}) {
width: 100%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_S} + 1px)) and (max-width: ${breakpoint_1.BREAKPOINT_M}) {
width: 84%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_M} + 1px)) and (max-width: ${breakpoint_1.BREAKPOINT_L}) {
width: 72%;
}
@media screen and (min-width: calc(${breakpoint_1.BREAKPOINT_L} + 1px)) {
width: 72%;
}
`;
const modalDialogCss = (0, css_1.css) `
position: relative;
margin: 30px auto;
z-index: 1050;
`;
const modalBackdrop = (0, css_1.css) `
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
opacity: 0.5;
`;
const modalCss = (0, css_1.css) `
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
&.modal-enter,
&.modal-enter-active,
&.modal-enter-done {
display: block;
}
&.modal-enter > .fade-in {
opacity: 0;
transition: opacity 0.15s linear;
}
&.modal-enter.modal-enter-active > .fade-in,
&.modal-enter-done > .fade-in {
opacity: 0.5;
}
`;
const modalTitle = (0, css_1.css) `
font-size: 24px;
line-height: 1.3em;
font-weight: normal;
flex-grow: 1;
`;
const modalCloseButton = (0, css_1.css) `
color: ${(0, cvar_1.default)('color-icon-secondary')};
height: ${(0, cvar_1.default)('spacing-48')};
vertical-align: middle;
margin-top: -10px;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
-webkit-appearance: none;
appearance: none;
&:hover,
&:active {
color: shale;
opacity: 1;
}
`;
const modalHeaderCss = (0, css_1.css) `
background-color: ${(0, cvar_1.default)('color-background')};
border-bottom: none;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
`;
const getModalInteractionCss = (status) => {
let color = colors_1.white;
switch (status) {
case 'success': {
color = (0, cvar_1.default)('color-border-success');
break;
}
case 'danger': {
color = (0, cvar_1.default)('color-border-error');
break;
}
case 'warning': {
color = (0, cvar_1.default)('color-border-warning');
break;
}
case 'info': {
color = (0, cvar_1.default)('color-border-info');
break;
}
default: {
break;
}
}
return (0, css_1.css) `
border-top: 4px solid ${color};
`;
};
const modalContentCss = (0, css_1.css) `
background-color: ${(0, cvar_1.default)('color-background')};
border: 0;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
border-radius: 4px;
max-height: 90vh;
padding: ${(0, cvar_1.default)('spacing-24')};
`;
const modalBodyCss = (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-24')} 0;
overflow-y: auto;
flex-grow: 1;
`;
const modalFooterCss = (0, css_1.css) `
border-top: none;
padding: ${(0, cvar_1.default)('spacing-24')} 0 0;
text-align: right;
`;
const DisplayModal = (_a) => {
var { title, closeButton, footer, size = 'md', onRequestHide, closeOnOutsideClick = false, style, className, status, wrapperStyle } = _a, rest = __rest(_a, ["title", "closeButton", "footer", "size", "onRequestHide", "closeOnOutsideClick", "style", "className", "status", "wrapperStyle"]);
const modalStatusCss = (0, react_1.useMemo)(() => getModalInteractionCss(status), [status]);
const ModalHeader = (react_1.default.createElement("div", { className: modalHeaderCss },
react_1.default.createElement("div", { className: modalTitle }, title),
closeButton ? (react_1.default.createElement("button", { className: modalCloseButton, onClick: e => (onRequestHide ? onRequestHide(e) : null) },
react_1.default.createElement(internal_1.Close, { width: "16px", color: colors_1.granite.base, cropped: true, "aria-label": "Close modal" }))) : null));
const ModalFooter = footer && react_1.default.createElement("div", { className: modalFooterCss }, footer);
const modalNode = (react_1.default.createElement(internal_1.BlockButton, { onClick: e => e.stopPropagation(), onKeyDown: e => e.stopPropagation(), className: modalCss, tabIndex: -1 },
react_1.default.createElement("div", { className: (0, css_1.cx)('crc-modal', modalDialogCss, defaultSizeStyles, {
[largeSizeStyles]: size === 'lg',
[xLargeSizeStyles]: size === 'xl',
}, className), style: Object.assign({}, style) },
react_1.default.createElement("div", Object.assign({ className: (0, css_1.cx)(modalContentCss, modalStatusCss) }, rest),
ModalHeader,
react_1.default.createElement("div", { className: modalBodyCss }, rest.children),
ModalFooter)),
react_1.default.createElement(internal_1.BlockButton, { tabIndex: -1, className: (0, css_1.cx)(modalBackdrop, 'fade-in'), onClick: (e) => (closeOnOutsideClick && onRequestHide ? onRequestHide(e) : null) })));
return react_dom_1.default.createPortal(modalNode, document.body);
};
exports.DisplayModal = DisplayModal;
//# sourceMappingURL=Modal.js.map