tweak-tools
Version:
Tweak your React projects until awesomeness
28 lines (27 loc) • 1.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePopin = void 0;
const react_1 = require("react");
function usePopin(margin = 3) {
const popinRef = (0, react_1.useRef)(null);
const wrapperRef = (0, react_1.useRef)(null);
const [shown, setShow] = (0, react_1.useState)(false);
const show = (0, react_1.useCallback)(() => setShow(true), []);
const hide = (0, react_1.useCallback)(() => setShow(false), []);
(0, react_1.useLayoutEffect)(() => {
if (shown) {
const { bottom, top, left } = popinRef.current.getBoundingClientRect();
const { height } = wrapperRef.current.getBoundingClientRect();
const direction = bottom + height > window.innerHeight - 40 ? 'up' : 'down';
wrapperRef.current.style.position = 'fixed';
wrapperRef.current.style.zIndex = '10000';
wrapperRef.current.style.left = left + 'px';
if (direction === 'down')
wrapperRef.current.style.top = bottom + margin + 'px';
else
wrapperRef.current.style.bottom = window.innerHeight - top + margin + 'px';
}
}, [margin, shown]);
return { popinRef, wrapperRef, shown, show, hide };
}
exports.usePopin = usePopin;