@coreui/react-pro/dist/cjs/components/popover/CPopover.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var PropTypes = require('prop-types');
var CConditionalPortal = require('../conditional-portal/CConditionalPortal.js');
var usePopper = require('../../hooks/usePopper.js');
var executeAfterTransition = require('../../utils/executeAfterTransition.js');
var getRTLPlacement = require('../../utils/getRTLPlacement.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
var props = require('../../props.js');

const CPopover = React.forwardRef((_a, ref) => {
    var { children, animation = true, className, container, content, delay = 0, fallbackPlacements = ['top', 'right', 'bottom', 'left'], offset = [0, 8], onHide, onShow, placement = 'top', popperConfig, title, trigger = 'click', visible } = _a, rest = tslib_es6.__rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "popperConfig", "title", "trigger", "visible"]);
    const popoverRef = React.useRef(null);
    const togglerRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, popoverRef);
    const id = `popover${React.useId()}`;
    const [mounted, setMounted] = React.useState(false);
    const [_visible, setVisible] = React.useState(visible);
    const { initPopper, destroyPopper } = usePopper.usePopper();
    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
    const defaultPopperConfig = {
        modifiers: [
            { name: 'arrow', options: { element: '.popover-arrow' } },
            { name: 'flip', options: { fallbackPlacements } },
            { name: 'offset', options: { offset } },
        ],
        placement: getRTLPlacement.default(placement, togglerRef.current),
    };
    const computedPopperConfig = Object.assign(Object.assign({}, defaultPopperConfig), (typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig));
    React.useEffect(() => {
        if (visible) {
            handleShow();
            return;
        }
        handleHide();
    }, [visible]);
    React.useEffect(() => {
        if (mounted && togglerRef.current && popoverRef.current) {
            initPopper(togglerRef.current, popoverRef.current, computedPopperConfig);
            setTimeout(() => {
                setVisible(true);
            }, _delay.show);
            return;
        }
        if (!mounted && togglerRef.current && popoverRef.current) {
            destroyPopper();
        }
    }, [mounted]);
    React.useEffect(() => {
        if (!_visible && togglerRef.current && popoverRef.current) {
            executeAfterTransition.default(() => {
                setMounted(false);
            }, popoverRef.current);
        }
    }, [_visible]);
    const handleShow = () => {
        setMounted(true);
        if (onShow) {
            onShow();
        }
    };
    const handleHide = () => {
        setTimeout(() => {
            setVisible(false);
            if (onHide) {
                onHide();
            }
        }, _delay.hide);
    };
    return (React.createElement(React.Fragment, null,
        React.cloneElement(children, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (_visible && {
            'aria-describedby': id,
        })), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
            onClick: () => (_visible ? handleHide() : handleShow()),
        })), ((trigger === 'focus' || trigger.includes('focus')) && {
            onFocus: () => handleShow(),
            onBlur: () => handleHide(),
        })), ((trigger === 'hover' || trigger.includes('hover')) && {
            onMouseEnter: () => handleShow(),
            onMouseLeave: () => handleHide(),
        }))),
        React.createElement(CConditionalPortal.CConditionalPortal, { container: container, portal: true }, mounted && (React.createElement("div", Object.assign({ className: index.default('popover', 'bs-popover-auto', {
                fade: animation,
                show: _visible,
            }, className), id: id, ref: forkedRef, role: "tooltip" }, rest),
            React.createElement("div", { className: "popover-arrow" }),
            React.createElement("div", { className: "popover-header" }, title),
            React.createElement("div", { className: "popover-body" }, content))))));
});
CPopover.propTypes = {
    animation: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    container: PropTypes.any,
    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    delay: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.shape({
            show: PropTypes.number.isRequired,
            hide: PropTypes.number.isRequired,
        }),
    ]),
    fallbackPlacements: props.fallbackPlacementsPropType,
    offset: PropTypes.any, // TODO: find good proptype
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
    popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    trigger: props.triggerPropType,
    visible: PropTypes.bool,
};
CPopover.displayName = 'CPopover';

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