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

TDesign Component for React

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

'use strict';

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

var defineProperty = require('../../_chunks/dep-0fe55884.js');
var slicedToArray = require('../../_chunks/dep-5cb0d66d.js');
var React = require('react');
require('../../_chunks/dep-b325182b.js');
require('../../_chunks/dep-737b8bd8.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 = React.useState(null),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    dragSizeValue = _useState2[0],
    changeDragSizeValue = _useState2[1];
  var dragSizeRef = React.useRef(0);
  var _useState3 = React.useState(false),
    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
    isSizeDragging = _useState4[0],
    toggleSizeDragging = _useState4[1];
  var handleMousemove = React.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 = React.useMemo(function () {
    var isHorizontal = ["right", "left"].includes(placement);
    var oppositeMap = {
      left: "right",
      right: "left",
      top: "bottom",
      bottom: "top"
    };
    return defineProperty._defineProperty(defineProperty._defineProperty(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 = React.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 = React.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
  };
};

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