@clayui/shared/lib/esm/MouseSafeArea.js

ClayShared component

import React from "react";
import { ClayPortal } from "./Portal";
import { useMousePosition } from "./useMousePosition";
function getLeft({ mouseX, x }) {
  return mouseX > x ? void 0 : `${x - Math.max(x - mouseX, 10)}px`;
}
function getRight({ mouseX, ownerW, w, x }) {
  return mouseX > x ? `${ownerW - (x + w) - Math.max(mouseX - (x + w), 10)}px` : void 0;
}
function getWidth({ mouseX, w, x }) {
  return `${Math.max(mouseX > x ? mouseX - (x + w) : x - mouseX, 10)}px`;
}
function getClipPath({ h, mouseX, mouseY, x, y }) {
  return mouseX > x ? `polygon(0% 0%, 0% 100%, 100% ${100 * (mouseY - y) / h}%)` : `polygon(100% 0%, 0% ${100 * (mouseY - y) / h}%, 100% 100%)`;
}
function MouseSafeArea({ parentRef }) {
  const [mouseX, mouseY] = useMousePosition();
  const {
    height: h = 0,
    top = 0,
    width: w = 0,
    x = 0,
    y = 0
  } = parentRef.current?.getBoundingClientRect() || {};
  const { offsetWidth: ownerW = 0 } = parentRef.current?.ownerDocument.body || {};
  const positions = { h, mouseX, mouseY, ownerW, w, x, y };
  return /* @__PURE__ */ React.createElement(ClayPortal, null, /* @__PURE__ */ React.createElement(
    "div",
    {
      style: {
        clipPath: getClipPath(positions),
        height: h,
        left: getLeft(positions),
        position: "absolute",
        right: getRight(positions),
        top,
        width: getWidth(positions),
        zIndex: 1010
      }
    }
  ));
}
export {
  MouseSafeArea
};