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

TDesign Component for React

/**
 * tdesign v1.16.6
 * (c) 2026 tdesign
 * @license MIT
 */

import { useRef, useEffect } from 'react';
import useMouseEvent from '../../hooks/useMouseEvent.js';

var useDialogDrag = function useDialogDrag(props) {
  var dialogCardRef = props.dialogCardRef,
    canDraggable = props.canDraggable;
  var isInputInteracting = useRef(false);
  var dragOffset = useRef({
    x: 0,
    y: 0
  });
  var clampPosition = function clampPosition() {
    if (!dialogCardRef.current) return;
    var _dialogCardRef$curren = dialogCardRef.current,
      offsetWidth = _dialogCardRef$curren.offsetWidth,
      offsetHeight = _dialogCardRef$curren.offsetHeight,
      style = _dialogCardRef$curren.style;
    var screenWidth = window.innerWidth;
    var screenHeight = window.innerHeight;
    var left = parseFloat(style.left || "0");
    var top = parseFloat(style.top || "0");
    if (isNaN(left)) left = 0;
    if (isNaN(top)) top = 0;
    var newLeft = left;
    var newTop = top;
    if (newLeft < 0) newLeft = 0;
    if (newTop < 0) newTop = 0;
    if (newLeft + offsetWidth > screenWidth) {
      newLeft = screenWidth - offsetWidth;
    }
    if (newTop + offsetHeight > screenHeight) {
      newTop = screenHeight - offsetHeight;
    }
    style.left = "".concat(newLeft, "px");
    style.top = "".concat(newTop, "px");
  };
  useMouseEvent(dialogCardRef, {
    enabled: canDraggable,
    onDown: function onDown(e) {
      var target = e.target;
      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
        isInputInteracting.current = true;
        return;
      }
      isInputInteracting.current = false;
      var _dialogCardRef$curren2 = dialogCardRef.current,
        offsetLeft = _dialogCardRef$curren2.offsetLeft,
        offsetTop = _dialogCardRef$curren2.offsetTop,
        offsetWidth = _dialogCardRef$curren2.offsetWidth,
        offsetHeight = _dialogCardRef$curren2.offsetHeight,
        style = _dialogCardRef$curren2.style;
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      if (offsetWidth > screenWidth || offsetHeight > screenHeight) return;
      style.cursor = "move";
      dragOffset.current = {
        x: e.clientX - offsetLeft,
        y: e.clientY - offsetTop
      };
    },
    onMove: function onMove(e) {
      if (isInputInteracting.current) return;
      var _dialogCardRef$curren3 = dialogCardRef.current,
        offsetWidth = _dialogCardRef$curren3.offsetWidth,
        offsetHeight = _dialogCardRef$curren3.offsetHeight,
        style = _dialogCardRef$curren3.style;
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      var diffX = e.clientX - dragOffset.current.x;
      var diffY = e.clientY - dragOffset.current.y;
      if (diffX < 0) diffX = 0;
      if (diffY < 0) diffY = 0;
      if (screenWidth - offsetWidth - diffX < 0) diffX = screenWidth - offsetWidth;
      if (screenHeight - offsetHeight - diffY < 0) diffY = screenHeight - offsetHeight;
      style.position = "absolute";
      style.left = "".concat(diffX, "px");
      style.top = "".concat(diffY, "px");
    },
    onUp: function onUp() {
      dialogCardRef.current.style.cursor = "default";
    }
  });
  useEffect(function () {
    if (!canDraggable) return;
    window.addEventListener("resize", clampPosition);
    return function () {
      return window.removeEventListener("resize", clampPosition);
    };
  }, [canDraggable]);
  return {
    isInputInteracting: isInputInteracting
  };
};

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