@coreui/react-pro
Version:
UI Components Library for React.js
128 lines (124 loc) • 6.18 kB
JavaScript
;
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var index = require('../../node_modules/classnames/index.js');
var PropTypes = require('prop-types');
var CConditionalPortal = require('../conditional-portal/CConditionalPortal.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
var usePopper = require('../../hooks/usePopper.js');
var props = require('../../props.js');
var executeAfterTransition = require('../../utils/executeAfterTransition.js');
var getRTLPlacement = require('../../utils/getRTLPlacement.js');
var CTooltip = React.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, 6] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, _g = _a.trigger, trigger = _g === void 0 ? ['hover', 'focus'] : _g, visible = _a.visible, rest = tslib_es6.__rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
var tooltipRef = React.useRef(null);
var togglerRef = React.useRef(null);
var forkedRef = useForkedRef.useForkedRef(ref, tooltipRef);
var uID = React.useRef("tooltip".concat(Math.floor(Math.random() * 1000000)));
var _h = usePopper.usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper, updatePopper = _h.updatePopper;
var _j = React.useState(false), mounted = _j[0], setMounted = _j[1];
var _k = React.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: '.tooltip-arrow',
},
},
{
name: 'flip',
options: {
fallbackPlacements: fallbackPlacements,
},
},
{
name: 'offset',
options: {
offset: offset,
},
},
],
placement: getRTLPlacement.default(placement, togglerRef.current),
};
React.useEffect(function () {
setVisible(visible);
}, [visible]);
React.useEffect(function () {
if (_visible) {
setMounted(true);
if (tooltipRef.current) {
tooltipRef.current.classList.remove('fade', 'show');
destroyPopper();
}
setTimeout(function () {
if (togglerRef.current && tooltipRef.current) {
if (animation) {
tooltipRef.current.classList.add('fade');
}
initPopper(togglerRef.current, tooltipRef.current, popperConfig);
tooltipRef.current.style.removeProperty('display');
tooltipRef.current.classList.add('show');
onShow && onShow();
}
}, _delay.show);
}
return function () {
if (tooltipRef.current) {
tooltipRef.current.classList.remove('show');
onHide && onHide();
executeAfterTransition.default(function () {
if (tooltipRef.current) {
tooltipRef.current.style.display = 'none';
}
destroyPopper();
setMounted(false);
}, tooltipRef.current);
}
};
}, [_visible]);
React.useEffect(function () {
updatePopper();
}, [content]);
return (React.createElement(React.Fragment, null,
React.cloneElement(children, tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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.CConditionalPortal, { container: container, portal: true }, mounted && (React.createElement("div", tslib_es6.__assign({ className: index.default('tooltip', 'bs-tooltip-auto', className), id: uID.current, ref: forkedRef, role: "tooltip", style: {
display: 'none',
} }, rest),
React.createElement("div", { className: "tooltip-arrow" }),
React.createElement("div", { className: "tooltip-inner" }, content))))));
});
CTooltip.propTypes = {
animation: PropTypes.bool,
children: PropTypes.node,
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']),
trigger: props.triggerPropType,
visible: PropTypes.bool,
};
CTooltip.displayName = 'CTooltip';
exports.CTooltip = CTooltip;
//# sourceMappingURL=CTooltip.js.map