@coreui/react-pro
Version:
UI Components Library for React.js
126 lines (123 loc) • 6.14 kB
JavaScript
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import classNames from '../../node_modules/classnames/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 { fallbackPlacementsPropType, triggerPropType } 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, 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", "title", "trigger", "visible"]);
var popoverRef = useRef(null);
var togglerRef = useRef(null);
var forkedRef = useForkedRef(ref, popoverRef);
var uID = useRef("popover".concat(Math.floor(Math.random() * 1000000)));
var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
var _j = useState(false), mounted = _j[0], setMounted = _j[1];
var _k = useState(visible), _visible = _k[0], setVisible = _k[1];
var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
var popperConfig = {
modifiers: [
{
name: 'arrow',
options: {
element: '.popover-arrow',
},
},
{
name: 'flip',
options: {
fallbackPlacements: fallbackPlacements,
},
},
{
name: 'offset',
options: {
offset: offset,
},
},
],
placement: getRTLPlacement(placement, togglerRef.current),
};
useEffect(function () {
setVisible(visible);
}, [visible]);
useEffect(function () {
if (_visible) {
setMounted(true);
if (popoverRef.current) {
popoverRef.current.classList.remove('fade', 'show');
destroyPopper();
}
setTimeout(function () {
if (togglerRef.current && popoverRef.current) {
if (animation) {
popoverRef.current.classList.add('fade');
}
initPopper(togglerRef.current, popoverRef.current, popperConfig);
popoverRef.current.style.removeProperty('display');
popoverRef.current.classList.add('show');
onShow && onShow();
}
}, _delay.show);
}
return function () {
if (popoverRef.current) {
popoverRef.current.classList.remove('show');
onHide && onHide();
executeAfterTransition(function () {
if (popoverRef.current) {
popoverRef.current.style.display = 'none';
}
destroyPopper();
setMounted(false);
}, popoverRef.current);
}
};
}, [_visible]);
return (React.createElement(React.Fragment, null,
React.cloneElement(children, __assign(__assign(__assign(__assign(__assign({}, (_visible && {
'aria-describedby': uID.current,
})), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
onClick: function () { return setVisible(!_visible); },
})), ((trigger === 'focus' || trigger.includes('focus')) && {
onFocus: function () { return setVisible(true); },
onBlur: function () { return setVisible(false); },
})), ((trigger === 'hover' || trigger.includes('hover')) && {
onMouseEnter: function () { return setVisible(true); },
onMouseLeave: function () { return setVisible(false); },
}))),
React.createElement(CConditionalPortal, { container: container, portal: true }, mounted && (React.createElement("div", __assign({ className: classNames('popover', 'bs-popover-auto', className), id: uID.current, ref: forkedRef, role: "tooltip", style: {
display: 'none',
} }, 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']),
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
trigger: triggerPropType,
visible: PropTypes.bool,
};
CPopover.displayName = 'CPopover';
export { CPopover };
//# sourceMappingURL=CPopover.js.map