tdesign-react/esm/drawer/hooks/useLockStyle.js

TDesign Component for React

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

import { useRef, useCallback, useMemo, useEffect } from 'react';
import { a as getScrollbarWidth } from '../../_chunks/dep-6975355b.js';
import useIsomorphicLayoutEffect from '../../hooks/useLayoutEffect.js';
import { hasBodyScrollbar } from '../../_util/scroll.js';
import '../../_chunks/dep-f213e3a9.js';
import '../../_chunks/dep-132961ab.js';
import '../../_chunks/dep-61f5e3d1.js';
import '../../_chunks/dep-30ed04a0.js';
import '../../_chunks/dep-118954e6.js';
import '../../_chunks/dep-8618a2f1.js';
import '../../_chunks/dep-c37cc2fd.js';
import 'lodash-es';
import '../../_chunks/dep-82b8abc2.js';
import 'raf';
import '../../_util/easing.js';

var key = 1;
function useLockStyle(props) {
  var preventScrollThrough = props.preventScrollThrough,
    mode = props.mode,
    visible = props.visible,
    showInAttachedElement = props.showInAttachedElement,
    placement = props.placement,
    sizeValue = props.sizeValue,
    drawerWrapper = props.drawerWrapper;
  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);
  }, []);
  var marginString = useMemo(function () {
    return {
      top: "margin: ".concat(sizeValue, " 0 0 0"),
      left: "margin: 0 0 0 ".concat(sizeValue),
      right: "margin: 0 0 0 -".concat(sizeValue),
      bottom: "margin: -".concat(sizeValue, " 0 0 0")
    }[placement];
  }, [placement, sizeValue]);
  useIsomorphicLayoutEffect(function () {
    if (typeof document === "undefined") return;
    if (!lockStyleRef.current) {
      lockStyleRef.current = document.createElement("style");
    }
    var scrollbarWidth = hasBodyScrollbar() ? getScrollbarWidth() : 0;
    lockStyleRef.current.dataset.id = "td_drawer_".concat(+new Date(), "_").concat(key += 1);
    lockStyleRef.current.innerHTML = "\n      html body {\n        overflow-y: hidden;\n        transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;\n        ".concat(mode === "push" ? "" : "width: calc(100% - ".concat(scrollbarWidth, "px);"), "\n      }\n    ");
  }, [mode]);
  useIsomorphicLayoutEffect(function () {
    if (drawerWrapper && mode === "push") {
      if (visible) {
        drawerWrapper.parentNode.style.cssText += " \n            transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;\n            ".concat(marginString, ";}\n          ");
      } else {
        drawerWrapper.parentNode.style.cssText = drawerWrapper.parentNode.style.cssText.replace(/margin:.+;/, "");
      }
    }
  }, [mode, marginString, drawerWrapper, visible]);
  useIsomorphicLayoutEffect(function () {
    if (typeof document === "undefined") return;
    if (!preventScrollThrough || showInAttachedElement) return;
    if (visible) {
      document.head.appendChild(lockStyleRef.current);
    } else {
      clearStyleFunc();
    }
  }, [preventScrollThrough, visible, showInAttachedElement, clearStyleFunc]);
  useEffect(function () {
    return clearStyleFunc;
  }, [clearStyleFunc]);
}

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