@yandex/ui/usePreventScroll/usePreventScroll.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePreventScroll = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect");
var ScrollLocker = tslib_1.__importStar(require("../lib/scroll-locker"));
/**
 * Реакт-хук, запрещающий прокрутку содержимого на элементе.
 *
 * @example
 * const Modal: FC<ModalProps> = (props) => {
 *   const { visible } = props;
 *   const containerRef = useRef(document.documentElement);
 *
 *   usePreventScroll({ enabled: visible, containerRef });
 *
 *   ...
 * }
 */
function usePreventScroll(options) {
    var enabled = options.enabled, containerRef = options.containerRef;
    var elementRef = react_1.useRef(null);
    var lockedRef = react_1.useRef(false);
    useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
        var container = containerRef ? containerRef.current : null;
        if (elementRef.current === container) {
            return;
        }
        // Обрабатываем случай, когда ссылка на элемент поменялась,
        // а у текущего включена блокировка
        if (enabled && lockedRef.current) {
            ScrollLocker.unlock(elementRef.current);
            ScrollLocker.lock(container);
        }
        elementRef.current = container;
    });
    useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
        if (!enabled) {
            return;
        }
        lockedRef.current = true;
        ScrollLocker.lock(elementRef.current);
        return function () {
            lockedRef.current = false;
            ScrollLocker.unlock(elementRef.current);
        };
    }, [enabled]);
}
exports.usePreventScroll = usePreventScroll;