@coreui/react-pro/dist/cjs/components/toast/CToaster.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 CConditionalPortal = require('../conditional-portal/CConditionalPortal.js');

const CToaster = React.forwardRef((_a, ref) => {
    var { children, className, placement, push } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "placement", "push"]);
    const [toasts, setToasts] = React.useState([]);
    const index$1 = React.useRef(0);
    React.useEffect(() => {
        index$1.current++;
        if (push) {
            addToast(push);
        }
    }, [push]);
    const addToast = (push) => {
        setToasts((state) => [
            ...state,
            React.cloneElement(push, {
                index: index$1.current,
                innerKey: index$1.current,
                onClose: (index) => setToasts((state) => state.filter((i) => i.props.index !== index)),
            }),
        ]);
    };
    return (React.createElement(CConditionalPortal.CConditionalPortal, { portal: typeof placement === 'string' }, toasts.length > 0 || children ? (React.createElement("div", Object.assign({ className: index.default('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((toast, index) => 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';

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