@coreui/react-pro
Version:
UI Components Library for React.js
163 lines (160 loc) • 6.91 kB
JavaScript
import { __rest } 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 { usePopper } from '../../hooks/usePopper.js';
import executeAfterTransition from '../../utils/executeAfterTransition.js';
import getRTLPlacement from '../../utils/getRTLPlacement.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { triggerPropType, fallbackPlacementsPropType } from '../../props.js';
const CTooltip = 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 = __rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "popperConfig", "trigger", "visible"]);
const tooltipRef = useRef(null);
const togglerRef = useRef(null);
const forkedRef = useForkedRef(ref, tooltipRef);
const id = `tooltip${useId()}`;
const [mounted, setMounted] = useState(false);
const [_visible, setVisible] = useState(visible);
const { initPopper, destroyPopper, updatePopper } = usePopper();
const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
const timer = 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(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);
};
useEffect(() => {
if (visible === true) {
handleShow();
}
else if (visible === false) {
handleHide();
}
}, [visible]);
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]);
useEffect(() => {
return () => {
clearTimer();
destroyPopper();
};
}, []);
useEffect(() => {
if (!_visible && togglerRef.current && tooltipRef.current) {
executeAfterTransition(() => {
setMounted(false);
}, tooltipRef.current);
}
}, [_visible]);
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, { container: container, portal: true }, mounted && (React.createElement("div", Object.assign({ className: classNames('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: 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: triggerPropType,
visible: PropTypes.bool,
};
CTooltip.displayName = 'CTooltip';
export { CTooltip };
//# sourceMappingURL=CTooltip.js.map