excalidraw/src/components/Popover.tsx

57 lines
1.6 KiB
TypeScript
Raw Normal View History

import React, { useLayoutEffect, useRef, useEffect } from "react";
import "./Popover.css";
2020-03-16 19:07:47 -07:00
import { unstable_batchedUpdates } from "react-dom";
2020-01-07 07:50:59 +05:00
type Props = {
top?: number;
left?: number;
children?: React.ReactNode;
2020-04-10 18:09:29 -04:00
onCloseRequest?(event: PointerEvent): void;
fitInViewport?: boolean;
2020-01-07 07:50:59 +05:00
};
export const Popover = ({
children,
left,
top,
onCloseRequest,
2020-01-24 12:04:54 +02:00
fitInViewport = false,
}: Props) => {
const popoverRef = useRef<HTMLDivElement>(null);
// ensure the popover doesn't overflow the viewport
useLayoutEffect(() => {
if (fitInViewport && popoverRef.current) {
const element = popoverRef.current;
const { x, y, width, height } = element.getBoundingClientRect();
const viewportWidth = window.innerWidth;
if (x + width > viewportWidth) {
element.style.left = `${viewportWidth - width}px`;
}
const viewportHeight = window.innerHeight;
if (y + height > viewportHeight) {
element.style.top = `${viewportHeight - height}px`;
}
}
}, [fitInViewport]);
useEffect(() => {
if (onCloseRequest) {
2020-04-10 18:09:29 -04:00
const handler = (event: PointerEvent) => {
if (!popoverRef.current?.contains(event.target as Node)) {
unstable_batchedUpdates(() => onCloseRequest(event));
}
};
document.addEventListener("pointerdown", handler, false);
return () => document.removeEventListener("pointerdown", handler, false);
}
}, [onCloseRequest]);
2020-01-07 07:50:59 +05:00
return (
<div className="popover" style={{ top: top, left: left }} ref={popoverRef}>
2020-01-07 07:50:59 +05:00
{children}
</div>
);
};