tdesign-react/cjs/hooks/useDragSorter.js

TDesign Component for React

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

'use strict';

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

var slicedToArray = require('../_chunks/dep-e17e2d31.js');
var React = require('react');
var hooks_useEventCallback = require('./useEventCallback.js');
require('../_chunks/dep-b7d577ac.js');
require('../_util/noop.js');

function useDragSorter(props) {
  var sortOnDraggable = props.sortOnDraggable,
    onDragSort = props.onDragSort,
    onDragOverCheck = props.onDragOverCheck;
  var _useState = React.useState(-1),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    draggingIndex = _useState2[0],
    setDraggingIndex = _useState2[1];
  var _useState3 = React.useState(null),
    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
    dragStartData = _useState4[0],
    setDragStartData = _useState4[1];
  var _useState5 = React.useState(null),
    _useState6 = slicedToArray._slicedToArray(_useState5, 2);
    _useState6[0];
    var setIsDropped = _useState6[1];
  var _useState7 = React.useState({
      nodeX: 0,
      nodeWidth: 0,
      mouseX: 0
    }),
    _useState8 = slicedToArray._slicedToArray(_useState7, 2),
    startInfo = _useState8[0],
    setStartInfo = _useState8[1];
  var onDragSortEvent = hooks_useEventCallback["default"](onDragSort);
  var _onDragOver = React.useCallback(function (e, index, record) {
    var _e$target;
    e.preventDefault();
    if (draggingIndex === index || draggingIndex === -1) return;
    if (onDragOverCheck !== null && onDragOverCheck !== void 0 && onDragOverCheck.targetClassNameRegExp && !(onDragOverCheck !== null && onDragOverCheck !== void 0 && onDragOverCheck.targetClassNameRegExp.test((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.className))) {
      return;
    }
    if (onDragOverCheck !== null && onDragOverCheck !== void 0 && onDragOverCheck.x) {
      if (!startInfo.nodeWidth) return;
      var _e$target$getBounding = e.target.getBoundingClientRect(),
        x = _e$target$getBounding.x,
        width = _e$target$getBounding.width;
      var targetNodeMiddleX = x + width / 2;
      var clientX = e.clientX || 0;
      var draggingNodeLeft = clientX - (startInfo.mouseX - startInfo.nodeX);
      var draggingNodeRight = draggingNodeLeft + startInfo.nodeWidth;
      var overlap = false;
      if (draggingNodeLeft > x && draggingNodeLeft < x + width) {
        overlap = draggingNodeLeft < targetNodeMiddleX;
      } else {
        overlap = draggingNodeRight > targetNodeMiddleX;
      }
      if (!overlap) return;
    }
    onDragSortEvent({
      currentIndex: draggingIndex,
      current: dragStartData,
      target: record,
      targetIndex: index
    });
    setDraggingIndex(index);
  }, [draggingIndex, onDragOverCheck === null || onDragOverCheck === void 0 ? void 0 : onDragOverCheck.targetClassNameRegExp, onDragOverCheck === null || onDragOverCheck === void 0 ? void 0 : onDragOverCheck.x, dragStartData, startInfo.nodeWidth, startInfo.mouseX, startInfo.nodeX, onDragSortEvent]);
  if (!sortOnDraggable) {
    return {};
  }
  function _onDragStart(e, index, record) {
    setDraggingIndex(index);
    setDragStartData(record);
    if (onDragOverCheck) {
      var _e$target$getBounding2 = e.target.getBoundingClientRect(),
        x = _e$target$getBounding2.x,
        width = _e$target$getBounding2.width;
      setStartInfo({
        nodeX: x,
        nodeWidth: width,
        mouseX: e.clientX || 0
      });
    }
  }
  function _onDrop() {
    setIsDropped(true);
  }
  function _onDragEnd() {
    setIsDropped(false);
    setDraggingIndex(-1);
    setDragStartData(null);
  }
  function getDragProps(index, record) {
    if (sortOnDraggable) {
      return {
        draggable: true,
        onDragStart: function onDragStart(e) {
          _onDragStart(e, index, record);
        },
        onDragOver: function onDragOver(e) {
          _onDragOver(e, index, record);
        },
        onDrop: function onDrop() {
          _onDrop();
        },
        onDragEnd: function onDragEnd() {
          _onDragEnd();
        }
      };
    }
    return {};
  }
  return {
    onDragStart: _onDragStart,
    onDragOver: _onDragOver,
    onDrop: _onDrop,
    onDragEnd: _onDragEnd,
    getDragProps: getDragProps,
    dragging: draggingIndex !== -1
  };
}

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