@onwave/ui/dist/components/Overlays/Toast/Toast.js

onwave ui library

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import { css, keyframes } from "@emotion/react";
import styled from "@emotion/styled";
import React, { useEffect, useState } from "react";
export var Toast = function (_a) {
    var color = _a.color, backgroundColor = _a.backgroundColor, message = _a.message, dismiss = _a.dismiss;
    var _b = useState(false), unmount = _b[0], setUnmount = _b[1];
    useEffect(function () {
        var unmountAnimationTimeout = setTimeout(function () {
            setUnmount(true);
        }, 4500);
        if (dismiss) {
            setTimeout(dismiss, 5000);
        }
        else {
            throw Error("No dismiss prop!");
        }
        return function () {
            clearTimeout(unmountAnimationTimeout);
            setUnmount(false);
        };
    }, []);
    return (React.createElement(UnmountAnimation, { unmount: unmount },
        React.createElement(Container, { color: color, backgroundColor: backgroundColor },
            React.createElement(Message, null, message))));
};
var fadeOutKeyFrames = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n"], ["\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n"])));
var slideDownKeyFrames = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    margin-top: 0px;\n  }\n  100% {\n    margin-top: 20px;\n  }\n"], ["\n  0% {\n    margin-top: 0px;\n  }\n  100% {\n    margin-top: 20px;\n  }\n"])));
var unmountAnimationCss = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 0.2s;\n"], ["\n  animation: ", " 0.2s;\n"])), fadeOutKeyFrames);
var unmountedCss = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  opacity: 0;\n"], ["\n  opacity: 0;\n"])));
var UnmountAnimation = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) { return props.unmount && unmountAnimationCss; }, function (props) { return props.unmount && unmountedCss; });
var Container = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-width: 280px;\n  max-width: 612px;\n  border-radius: 3px;\n  padding: 14px 16px;\n  line-height: 20px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  margin-top: 20px;\n  margin-bottom: 0;\n  animation: ", " 0.1s ease-out;\n"], ["\n  min-width: 280px;\n  max-width: 612px;\n  border-radius: 3px;\n  padding: 14px 16px;\n  line-height: 20px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  margin-top: 20px;\n  margin-bottom: 0;\n  animation: ", " 0.1s ease-out;\n"])), function (props) { var _a; return (_a = props.backgroundColor) !== null && _a !== void 0 ? _a : "#1b1c1d"; }, function (props) { var _a; return (_a = props.color) !== null && _a !== void 0 ? _a : "white"; }, slideDownKeyFrames);
var Message = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 12px;\n  white-space: pre-wrap;\n  word-break: break-all;\n"], ["\n  margin-right: 12px;\n  white-space: pre-wrap;\n  word-break: break-all;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
//# sourceMappingURL=Toast.js.map