nice-ui
Version:
React design system, components, and utilities
73 lines (72 loc) • 3.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicTooltip = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const popup_1 = require("../../utils/popup");
const context_1 = require("../../styles/context");
const KeyLite_1 = require("../../1-inline/KeyLite");
const PositionPopup_1 = require("../../utils/popup/PositionPopup");
const blockClass = (0, nano_theme_1.drule)({
pos: 'relative',
d: 'inline-flex',
});
const tooltipClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui1.mid,
pos: 'relative',
d: 'inline-flex',
bgc: 'rgba(0,0,0,.85)',
bdrad: '4px',
col: '#fff',
fz: '14px',
pad: '4px 8px',
userSelect: 'none',
pointerEvents: 'none',
});
const BasicTooltip = ({ Component = 'span', anchor, renderTooltip, nowrap, show, fadeIn, shortcut, children, onMouseEnter, onMouseLeave, }) => {
const [visible, setVisible] = React.useState(false);
const styles = (0, context_1.useStyles)();
const handle = (0, popup_1.useAnchorPointHandle)(anchor);
// Hide tooltip on various global events.
React.useEffect(() => {
const listener = () => setVisible(false);
document.addEventListener('mousedown', listener);
document.addEventListener('scroll', listener);
window.addEventListener('resize', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('scroll', listener);
window.removeEventListener('resize', listener);
};
}, []);
const C = Component;
let drop = null;
if (!!renderTooltip && (typeof show === 'boolean' ? show : !!visible)) {
const { dy } = handle.get();
drop = (React.createElement(PositionPopup_1.PositionPopup, { fadeIn: fadeIn },
React.createElement(C, { className: tooltipClass, style: { boxShadow: styles.light ? undefined : `0 0 0 1px ${styles.g(0.1, 0.16)}` } },
nowrap ? React.createElement("span", { style: { whiteSpace: 'nowrap' } }, renderTooltip()) : renderTooltip(),
!!shortcut && (React.createElement(KeyLite_1.KeyLite, { style: {
position: 'absolute',
left: 0,
bottom: dy <= 0 ? 'calc(100% + 4px)' : undefined,
top: dy > 0 ? 'calc(100% + 4px)' : undefined,
animation: 'fadeInScaleIn .4s',
} }, shortcut)))));
}
return (React.createElement(popup_1.anchorContext.Provider, { value: handle },
React.createElement(C, { className: blockClass(), onMouseEnter: (e) => {
if (onMouseEnter)
onMouseEnter(e);
if (renderTooltip)
setVisible(true);
}, onMouseLeave: (e) => {
if (onMouseLeave)
onMouseLeave(e);
if (renderTooltip)
setVisible(false);
}, ref: handle.ref },
children,
drop)));
};
exports.BasicTooltip = BasicTooltip;