@coreui/react-pro
Version:
UI Components Library for React.js
165 lines (161 loc) • 7 kB
JavaScript
;
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 CTooltip = React.forwardRef((_a, ref) => {
var { children, animation = true, className, container, content, delay = 0, fallbackPlacements = ['top', 'right', 'bottom', 'left'], offset = [0, 6], onHide, onShow, placement = 'top', popperConfig, trigger = ['hover', 'focus'], visible } = _a, rest = tslib_es6.__rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "popperConfig", "trigger", "visible"]);
const tooltipRef = React.useRef(null);
const togglerRef = React.useRef(null);
const forkedRef = useForkedRef.useForkedRef(ref, tooltipRef);
const id = `tooltip${React.useId()}`;
const [mounted, setMounted] = React.useState(false);
const [_visible, setVisible] = React.useState(visible);
const { initPopper, destroyPopper, updatePopper } = usePopper.usePopper();
const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
const timer = React.useRef(undefined);
const clearTimer = () => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = undefined;
}
};
const defaultPopperConfig = {
modifiers: [
{ name: 'arrow', options: { element: '.tooltip-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));
const handleShow = () => {
clearTimer();
if (mounted) {
timer.current = setTimeout(() => {
setVisible(true);
}, _delay.show);
}
else {
setMounted(true);
}
onShow === null || onShow === void 0 ? void 0 : onShow();
};
const handleHide = () => {
clearTimer();
timer.current = setTimeout(() => {
setVisible(false);
onHide === null || onHide === void 0 ? void 0 : onHide();
}, _delay.hide);
};
React.useEffect(() => {
if (visible === true) {
handleShow();
}
else if (visible === false) {
handleHide();
}
}, [visible]);
React.useEffect(() => {
if (mounted && togglerRef.current && tooltipRef.current) {
initPopper(togglerRef.current, tooltipRef.current, computedPopperConfig);
timer.current = setTimeout(() => {
setVisible(true);
}, _delay.show);
return;
}
if (!mounted && togglerRef.current && tooltipRef.current) {
destroyPopper();
}
}, [mounted]);
React.useEffect(() => {
return () => {
clearTimer();
destroyPopper();
};
}, []);
React.useEffect(() => {
if (!_visible && togglerRef.current && tooltipRef.current) {
executeAfterTransition.default(() => {
setMounted(false);
}, tooltipRef.current);
}
}, [_visible]);
React.useEffect(() => {
updatePopper();
}, [content]);
const child = children;
return (React.createElement(React.Fragment, null,
React.cloneElement(child, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (_visible && {
'aria-describedby': id,
})), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
onClick: (event) => {
var _a, _b;
(_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
if (_visible) {
handleHide();
}
else {
handleShow();
}
},
})), ((trigger === 'focus' || trigger.includes('focus')) && {
onFocus: (event) => {
var _a, _b;
(_b = (_a = child.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
handleShow();
},
onBlur: (event) => {
var _a, _b;
(_b = (_a = child.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
handleHide();
},
})), ((trigger === 'hover' || trigger.includes('hover')) && {
onMouseEnter: (event) => {
var _a, _b;
(_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
handleShow();
},
onMouseLeave: (event) => {
var _a, _b;
(_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
handleHide();
},
}))),
React.createElement(CConditionalPortal.CConditionalPortal, { container: container, portal: true }, mounted && (React.createElement("div", Object.assign({ className: index.default('tooltip', 'bs-tooltip-auto', {
fade: animation,
show: _visible,
}, className), id: id, ref: forkedRef, role: "tooltip" }, 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']),
popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
trigger: props.triggerPropType,
visible: PropTypes.bool,
};
CTooltip.displayName = 'CTooltip';
exports.CTooltip = CTooltip;
//# sourceMappingURL=CTooltip.js.map