@onwave/ui
Version:
onwave ui library
55 lines • 2.95 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import styled from "@emotion/styled";
import React, { useCallback, useImperativeHandle, useState, } from "react";
import { Portal } from "../Portal";
import { Toast } from "../Toast/Toast";
export var ToastContainer = function (_a) {
var addToast = _a.addToast, removeToast = _a.removeToast, container = _a.container;
var _b = useState([]), toasts = _b[0], setToasts = _b[1];
var add = useCallback(function (toast) {
var key = Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15);
setToasts(function (prev) { return __spreadArrays(prev, [__assign(__assign({}, toast), { key: key })]); });
return key;
}, []);
var remove = useCallback(function (key) {
setToasts(function (prev) { return __spreadArrays(prev.filter(function (toast) { return toast.key !== key; })); });
}, []);
useImperativeHandle(addToast, function () { return add; });
useImperativeHandle(removeToast, function () { return remove; });
return (React.createElement(Portal, { container: container },
React.createElement(ToasterContainer, null,
React.createElement(TopToastsContainer, null, toasts
.map(function (toast) {
var dismiss = function () {
remove(toast.key);
};
return React.createElement(Toast, __assign({}, toast, { dismiss: dismiss }));
})
.reverse()))));
};
var ToasterContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
var TopToastsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n top: 24px;\n left: 50%;\n width: auto;\n transform: translateX(-50%);\n z-index: 10000;\n"], ["\n position: fixed;\n top: 24px;\n left: 50%;\n width: auto;\n transform: translateX(-50%);\n z-index: 10000;\n"])));
var templateObject_1, templateObject_2;
//# sourceMappingURL=index.js.map