norma-library/dist/esm/components/Modal.js

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { __assign, __makeTemplateObject, __rest } from "tslib";
import React from 'react';
import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
import styled from 'styled-components';
import { IconButton } from './IconButton';
import { Button } from './Button';
var ModalStyled = styled(MuiModal)({});
var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ", ";\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  outline: none;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ", ";\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  outline: none;\n"])), function (props) { return props.$w || '421px'; });
var ModalHeaderStyled = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  pointer-events: none;\n  & h2 {\n    font-style: normal;\n    font-weight: 600;\n    font-size: 18px;\n    color: #1d1d1d;\n  }\n  & p{\n    margin-top: 16px;\n  }\n"], ["\n  text-align: left;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  pointer-events: none;\n  & h2 {\n    font-style: normal;\n    font-weight: 600;\n    font-size: 18px;\n    color: #1d1d1d;\n  }\n  & p{\n    margin-top: 16px;\n  }\n"])));
var ModalFooterStyled = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: ", ";\n  gap: 24px;\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: ", ";\n  gap: 24px;\n"])), function (props) { return (props.$spaceBetween ? 'space-between' : 'flex-end'); });
var ModalContainerChildrenStyled = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding: 24px;\n"], ["\n  box-sizing: border-box;\n  padding: 24px;\n"])));
export function Close() {
    return (React.createElement("svg", { fill: "#808080", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", height: "24", width: "24" },
        React.createElement("path", { clipRule: "evenodd", fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" })));
}
export var Modal = function (_a) {
    var _b;
    var open = _a.open, children = _a.children, paperProps = _a.paperProps, props = __rest(_a, ["open", "children", "paperProps"]);
    var handleClose = function (event, reason) {
        var _a;
        (reason === "escapeKeyDown" || !props.shouldNotCloseOnOutsideClick) && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, event));
    };
    return (React.createElement(ModalStyled, __assign({ open: true }, props, { onClose: handleClose }),
        React.createElement(ModalContentStyled, __assign({}, paperProps, { "$w": props.width }),
            React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: '0', position: 'absolute', right: '22px', top: '22px', zIndex: 2 }, className: 'Modal__Close' },
                React.createElement(Close, null)),
            props.title && (React.createElement(ModalHeaderStyled, null,
                React.createElement(Typography, { variant: "h2" }, props.title),
                props.description && React.createElement(Typography, { variant: "body1" }, props.description))),
            React.createElement(ModalContainerChildrenStyled, null, children),
            !!((_b = props.action) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(ModalFooterStyled, { "$spaceBetween": props.actionSpaceBetween }, props.action.map(function (_a, key) {
                var color = _a.color, variant = _a.variant, action = _a.action, size = _a.size, label = _a.label, rest = __rest(_a, ["color", "variant", "action", "size", "label"]);
                return (React.createElement(Button, __assign({ color: color, variant: variant, key: key, onClick: action, size: size }, rest), label));
            }))))));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Modal.js.map