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

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CToastContext } from './CToastContext.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { colorPropType } from '../../props.js';
import Transition from '../../node_modules/react-transition-group/esm/Transition.js';

const CToast = forwardRef((_a, ref) => {
    var { children, animation = true, autohide = true, className, color, delay = 5000, index, innerKey, visible = false, onClose, onShow } = _a, rest = __rest(_a, ["children", "animation", "autohide", "className", "color", "delay", "index", "innerKey", "visible", "onClose", "onShow"]);
    const toastRef = useRef(null);
    const forkedRef = useForkedRef(ref, toastRef);
    const [_visible, setVisible] = useState(false);
    const timeout = useRef(undefined);
    useEffect(() => {
        setVisible(visible);
    }, [visible]);
    const contextValues = {
        visible: _visible,
        setVisible,
    };
    // triggered on mount and destroy
    useEffect(() => () => clearTimeout(timeout.current), []);
    useEffect(() => {
        _autohide();
    }, [_visible]);
    const _autohide = () => {
        if (autohide) {
            clearTimeout(timeout.current);
            timeout.current = window.setTimeout(() => {
                setVisible(false);
            }, delay);
        }
    };
    return (React.createElement(Transition, { in: _visible, nodeRef: toastRef, onEnter: () => onShow && onShow(index !== null && index !== void 0 ? index : null), onExited: () => onClose && onClose(index !== null && index !== void 0 ? index : null), timeout: 250, unmountOnExit: true }, (state) => (React.createElement(CToastContext.Provider, { value: contextValues },
        React.createElement("div", Object.assign({ className: classNames('toast', {
                fade: animation,
                [`bg-${color}`]: color,
                'border-0': color,
                'show showing': state === 'entering' || state === 'exiting',
                show: state === 'entered',
            }, className), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: () => clearTimeout(timeout.current), onMouseLeave: () => _autohide() }, rest, { key: innerKey, ref: forkedRef }), children)))));
});
CToast.propTypes = {
    animation: PropTypes.bool,
    autohide: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    color: 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';

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