SHARE
TWEET

Untitled

a guest Jan 22nd, 2020 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. interface ContentProps {
  2.   pos: Point;
  3.   className?: string;
  4. }
  5.  
  6. const Content: React.FC<ContentProps> = ({ pos, className, children }) => {
  7.   const ref = React.useRef<HTMLDivElement>(null);
  8.   const { clientWidth, clientHeight } = document.documentElement;
  9.   React.useLayoutEffect(() => {
  10.     if (!ref.current)
  11.       return;
  12.     const rect = ref.current.getBoundingClientRect();
  13.     if (rect.left + rect.width > clientWidth) {
  14.       ref.current.style.left = Math.max(0, rect.left - rect.width) + 'px';
  15.     }
  16.     if (rect.top + rect.height > clientHeight) {
  17.       ref.current.style.top = Math.max(0, rect.top - rect.height) + 'px';
  18.     }
  19.   }, [pos.x, pos.y]);
  20.   return (
  21.     <Defer>
  22.       <div ref={ref} className={className} style={{
  23.        position: 'fixed', left: pos.x, top: pos.y, maxWidth: clientWidth, maxHeight: clientHeight
  24.      }}>
  25.         {children}
  26.       </div>
  27.     </Defer>
  28.   );
  29. };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top