@cbinsights/fds/lib/components/Popover/hooks.js

Form: A design system by CB Insights

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDisableScroll = exports.useCloseOnScroll = void 0;

var _react = require("react");

var overflowStyle = null;
/**
 * Hook that disables scroll on a DOM node when `isDisabled` is true.
 *
 * @param {Object} disableScrollRef - react ref to DOM node
 * @param {Boolean} isDisabled
 */

var useDisableScroll = function useDisableScroll(disableScrollRef, isDisabled) {
  (0, _react.useEffect)(function () {
    if (disableScrollRef !== null && disableScrollRef !== void 0 && disableScrollRef.current) {
      var domNode = disableScrollRef.current;

      if (isDisabled) {
        overflowStyle = domNode.style.overflow;
        domNode.style.overflow = 'hidden';
      } else if (overflowStyle !== null) {
        domNode.style.overflow = overflowStyle;
      }
    }
  }, [disableScrollRef, isDisabled]);
};
/**
 * Hook that invokes `closeCallback` if a popover is active when a user scrolls.
 *
 * @param {Object} closeOnScrollRef - react ref to scrolling DOM node
 * @param {Boolean} isActive - if the popover is currently open/active
 * @param {Boolean} closeCallback - function that closes the popover
 */


exports.useDisableScroll = useDisableScroll;

var useCloseOnScroll = function useCloseOnScroll(closeOnScrollRef, isActive, closeCallback) {
  (0, _react.useEffect)(function () {
    if (closeOnScrollRef !== null && closeOnScrollRef !== void 0 && closeOnScrollRef.current && isActive) {
      var scrollRef = closeOnScrollRef.current;
      scrollRef.addEventListener('scroll', function scrollLogic() {
        closeCallback();
        scrollRef.removeEventListener('scroll', scrollLogic);
      });
    }
  }, [closeOnScrollRef, isActive]);
};

exports.useCloseOnScroll = useCloseOnScroll;