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

TDesign Component for React

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

import { _ as _defineProperty } from '../../_chunks/dep-d67deb2c.js';
import { _ as _slicedToArray } from '../../_chunks/dep-10d5731f.js';
import { useState, useRef, useCallback, useMemo } from 'react';
import '../../_chunks/dep-8abcbcbc.js';
import '../../_chunks/dep-74a10cfb.js';

function getSizeDraggable(sizeDraggable, limit) {
  if (typeof sizeDraggable === "boolean") {
    return {
      allowSizeDraggable: sizeDraggable,
      max: limit.max,
      min: limit.min
    };
  }
  return {
    allowSizeDraggable: true,
    max: sizeDraggable.max,
    min: sizeDraggable.min
  };
}
function calcSizeRange(size, min, max) {
  return Math.min(Math.max(size, min), max);
}
function calcMoveSize(placement, opts) {
  var x = opts.x,
    y = opts.y,
    max = opts.max,
    min = opts.min,
    maxWidth = opts.maxWidth,
    maxHeight = opts.maxHeight;
  var moveSize;
  switch (placement) {
    case "right":
      moveSize = calcSizeRange(maxWidth - x, min, max);
      break;
    case "left":
      moveSize = calcSizeRange(x, min, max);
      break;
    case "top":
      moveSize = calcSizeRange(y, min, max);
      break;
    case "bottom":
      moveSize = calcSizeRange(maxHeight - y, min, max);
      break;
    default:
      return moveSize;
  }
  return moveSize;
}

var useDrag = function useDrag(placement, sizeDraggable, onSizeDragEnd) {
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    dragSizeValue = _useState2[0],
    changeDragSizeValue = _useState2[1];
  var dragSizeRef = useRef(0);
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isSizeDragging = _useState4[0],
    toggleSizeDragging = _useState4[1];
  var handleMousemove = useCallback(function (e) {
    if (sizeDraggable === false) return;
    var x = e.x,
      y = e.y;
    var maxHeight = document.documentElement.clientHeight;
    var maxWidth = document.documentElement.clientWidth;
    var offsetHeight = 8;
    var offsetWidth = 8;
    var max = placement === "left" || placement === "right" ? maxWidth : maxHeight;
    var min = placement === "left" || placement === "right" ? offsetWidth : offsetHeight;
    var _getSizeDraggable = getSizeDraggable(sizeDraggable, {
        max: max,
        min: min
      }),
      limitMax = _getSizeDraggable.max,
      limitMin = _getSizeDraggable.min;
    var moveSize = calcMoveSize(placement, {
      x: x,
      y: y,
      maxWidth: maxWidth,
      maxHeight: maxHeight,
      max: limitMax,
      min: limitMin
    });
    if (typeof moveSize === "undefined") return;
    changeDragSizeValue("".concat(moveSize, "px"));
    dragSizeRef.current = moveSize;
  }, [placement, sizeDraggable]);
  var draggableLineStyles = useMemo(function () {
    var isHorizontal = ["right", "left"].includes(placement);
    var oppositeMap = {
      left: "right",
      right: "left",
      top: "bottom",
      bottom: "top"
    };
    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
      zIndex: 1,
      position: "absolute",
      background: "transparent"
    }, oppositeMap[placement], 0), "width", isHorizontal ? "16px" : "100%"), "height", isHorizontal ? "100%" : "16px"), "cursor", isHorizontal ? "col-resize" : "row-resize");
  }, [placement]);
  var handleMouseup = useCallback(function (e) {
    document.removeEventListener("mouseup", handleMouseup, true);
    document.removeEventListener("mousemove", handleMousemove, true);
    onSizeDragEnd === null || onSizeDragEnd === void 0 || onSizeDragEnd({
      e: e,
      size: dragSizeRef.current
    });
    toggleSizeDragging(false);
  }, [handleMousemove, onSizeDragEnd]);
  var enableDrag = useCallback(function () {
    document.addEventListener("mouseup", handleMouseup, true);
    document.addEventListener("mousemove", handleMousemove, true);
    toggleSizeDragging(true);
  }, [handleMousemove, handleMouseup]);
  var draggingStyles = isSizeDragging ? {
    userSelect: "none"
  } : {};
  return {
    dragSizeValue: dragSizeValue,
    enableDrag: enableDrag,
    draggableLineStyles: draggableLineStyles,
    draggingStyles: draggingStyles
  };
};

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