wix-style-react/dist/src/SidebarSubMenuNext/components/ContextMenuPopover.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ContextMenuPopover = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Popover = _interopRequireDefault(require("../../Popover"));
var _SidebarNextContext = require("../../SidebarNext/SidebarNextContext");
var _SidebarSubMenuNextSt = require("../SidebarSubMenuNext.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidebarSubMenuNext/components/ContextMenuPopover.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var ContextMenuPopover = exports.ContextMenuPopover = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  var {
    element,
    content,
    disabled,
    dataHook,
    onShow,
    onHide
  } = _ref;
  var {
    skin,
    scrollAreaRef
  } = (0, _react.useContext)(_SidebarNextContext.SidebarNextContext);
  var popoverContentRef = (0, _react.useRef)(null);
  var [shouldShow, setShouldShow] = (0, _react.useState)(false);
  var visible = !disabled && shouldShow;
  var showPopover = (0, _react.useCallback)(() => {
    setShouldShow(true);
  }, []);
  var hidePopover = (0, _react.useCallback)(() => {
    setShouldShow(false);
  }, []);
  (0, _react.useImperativeHandle)(ref, () => ({
    hide: hidePopover
  }), [hidePopover]);
  var popoverOffset = usePopoverOffset(visible, scrollAreaRef, popoverContentRef);
  return /*#__PURE__*/_react.default.createElement(_Popover.default, {
    dataHook: dataHook,
    className: _SidebarSubMenuNextSt.classes.navigationPopoverRoot,
    shown: visible,
    showArrow: true,
    fixed: true,
    appendTo: "window",
    placement: "right",
    zIndex: 3000,
    flip: false,
    theme: skin === 'neutral' ? 'light' : skin,
    moveBy: popoverOffset,
    animate: visible,
    hideDelay: 50,
    showDelay: 200,
    onMouseEnter: showPopover,
    onMouseLeave: hidePopover,
    onShow: onShow,
    onHide: onHide,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_Popover.default.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 7
    }
  }, element), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 81,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("ul", {
    ref: popoverContentRef,
    className: _SidebarSubMenuNextSt.classes.navigationPopover,
    "aria-hidden": true // quick nav is not accessible by design
    ,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82,
      columnNumber: 9
    }
  }, content)));
});
var usePopoverOffset = (popoverVisible, scrollAreaRef, popoverContentRef) => {
  // FIXME: doesn't work in the original implementation (and here too)
  var [moveBy, setMoveBy] = (0, _react.useState)({
    y: 0
  });
  (0, _react.useEffect)(() => {
    var scrollArea = scrollAreaRef == null ? void 0 : scrollAreaRef.current;
    if (!scrollArea) {
      return;
    }
    var handleScroll = () => {
      if (!popoverVisible) {
        setMoveBy({
          y: 0
        });
      }
    };
    scrollArea && scrollArea.addEventListener('scroll', handleScroll);
    window.addEventListener('scroll', handleScroll);
    return () => {
      scrollArea && scrollArea.removeEventListener('scroll', handleScroll);
      window.removeEventListener('scroll', handleScroll);
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [scrollAreaRef]);
  (0, _react.useEffect)(() => {
    if (!popoverVisible) {
      return;
    }
    var timeout = setTimeout(() => {
      var y = moveBy.y || calculateOffsetY(popoverContentRef.current);
      setMoveBy({
        y
      });
    }, 200);
    return () => {
      clearTimeout(timeout);
    };
  }, [popoverVisible, moveBy.y, popoverContentRef]);
  return moveBy;
};
var calculateOffsetY = popoverContentElement => {
  // FIXME: mostly copy-pasta of original implementation
  var rect = popoverContentElement == null ? void 0 : popoverContentElement.getBoundingClientRect();
  if (!rect) {
    return 0;
  }
  var margin = 12;
  var popoverPaddings = 2 * 12;
  var screenHeight = window.innerHeight;
  var {
    top
  } = rect;
  var height = rect.height + popoverPaddings;
  if (top <= margin) {
    return -(top - popoverPaddings - margin);
  }
  if (top + height > screenHeight) {
    return screenHeight - top - height - margin;
  }
  return 0;
};
//# sourceMappingURL=ContextMenuPopover.js.map