playtpus_ui
Version:
React Component Libary
58 lines • 6.23 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 react_dom_1 = __importDefault(require("react-dom"));
var styled_components_1 = __importDefault(require("styled-components"));
require("../main.scss");
var __1 = require("../../");
var notification_1 = require("../notification");
var button_1 = __importDefault(require("../button"));
var config_1 = require("../../config");
var message3_svg_1 = __importDefault(require("../../assets/message3.svg"));
var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n z-index: 20;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n transition: 200ms ease-out;\n background-color: rgba(0,0,0,0.5);"], ["\n position: fixed;\n z-index: 20;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n transition: 200ms ease-out;\n background-color: rgba(0,0,0,0.5);"])));
var Btn = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";"], ["\n background: ", ";"])), config_1.primaryColor);
var Modall = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 2% auto;\n background: white;\n box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n border-radius: 1em;\n width: 80%;\n display: grid;\n place-items: stretch;\n grid-template-rows: auto 1fr;\n text-align: center;\n font-size: 1.2em;\n padding: 0;\n min-height: 260px;\n max-width: 900px;\n color: black;\n @media(max-width: ", "){\n position: absolute;\n bottom: 90px;\n width: 90vw;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%)\n }"], ["\n margin: 2% auto;\n background: white;\n box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n border-radius: 1em;\n width: 80%;\n display: grid;\n place-items: stretch;\n grid-template-rows: auto 1fr;\n text-align: center;\n font-size: 1.2em;\n padding: 0;\n min-height: 260px;\n max-width: 900px;\n color: black;\n @media(max-width: ", "){\n position: absolute;\n bottom: 90px;\n width: 90vw;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%)\n }"])), config_1.mobileWidth);
var Header = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: white;\n background-image: linear-gradient( ", ", rgba(50, 150, 178, 0.8));\n border-top-right-radius: .75em;\n border-top-left-radius: .75em;\n border: 0;\n margin: 0;\n height: 2.5em;"], ["\n color: white;\n background-image: linear-gradient( ", ", rgba(50, 150, 178, 0.8));\n border-top-right-radius: .75em;\n border-top-left-radius: .75em;\n border: 0;\n margin: 0;\n height: 2.5em;"])), config_1.primaryColor);
var Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: white;\n minHeight: 5em;\n padding: .0em;\n display: grid;\n place-items: center;\n grid-template-rows: 1fr auto;\n font-weight: bolder;\n background-image: linear-gradient(rgba(208, 211, 212 , 0.7), rgba(32, 100, 78 , 0.6)), url(", ");\n border-bottom-right-radius: .75em;\n border-bottom-left-radius: .75em;\n"], ["\n color: white;\n minHeight: 5em;\n padding: .0em;\n display: grid;\n place-items: center;\n grid-template-rows: 1fr auto;\n font-weight: bolder;\n background-image: linear-gradient(rgba(208, 211, 212 , 0.7), rgba(32, 100, 78 , 0.6)), url(", ");\n border-bottom-right-radius: .75em;\n border-bottom-left-radius: .75em;\n"])), message3_svg_1.default);
var Modal = function (_a) {
var title = _a.title, message = _a.message, hideCancel = _a.hideCancel, _b = _a.position, position = _b === void 0 ? 'top-center' : _b;
var _c = notification_1.createPopup({ type: "modal", position: position }), container = _c.container, child = _c.child;
var close = function () {
try {
container.removeChild(child);
react_dom_1.default.unmountComponentAtNode(child);
}
catch (e) {
console.log(e);
}
};
var El = (react_1.default.createElement(Wrapper, null,
react_1.default.createElement(Modall, { className: "appear" },
react_1.default.createElement(Header, { style: { placeSelf: "stretch" } },
react_1.default.createElement(__1.Grid, { customCols: "1fr auto", textAlign: "left" },
react_1.default.createElement("header", { style: { textOverflow: "ellipsis", color: "white" } }, title),
react_1.default.createElement("i", { className: "fa fa-times", "aria-hidden": "true", onClick: close, style: { color: "white", placeSelf: "center", padding: ".5em" } }))),
react_1.default.createElement(Body, null,
typeof message === 'string' || react_1.default.isValidElement(message) ? message : 'Error',
!hideCancel &&
react_1.default.createElement("div", null,
react_1.default.createElement(button_1.default, { shadow: true, onClick: close }, "Cancel"))))));
return {
close: close,
open: function () {
if (!container.contains(child))
container.appendChild(child);
react_dom_1.default.render(El, child);
}
};
};
exports.default = Modal;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=index.js.map