@coreui/react/dist/esm/components/popover/CPopover.js

UI Components Library for React.js

import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useId, useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import PropTypes from 'prop-types';
import { CConditionalPortal } from '../conditional-portal/CConditionalPortal.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { usePopper } from '../../hooks/usePopper.js';
import { triggerPropType, fallbackPlacementsPropType } from '../../props.js';
import executeAfterTransition from '../../utils/executeAfterTransition.js';
import getRTLPlacement from '../../utils/getRTLPlacement.js';

var CPopover = forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 8] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, popperConfig = _a.popperConfig, title = _a.title, _g = _a.trigger, trigger = _g === void 0 ? 'click' : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "popperConfig", "title", "trigger", "visible"]);
    var popoverRef = useRef(null);
    var togglerRef = useRef(null);
    var forkedRef = useForkedRef(ref, popoverRef);
    var id = "popover".concat(useId());
    var _h = useState(false), mounted = _h[0], setMounted = _h[1];
    var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
    var _k = usePopper(), initPopper = _k.initPopper, destroyPopper = _k.destroyPopper;
    var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
    var defaultPopperConfig = {
        modifiers: [
            { name: 'arrow', options: { element: '.popover-arrow' } },
            { name: 'flip', options: { fallbackPlacements: fallbackPlacements } },
            { name: 'offset', options: { offset: offset } },
        ],
        placement: getRTLPlacement(placement, togglerRef.current),
    };
    var computedPopperConfig = __assign(__assign({}, defaultPopperConfig), (typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig));
    useEffect(function () {
        if (visible) {
            handleShow();
            return;
        }
        handleHide();
    }, [visible]);
    useEffect(function () {
        if (mounted && togglerRef.current && popoverRef.current) {
            initPopper(togglerRef.current, popoverRef.current, computedPopperConfig);
            setTimeout(function () {
                setVisible(true);
            }, _delay.show);
            return;
        }
        if (!mounted && togglerRef.current && popoverRef.current) {
            destroyPopper();
        }
    }, [mounted]);
    useEffect(function () {
        if (!_visible && togglerRef.current && popoverRef.current) {
            executeAfterTransition(function () {
                setMounted(false);
            }, popoverRef.current);
        }
    }, [_visible]);
    var handleShow = function () {
        setMounted(true);
        if (onShow) {
            onShow();
        }
    };
    var handleHide = function () {
        setTimeout(function () {
            setVisible(false);
            if (onHide) {
                onHide();
            }
        }, _delay.hide);
    };
    return (React.createElement(React.Fragment, null,
        React.cloneElement(children, __assign(__assign(__assign(__assign(__assign({}, (_visible && {
            'aria-describedby': id,
        })), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
            onClick: function () { return (_visible ? handleHide() : handleShow()); },
        })), ((trigger === 'focus' || trigger.includes('focus')) && {
            onFocus: function () { return handleShow(); },
            onBlur: function () { return handleHide(); },
        })), ((trigger === 'hover' || trigger.includes('hover')) && {
            onMouseEnter: function () { return handleShow(); },
            onMouseLeave: function () { return handleHide(); },
        }))),
        React.createElement(CConditionalPortal, { container: container, portal: true }, mounted && (React.createElement("div", __assign({ className: classNames('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: 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: triggerPropType,
    visible: PropTypes.bool,
};
CPopover.displayName = 'CPopover';

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