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

TDesign Component for React

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

import { _ as _typeof } from '../../_chunks/dep-eca3a3de.js';
import { useRef } from 'react';
import useMouseEvent from '../../hooks/useMouseEvent.js';

var useDialogDrag = function useDialogDrag(props) {
  var dialogCardRef = props.dialogCardRef,
    canDraggable = props.canDraggable;
  var validWindow = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object";
  var screenHeight = validWindow ? window.innerHeight || document.documentElement.clientHeight : void 0;
  var screenWidth = validWindow ? window.innerWidth || document.documentElement.clientWidth : void 0;
  var dragOffset = useRef({
    x: 0,
    y: 0
  });
  useMouseEvent(dialogCardRef, {
    enabled: canDraggable,
    onDown: function onDown(e) {
      var _dialogCardRef$curren = dialogCardRef.current,
        offsetLeft = _dialogCardRef$curren.offsetLeft,
        offsetTop = _dialogCardRef$curren.offsetTop,
        offsetWidth = _dialogCardRef$curren.offsetWidth,
        offsetHeight = _dialogCardRef$curren.offsetHeight,
        style = _dialogCardRef$curren.style;
      if (offsetWidth > screenWidth || offsetHeight > screenHeight) return;
      style.cursor = "move";
      dragOffset.current = {
        x: e.clientX - offsetLeft,
        y: e.clientY - offsetTop
      };
    },
    onMove: function onMove(e) {
      var _dialogCardRef$curren2 = dialogCardRef.current,
        offsetWidth = _dialogCardRef$curren2.offsetWidth,
        offsetHeight = _dialogCardRef$curren2.offsetHeight,
        style = _dialogCardRef$curren2.style;
      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";
    }
  });
};

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