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

UI Components Library for React.js

import { __rest } 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';

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

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