tdesign-react/lib/dialog/hooks/useLockStyle.js

TDesign Component for React

/**
 * tdesign v1.11.6
 * (c) 2025 tdesign
 * @license MIT
 */

import { useRef, useCallback } from 'react';
import { a as getScrollbarWidth } from '../../_chunks/dep-fcea50ed.js';
import useIsomorphicLayoutEffect from '../../hooks/useLayoutEffect.js';
import '../../_chunks/dep-3bd4dc4e.js';
import '../../_chunks/dep-7a114245.js';
import '../../_chunks/dep-901cf2d8.js';
import 'lodash-es';
import '../../_util/dom.js';
import 'raf';
import '../../_util/easing.js';

var key = 1;
function useDialogLockStyle(_ref) {
  var preventScrollThrough = _ref.preventScrollThrough,
    visible = _ref.visible,
    mode = _ref.mode,
    showInAttachedElement = _ref.showInAttachedElement;
  var lockStyleRef = useRef(null);
  var timerRef = useRef(null);
  var clearStyleFunc = useCallback(function () {
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(function () {
      var _lockStyleRef$current, _lockStyleRef$current2;
      (_lockStyleRef$current = lockStyleRef.current.parentNode) === null || _lockStyleRef$current === void 0 || (_lockStyleRef$current2 = _lockStyleRef$current.removeChild) === null || _lockStyleRef$current2 === void 0 || _lockStyleRef$current2.call(_lockStyleRef$current, lockStyleRef.current);
    }, 150);
  }, []);
  useIsomorphicLayoutEffect(function () {
    if (typeof document === "undefined") return;
    if (!lockStyleRef.current) {
      lockStyleRef.current = document.createElement("style");
    }
    var hasScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
    var scrollbarWidth = hasScrollBar ? getScrollbarWidth() : 0;
    lockStyleRef.current.dataset.id = "td_dialog_".concat(+new Date(), "_").concat(key += 1);
    lockStyleRef.current.innerHTML = "\n      html body {\n        overflow-y: hidden;\n        width: calc(100% - ".concat(scrollbarWidth, "px);\n      }\n    ");
    return clearStyleFunc;
  }, [clearStyleFunc]);
  useIsomorphicLayoutEffect(function () {
    if (typeof document === "undefined") return;
    if (mode !== "modal" || !preventScrollThrough || showInAttachedElement) return;
    if (visible) {
      document.head.appendChild(lockStyleRef.current);
    } else {
      clearStyleFunc();
    }
  }, [preventScrollThrough, visible, mode, showInAttachedElement, clearStyleFunc]);
}

export { useDialogLockStyle as default };
//# sourceMappingURL=useLockStyle.js.map