tdesign-react/es/hooks/useDragSorter.js

TDesign Component for React

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

import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import { useState, useCallback } from 'react';
import useEventCallback from './useEventCallback.js';
import '../_chunks/dep-026a4c6b.js';
import '../_util/noop.js';

function useDragSorter(props) {
  var sortOnDraggable = props.sortOnDraggable,
    onDragSort = props.onDragSort,
    onDragOverCheck = props.onDragOverCheck;
  var _useState = useState(-1),
    _useState2 = _slicedToArray(_useState, 2),
    draggingIndex = _useState2[0],
    setDraggingIndex = _useState2[1];
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    dragStartData = _useState4[0],
    setDragStartData = _useState4[1];
  var _useState5 = useState(null),
    _useState6 = _slicedToArray(_useState5, 2),
    isDropped = _useState6[0],
    setIsDropped = _useState6[1];
  var _useState7 = useState({
      nodeX: 0,
      nodeWidth: 0,
      mouseX: 0
    }),
    _useState8 = _slicedToArray(_useState7, 2),
    startInfo = _useState8[0],
    setStartInfo = _useState8[1];
  var onDragSortEvent = useEventCallback(onDragSort);
  var _onDragOver = 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() {
    if (!isDropped) {}
    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
  };
}

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