@coreui/react/dist/esm/components/toast/CToaster.js

UI Components Library for React.js

import { __rest, __spreadArray, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CConditionalPortal } from '../conditional-portal/CConditionalPortal.js';

var CToaster = forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, placement = _a.placement, push = _a.push, rest = __rest(_a, ["children", "className", "placement", "push"]);
    var _b = useState([]), toasts = _b[0], setToasts = _b[1];
    var index = useRef(0);
    useEffect(function () {
        index.current++;
        if (push) {
            addToast(push);
        }
    }, [push]);
    var addToast = function (push) {
        setToasts(function (state) { return __spreadArray(__spreadArray([], state, true), [
            React.cloneElement(push, {
                index: index.current,
                innerKey: index.current,
                onClose: function (index) {
                    return setToasts(function (state) { return state.filter(function (i) { return i.props.index !== index; }); });
                },
            }),
        ], false); });
    };
    return (React.createElement(CConditionalPortal, { portal: typeof placement === 'string' }, toasts.length > 0 || children ? (React.createElement("div", __assign({ className: classNames('toaster toast-container', {
            'position-fixed': placement,
            'top-0': placement && placement.includes('top'),
            'top-50 translate-middle-y': placement && placement.includes('middle'),
            'bottom-0': placement && placement.includes('bottom'),
            'start-0': placement && placement.includes('start'),
            'start-50 translate-middle-x': placement && placement.includes('center'),
            'end-0': placement && placement.includes('end'),
        }, className) }, rest, { ref: ref }),
        children,
        toasts.map(function (toast, index) { return React.cloneElement(toast, { visible: true, key: index }); }))) : null));
});
CToaster.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    placement: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.oneOf([
            'top-start',
            'top-center',
            'top-end',
            'middle-start',
            'middle-center',
            'middle-end',
            'bottom-start',
            'bottom-center',
            'bottom-end',
        ]),
    ]),
    push: PropTypes.any,
};
CToaster.displayName = 'CToaster';

export { CToaster };
//# sourceMappingURL=CToaster.js.map