playtpus_ui
Version:
React Component Libary
82 lines • 4.28 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 });
exports.createPopup = void 0;
var react_1 = __importDefault(require("react"));
var react_dom_1 = __importDefault(require("react-dom"));
var styled_components_1 = __importDefault(require("styled-components"));
var generator_1 = require("../generator");
var animation_1 = require("../animation");
require("../main.scss");
var __1 = require("../../");
var Containter = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ntransition: 200ms ease-out;\nanimation: ", " 200ms ease-out;\n", "\n", ""], ["\ntransition: 200ms ease-out;\nanimation: ", " 200ms ease-out;\n", "\n", ""])), animation_1.slideIn, generator_1.sizeStyle({ width: "14rem", minHeight: "4rem", margin: ".5em", padding: '.6em' }), generator_1.designStyle({ shadow: true, background: "white" }));
exports.createPopup = function (_a) {
var type = _a.type, position = _a.position;
var defaultPosition = 'top-right';
var containerId = type + '-container-' + position || defaultPosition;
var hasContainer = document.getElementById(containerId) !== null;
var container = document.getElementById(containerId) || document.createElement('div');
var div = document.createElement('div');
var root = document.getElementById('root');
if (!hasContainer) {
container.setAttribute("id", containerId);
container.classList.add(position || defaultPosition);
root === null || root === void 0 ? void 0 : root.appendChild(container);
}
container.prepend(div);
return {
container: container,
child: div
};
};
var Notification = function (type, _a) {
var title = _a.title, message = _a.message, position = _a.position, visibilityTime = _a.visibilityTime;
var defaultVisibiltyTime = 3300;
var _b = exports.createPopup({ type: "notification", position: position }), container = _b.container, child = _b.child;
var remove = function () {
try {
container.removeChild(child);
}
catch (e) {
console.log(e);
}
};
var Notification = (react_1.default.createElement(Containter, { id: "111" },
react_1.default.createElement(__1.Grid, { customCols: "auto 1fr", textAlign: "left" },
react_1.default.createElement(Icon, { type: type }),
react_1.default.createElement("div", { style: { placeSelf: "stretch" }, className: type },
react_1.default.createElement("header", { style: { textOverflow: "ellipsis" } },
title,
react_1.default.createElement("i", { className: "fa fa-times right", "aria-hidden": "true", onClick: remove, style: { color: "darkgray", placeSelf: "start" } })),
react_1.default.createElement("div", { style: { textOverflow: "ellipsis" } }, message)))));
setTimeout(function () { return remove(); }, visibilityTime || defaultVisibiltyTime);
react_dom_1.default.render(Notification, child);
};
var Icon = function (_a) {
var type = _a.type;
var iconName;
switch (type) {
case 'warning':
iconName = "fa fa-exclamation-triangle warning";
break;
case 'error':
iconName = "fa fa-exclamation-circle error";
break;
default:
iconName = "fa fa-check-circle success";
}
return react_1.default.createElement("i", { className: iconName, "aria-hidden": "true", style: { placeSelf: "start" } });
};
exports.default = {
success: function (props) { return Notification("success", props); },
warning: function (props) { return Notification("warning", props); },
error: function (props) { return Notification("error", props); },
};
var templateObject_1;
//# sourceMappingURL=index.js.map