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

ClayShared component

/**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */

import React from 'react';
import { ClayPortal } from "./Portal.js";
import { useMousePosition } from "./useMousePosition.js";
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%)`;
};
export const MouseSafeArea = _ref5 => {
  let {
    parentRef
  } = _ref5;
  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
    }
  }));
};