@coreui/react/dist/cjs/components/toast/CToast.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var CToastContext = require('./CToastContext.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');
var props = require('../../props.js');
var Transition = require('../../node_modules/react-transition-group/esm/Transition.js');

var CToast = React.forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, _c = _a.autohide, autohide = _c === void 0 ? true : _c, className = _a.className, color = _a.color, _d = _a.delay, delay = _d === void 0 ? 5000 : _d, index$1 = _a.index, innerKey = _a.innerKey, _e = _a.visible, visible = _e === void 0 ? false : _e, onClose = _a.onClose, onShow = _a.onShow, rest = tslib_es6.__rest(_a, ["children", "animation", "autohide", "className", "color", "delay", "index", "innerKey", "visible", "onClose", "onShow"]);
    var toastRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, toastRef);
    var _f = React.useState(false), _visible = _f[0], setVisible = _f[1];
    var timeout = React.useRef(undefined);
    React.useEffect(function () {
        setVisible(visible);
    }, [visible]);
    var contextValues = {
        visible: _visible,
        setVisible: setVisible,
    };
    // triggered on mount and destroy
    React.useEffect(function () { return function () { return clearTimeout(timeout.current); }; }, []);
    React.useEffect(function () {
        _autohide();
    }, [_visible]);
    var _autohide = function () {
        if (autohide) {
            clearTimeout(timeout.current);
            timeout.current = window.setTimeout(function () {
                setVisible(false);
            }, delay);
        }
    };
    return (React.createElement(Transition.default, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index$1 !== null && index$1 !== void 0 ? index$1 : null); }, onExited: function () { return onClose && onClose(index$1 !== null && index$1 !== void 0 ? index$1 : null); }, timeout: 250, unmountOnExit: true }, function (state) {
        var _a;
        return (React.createElement(CToastContext.CToastContext.Provider, { value: contextValues },
            React.createElement("div", tslib_es6.__assign({ className: index.default('toast', (_a = {
                        fade: animation
                    },
                    _a["bg-".concat(color)] = color,
                    _a['border-0'] = color,
                    _a['show showing'] = state === 'entering' || state === 'exiting',
                    _a.show = state === 'entered',
                    _a), className), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide(); } }, rest, { key: innerKey, ref: forkedRef }), children)));
    }));
});
CToast.propTypes = {
    animation: PropTypes.bool,
    autohide: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    color: props.colorPropType,
    delay: PropTypes.number,
    index: PropTypes.number,
    innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    onClose: PropTypes.func,
    onShow: PropTypes.func,
    visible: PropTypes.bool,
};
CToast.displayName = 'CToast';

exports.CToast = CToast;
//# sourceMappingURL=CToast.js.map