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

ClayShared component

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var MouseSafeArea_exports = {};
__export(MouseSafeArea_exports, {
  MouseSafeArea: () => MouseSafeArea
});
module.exports = __toCommonJS(MouseSafeArea_exports);
var import_react = __toESM(require("react"));
var import_Portal = require("./Portal");
var import_useMousePosition = require("./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] = (0, import_useMousePosition.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__ */ import_react.default.createElement(import_Portal.ClayPortal, null, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      style: {
        clipPath: getClipPath(positions),
        height: h,
        left: getLeft(positions),
        position: "absolute",
        right: getRight(positions),
        top,
        width: getWidth(positions),
        zIndex: 1010
      }
    }
  ));
}