@remotion/studio
Version:
APIs for interacting with the Remotion Studio
35 lines (34 loc) • 1.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const colors_1 = require("../helpers/colors");
const z_index_1 = require("../state/z-index");
const padding = 20;
const getMaxModalWidth = (width) => {
return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
};
exports.getMaxModalWidth = getMaxModalWidth;
const getMaxModalHeight = (height) => {
return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
};
exports.getMaxModalHeight = getMaxModalHeight;
const backgroundOverlay = {
backgroundColor: 'rgba(255, 255, 255, 0.2)',
backdropFilter: `blur(1px)`,
position: 'fixed',
height: '100%',
width: '100%',
display: 'flex',
padding,
};
const panel = {
backgroundColor: colors_1.BACKGROUND,
boxShadow: '0 0 4px black',
color: 'white',
margin: 'auto',
};
const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: panel, children: children }) }) }));
};
exports.ModalContainer = ModalContainer;