@wix/design-system
Version:
@wix/design-system
108 lines (107 loc) • 3.76 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.usePopoverState = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _excluded = ["scrollAreaRef", "disabled", "isMenuOpen"];
var usePopoverState = _ref => {
var scrollAreaRef = _ref.scrollAreaRef,
disabled = _ref.disabled,
isMenuOpen = _ref.isMenuOpen,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var children = _react.Children.toArray(rest.children);
var popoverContentRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)({
y: 0
}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
moveBy = _useState2[0],
setMoveBy = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isPopoverOpen = _useState4[0],
setIsPopoverOpen = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isMouseOver = _useState6[0],
setIsMouseOver = _useState6[1];
(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.top;
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