UNPKG

react-common-use-components

Version:
48 lines (47 loc) 2.42 kB
"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); var react_1 = __importDefault(require("react")); var Modal = function (_a) { var children = _a.children, openModal = _a.openModal, style = _a.style, _b = _a.position, position = _b === void 0 ? 'center' : _b, onClose = _a.onClose; function getPosition() { if (position === 'top') { return { justifyContent: 'center', alignItems: "flex-start" }; } else if (position === 'right') { return { justifyContent: 'flex-end', alignItems: "center" }; } else if (position === 'bottom') { return { justifyContent: 'center', alignItems: "flex-end" }; } else if (position === 'left') { return { justifyContent: 'flex-start', alignItems: "center" }; } else if (position === 'center') { return { justifyContent: 'center', alignItems: "center" }; } } return (react_1.default.createElement("div", null, react_1.default.createElement("style", null, "\n\t\t\t\t @keyframes initAnimation {\n\t\t\t\t 0% { opacity:0}\n\t\t\t\t 20% { opacity:0.1}\n\t\t\t\t 40% { opacity:0.2}\n\t\t\t\t 60% { opacity:0.3}\n\t\t\t\t 80% { opacity:0.4}\n\t\t\t\t 100% { opacity:0.5}\n\t\t\t\t }\n\t\t\t\t "), openModal && react_1.default.createElement("div", { onClick: function (e) { if (onClose) { onClose(); } e.stopPropagation(); }, style: __assign({ background: 'rgba(0,0,0,0.5)', width: "100%", zIndex: 1300, position: 'fixed', inset: 0, display: "flex", justifyContent: getPosition().justifyContent, alignItems: getPosition().alignItems, animation: 'initAnimation 0.25s ease' }, style) }, children))); }; exports.default = Modal;