nice-ui
Version:
React design system, components, and utilities
59 lines (58 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PositionPopup = void 0;
const React = require("react");
const constants_1 = require("../../constants");
const nano_theme_1 = require("nano-theme");
const context_1 = require("./context");
const useMountedState_1 = require("react-use/lib/useMountedState");
const portal_1 = require("../portal");
const positionClass = (0, nano_theme_1.rule)({
d: 'block',
pos: 'fixed',
z: constants_1.ZINDEX.CONTEXT,
});
const positionClassWithAnimation = (0, nano_theme_1.rule)({
an: 'fadeInScaleIn .04s',
});
/**
* Places popup at the anchor point.
*/
const PositionPopup = ({ fadeIn, children }) => {
const point = (0, context_1.useAnchorPoint)();
const isMounted = (0, useMountedState_1.default)();
const timer = React.useRef(null);
const ro = React.useRef(null);
const ref = React.useCallback((el) => {
if (!el) {
ro.current?.disconnect();
return;
}
ro.current = new ResizeObserver(() => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
timer.current = setTimeout(() => {
if (!isMounted())
return;
const { width, left } = el.getBoundingClientRect();
if (!width)
return;
const _point = point?.get();
if (!_point)
return;
}, 50);
});
if (point) {
const style = point.style();
const s = el.style;
for (const key in style)
s[key] = style[key];
}
ro.current.observe(el);
}, [point]);
return (React.createElement(portal_1.Portal, null,
React.createElement("div", { ref: ref, className: positionClass + (fadeIn ? positionClassWithAnimation : '') }, children)));
};
exports.PositionPopup = PositionPopup;