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

TDesign Component for React

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var getScrollbarWidth = require('../../_chunks/dep-b57a7208.js');
var hooks_useLayoutEffect = require('../../hooks/useLayoutEffect.js');
var _util_scroll = require('../../_util/scroll.js');
require('../../_chunks/dep-b8d4cf07.js');
require('../../_chunks/dep-64a1054a.js');
require('../../_chunks/dep-b7d577ac.js');
require('../../_chunks/dep-422caf30.js');
require('../../_chunks/dep-f0379c5f.js');
require('../../_chunks/dep-6d4d8660.js');
require('../../_chunks/dep-ddacd27a.js');
require('../../_chunks/dep-3f65dfe7.js');
require('../../_chunks/dep-3e2d2665.js');
require('../../_chunks/dep-028b759d.js');
require('raf');
require('../../_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 = React.useRef(null);
  var timerRef = React.useRef(null);
  var clearStyleFunc = React.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 = React.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]);
  hooks_useLayoutEffect["default"](function () {
    if (typeof document === "undefined") return;
    if (!lockStyleRef.current) {
      lockStyleRef.current = document.createElement("style");
    }
    var scrollbarWidth = _util_scroll.hasBodyScrollbar() ? getScrollbarWidth.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]);
  hooks_useLayoutEffect["default"](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]);
  hooks_useLayoutEffect["default"](function () {
    if (typeof document === "undefined") return;
    if (!preventScrollThrough || showInAttachedElement) return;
    if (visible) {
      document.head.appendChild(lockStyleRef.current);
    } else {
      clearStyleFunc();
    }
  }, [preventScrollThrough, visible, showInAttachedElement, clearStyleFunc]);
  React.useEffect(function () {
    return clearStyleFunc;
  }, [clearStyleFunc]);
}

exports["default"] = useLockStyle;
//# sourceMappingURL=useLockStyle.js.map