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

ClayShared component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MouseSafeArea = void 0;
var _react = _interopRequireDefault(require("react"));
var _Portal = require("./Portal");
var _useMousePosition = require("./useMousePosition");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */

const getLeft = _ref => {
  let {
    mouseX,
    x
  } = _ref;
  return mouseX > x ? undefined : `${x - Math.max(x - mouseX, 10)}px`;
};
const getRight = _ref2 => {
  let {
    mouseX,
    ownerW,
    w,
    x
  } = _ref2;
  return mouseX > x ? `${ownerW - (x + w) - Math.max(mouseX - (x + w), 10)}px` : undefined;
};
const getWidth = _ref3 => {
  let {
    mouseX,
    w,
    x
  } = _ref3;
  return `${Math.max(mouseX > x ? mouseX - (x + w) : x - mouseX, 10)}px`;
};
const getClipPath = _ref4 => {
  let {
    h,
    mouseX,
    mouseY,
    x,
    y
  } = _ref4;
  return mouseX > x ? `polygon(0% 0%, 0% 100%, 100% ${100 * (mouseY - y) / h}%)` : `polygon(100% 0%, 0% ${100 * (mouseY - y) / h}%, 100% 100%)`;
};
const MouseSafeArea = _ref5 => {
  let {
    parentRef
  } = _ref5;
  const [mouseX, mouseY] = (0, _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__*/_react.default.createElement(_Portal.ClayPortal, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      clipPath: getClipPath(positions),
      height: h,
      left: getLeft(positions),
      position: 'absolute',
      right: getRight(positions),
      top,
      width: getWidth(positions),
      zIndex: 1010
    }
  }));
};
exports.MouseSafeArea = MouseSafeArea;