synapse-react-client/dist/containers/ToastMessage.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.displayToast = exports.SynapseToastContainer = exports.ToastMessage = void 0;
var tslib_1 = require("tslib");
var lodash_es_1 = require("lodash-es");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_hot_toast_1 = require("react-hot-toast");
var react_transition_group_1 = require("react-transition-group");
var FullWidthAlert_1 = (0, tslib_1.__importDefault)(require("./FullWidthAlert"));
/**
 *
 * Generalization of a Material-style toast message used in a couple of places. This component is simple and
 * cannot handle issuing multiple toast messages. For more sophisticated cases, see {@link displayToast}
 */
var ToastMessage = function (_a) {
    var text = _a.text, show = _a.show, autohide = _a.autohide;
    return (react_1.default.createElement(react_transition_group_1.TransitionGroup, null, show && (react_1.default.createElement(react_transition_group_1.CSSTransition, { classNames: "SRC-card", timeout: autohide ? { enter: 500, exit: 300 } : {} },
        react_1.default.createElement("div", { className: "SRC-modal" }, text)))));
};
exports.ToastMessage = ToastMessage;
/**
 * Customized ToastContainer for using react-toastify.
 *
 * Note that this will collide with other notification systems, such as the BootstrapNotify notifications
 * in SWC.
 */
var SynapseToastContainer = function () {
    return (react_1.default.createElement(react_hot_toast_1.Toaster, { containerClassName: "SynapseToastContainer bootstrap-4-backport", position: "bottom-center" }, function (t) { return (react_1.default.createElement(react_hot_toast_1.ToastBar, { toast: t, style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, t.style), { animation: t.visible ? 'fadeInUp 0.5s ease' : 'fadeOutDown 1s ease' }) })); }));
};
exports.SynapseToastContainer = SynapseToastContainer;
/**
 * Displays a toast message. Requires one 'SynapseToastContainer' to be somewhere in the page.
 *
 * @param message - The description of the toast message.
 * @param variant - The type of toast message to display. Default 'info'.

 * In ToastMessageOptions:
 *
 * @param autoCloseInMs - The amount of time in milliseconds to wait before automatically closing the toast. To prevent autoclose, set to 0 or Infinity. Default 15000.
 *
 * The rest of the options params are undefined by default.
 */
var displayToast = function (message, variant, toastMessageOptions) {
    var _a = toastMessageOptions !== null && toastMessageOptions !== void 0 ? toastMessageOptions : {}, _b = _a.title, title = _b === void 0 ? undefined : _b, _c = _a.primaryButtonText, primaryButtonText = _c === void 0 ? undefined : _c, _d = _a.onPrimaryButtonClick, onPrimaryButtonClick = _d === void 0 ? undefined : _d, _e = _a.secondaryButtonText, secondaryButtonText = _e === void 0 ? undefined : _e, _f = _a.secondaryButtonHref, secondaryButtonHref = _f === void 0 ? undefined : _f;
    var _g = (toastMessageOptions !== null && toastMessageOptions !== void 0 ? toastMessageOptions : {}).autoCloseInMs, autoCloseInMs = _g === void 0 ? 15000 : _g;
    // Some toast libraries use 0 to prevent autoclose
    // react-hot-toast doesn't, but we can convert it for better compatibility as we try to migrate to use just one library
    if (autoCloseInMs === 0) {
        autoCloseInMs = Infinity;
    }
    var id = (0, lodash_es_1.uniqueId)('synToast-');
    (0, react_hot_toast_1.toast)(react_1.default.createElement(FullWidthAlert_1.default, { isGlobal: false, onClose: function () {
            react_hot_toast_1.toast.dismiss(id);
        }, variant: variant !== null && variant !== void 0 ? variant : 'info', show: true, title: title, description: message, primaryButtonText: primaryButtonText, onPrimaryButtonClick: onPrimaryButtonClick, secondaryButtonText: secondaryButtonText, secondaryButtonHref: secondaryButtonHref }), {
        id: id,
        className: 'SynapseToastMessage',
        duration: autoCloseInMs,
    });
};
exports.displayToast = displayToast;
//# sourceMappingURL=ToastMessage.js.map