@ntragas/pouncejstest/dist/cjs/components/Popover/usePopoverContentAlignment.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

function getForcedDirection(targetRect, popoverRect, alignment) {
  var collisions;
  var isHorizontalAlignment = alignment.startsWith('left') || alignment.startsWith('right');

  if (isHorizontalAlignment) {
    collisions = {
      top: targetRect.top + targetRect.height < popoverRect.height,
      right: window.innerWidth < targetRect.right + popoverRect.width,
      bottom: window.innerHeight < targetRect.top + popoverRect.height,
      left: targetRect.left < popoverRect.width
    };
  } else {
    collisions = {
      top: targetRect.top - popoverRect.height < 0,
      right: window.innerWidth < targetRect.left + popoverRect.width,
      bottom: window.innerHeight < targetRect.bottom + popoverRect.height,
      left: targetRect.left + targetRect.width - popoverRect.width < 0
    };
  }

  return {
    forcedRightwards: !collisions.right && collisions.left,
    forcedLeftwards: !collisions.left && collisions.right,
    forcedUpwards: !collisions.top && collisions.bottom,
    forcedDownwards: !collisions.bottom && collisions.top
  };
}

var leftAlignmentLeft = function leftAlignmentLeft(targetRect, popoverRect, direction) {
  return direction.forcedRightwards ? targetRect.right + window.pageXOffset + "px" : targetRect.left + window.pageXOffset - popoverRect.width + "px";
};

var rightAlignmentLeft = function rightAlignmentLeft(targetRect, popoverRect, direction) {
  return direction.forcedLeftwards ? targetRect.left + window.pageXOffset - popoverRect.width + "px" : targetRect.right + window.pageXOffset + "px";
};

var bottomAlignmentTop = function bottomAlignmentTop(targetRect, popoverRect, direction) {
  return direction.forcedUpwards ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px";
};

var topAlignmentTop = function topAlignmentTop(targetRect, popoverRect, direction) {
  return direction.forcedDownwards ? targetRect.top + targetRect.height + window.pageYOffset + "px" : targetRect.top - popoverRect.height + window.pageYOffset + "px";
};

var horizontalTopAlignmentTop = function horizontalTopAlignmentTop(targetRect, popoverRect, direction) {
  return direction.forcedDownwards ? targetRect.top + window.pageYOffset + "px" : targetRect.bottom - popoverRect.height + window.pageYOffset + "px";
};

var horizontalBottomAlignmentTop = function horizontalBottomAlignmentTop(targetRect, popoverRect, direction) {
  return direction.forcedUpwards ? targetRect.bottom - popoverRect.height + window.pageYOffset + "px" : targetRect.top + window.pageYOffset + "px";
};

var horizontalCenterAlignmentTop = function horizontalCenterAlignmentTop(targetRect, popoverRect, direction) {
  if (direction.forcedUpwards) {
    return targetRect.bottom - popoverRect.height + window.pageYOffset + "px";
  }

  if (direction.forcedDownwards) {
    return targetRect.top + window.pageYOffset + "px";
  }

  return targetRect.bottom - popoverRect.height / 2 - targetRect.height / 2 + window.pageYOffset + "px";
};

var verticalLeftAlignmentLeft = function verticalLeftAlignmentLeft(targetRect, popoverRect, direction) {
  return direction.forcedRightwards ? targetRect.left + window.pageXOffset + "px" : targetRect.right - popoverRect.width + window.pageXOffset + "px";
};

var verticalRightAlignmentLeft = function verticalRightAlignmentLeft(targetRect, popoverRect, direction) {
  return direction.forcedLeftwards ? targetRect.right - popoverRect.width + window.pageXOffset + "px" : targetRect.left + window.pageXOffset + "px";
};

var verticalCenterAlignmentLeft = function verticalCenterAlignmentLeft(targetRect, popoverRect, direction) {
  if (direction.forcedLeftwards) {
    return targetRect.right - popoverRect.width + window.pageXOffset + "px";
  }

  if (direction.forcedRightwards) {
    return targetRect.right - targetRect.width + window.pageXOffset + "px";
  }

  return targetRect.right - popoverRect.width / 2 - targetRect.width / 2 + window.pageXOffset + "px";
};

var usePopoverAlignment = function usePopoverAlignment(alignment) {
  return _react.default.useCallback(function (targetRect, popoverRect) {
    if (!targetRect || !popoverRect) {
      return {};
    }

    var direction = getForcedDirection(targetRect, popoverRect, alignment);

    switch (alignment) {
      case 'left-bottom':
        return {
          left: leftAlignmentLeft(targetRect, popoverRect, direction),
          top: horizontalBottomAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'left-center':
        return {
          left: leftAlignmentLeft(targetRect, popoverRect, direction),
          top: horizontalCenterAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'left-top':
        return {
          left: leftAlignmentLeft(targetRect, popoverRect, direction),
          top: horizontalTopAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'top-left':
        return {
          left: verticalLeftAlignmentLeft(targetRect, popoverRect, direction),
          top: topAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'top-center':
        return {
          left: verticalCenterAlignmentLeft(targetRect, popoverRect, direction),
          top: topAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'top-right':
        return {
          left: verticalRightAlignmentLeft(targetRect, popoverRect, direction),
          top: topAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'right-bottom':
        return {
          left: rightAlignmentLeft(targetRect, popoverRect, direction),
          top: horizontalBottomAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'right-center':
        return {
          left: rightAlignmentLeft(targetRect, popoverRect, direction),
          top: horizontalCenterAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'right-top':
        return {
          left: rightAlignmentLeft(targetRect, popoverRect, direction),
          top: horizontalTopAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'bottom-left':
        return {
          left: verticalLeftAlignmentLeft(targetRect, popoverRect, direction),
          top: bottomAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'bottom-center':
        return {
          left: verticalCenterAlignmentLeft(targetRect, popoverRect, direction),
          top: bottomAlignmentTop(targetRect, popoverRect, direction)
        };

      case 'bottom-right':
      default:
        return {
          left: verticalRightAlignmentLeft(targetRect, popoverRect, direction),
          top: bottomAlignmentTop(targetRect, popoverRect, direction)
        };
    }
  }, [alignment]);
};

var _default = usePopoverAlignment;
exports.default = _default;