wix-style-react/dist/src/SidebarSubMenuNext/hooks/usePopoverState.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.usePopoverState = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _excluded = ["scrollAreaRef", "disabled", "isMenuOpen"];
var usePopoverState = _ref => {
  var {
      scrollAreaRef,
      disabled,
      isMenuOpen
    } = _ref,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var children = _react.Children.toArray(rest.children);
  var popoverContentRef = (0, _react.useRef)(null);
  var [moveBy, setMoveBy] = (0, _react.useState)({
    y: 0
  });
  var [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
  var [isMouseOver, setIsMouseOver] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    var onSidebarScroll = () => !isPopoverOpen && setMoveBy({
      y: 0
    });
    var scrollArea = scrollAreaRef && scrollAreaRef.current;
    if (scrollArea) {
      scrollArea && scrollArea.addEventListener('scroll', onSidebarScroll);
      window.addEventListener('scroll', onSidebarScroll);
    }
    return () => {
      scrollArea && scrollArea.removeEventListener('scroll', onSidebarScroll);
      window.removeEventListener('scroll', onSidebarScroll);
    };
    // TODO: fix ESLint error
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [scrollAreaRef]);
  var calculateMoveBy = (0, _react.useCallback)(() => {
    var rect = popoverContentRef && popoverContentRef.current && popoverContentRef.current.getBoundingClientRect();
    if (!rect) return 0;
    var margin = 12;
    var popoverPaddings = 2 * 12;
    var screenHeight = window.innerHeight;
    var {
      top
    } = rect;
    var height = rect.height + popoverPaddings;
    var isPopoverOffsetToTop = top <= margin;
    var popoverTopValue = -(top - popoverPaddings - margin);
    var isPopoverOffsetToBottom = top + height > screenHeight;
    var popoverBottomValue = screenHeight - top - height - margin;
    if (isPopoverOffsetToTop) {
      return popoverTopValue;
    }
    if (isPopoverOffsetToBottom) {
      return popoverBottomValue;
    }
    return 0;
  }, [popoverContentRef]);
  (0, _react.useEffect)(() => {
    var timeout;
    if (isPopoverOpen) {
      timeout = setTimeout(() => {
        setMoveBy({
          y: moveBy.y || calculateMoveBy()
        });
      }, 200);
    }
    return () => {
      clearTimeout(timeout);
    };
  }, [isPopoverOpen, calculateMoveBy, moveBy.y]);
  (0, _react.useEffect)(() => {
    if (!isMouseOver) {
      return;
    }
    setIsPopoverOpen(!isMenuOpen);
  }, [isMenuOpen, isMouseOver]);
  var onOpen = (0, _react.useCallback)(() => {
    if (disabled || !children || !children.length) return;
    if (!isMenuOpen) {
      setIsPopoverOpen(true);
    }
    setIsMouseOver(true);
    // TODO: fix ESLint error
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [disabled, isMenuOpen]);
  var onClose = () => {
    setIsPopoverOpen(false);
    setIsMouseOver(false);
  };
  return {
    moveBy,
    popoverContentRef,
    isPopoverOpen,
    onOpen,
    onClose
  };
};
exports.usePopoverState = usePopoverState;
//# sourceMappingURL=usePopoverState.js.map