linkmore-design/es/lm-edit-table/DndContainer.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { memo } from 'react';
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay } from '@dnd-kit/core';
import { restrictToParentElement } from '@dnd-kit/modifiers';
import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
var DragOver = /*#__PURE__*/React.memo(function (_ref) {
  var instance = _ref.instance;
  var isDragging = instance.isDragging,
    activeId = instance.activeId,
    options = instance.options;
  var item = activeId && options.find(function (v) {
    return v.dataIndex === activeId;
  });
  return /*#__PURE__*/React.createElement(DragOverlay, {
    adjustScale: false
  }, isDragging ? /*#__PURE__*/React.createElement("div", {
    className: "lm_editable_col_drag"
  }, item === null || item === void 0 ? void 0 : item.title) : null);
});
// 可拖拽容器
var DndContainer = function DndContainer(_ref2) {
  var children = _ref2.children,
    move = _ref2.move,
    options = _ref2.options,
    rowKey = _ref2.rowKey;
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isDragging = _React$useState2[0],
    setIsDragging = _React$useState2[1]; // 是否拖拽中
  var _React$useState3 = React.useState(null),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    activeId = _React$useState4[0],
    setActiveId = _React$useState4[1]; // 是否拖拽中

  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
    coordinateGetter: sortableKeyboardCoordinates
  }));

  // 开始拖拽
  var handleDragStart = function handleDragStart(_ref3) {
    var active = _ref3.active;
    setIsDragging(true);
    if (!active) {
      return;
    }
    setActiveId(active.id);
  };

  // 拖拽结束
  var handleDragEnd = function handleDragEnd(event) {
    var active = event.active,
      over = event.over;
    setActiveId(null);

    // 未移入时触发
    if (!(over !== null && over !== void 0 && over.id)) {
      return;
    }

    // 移入时触发更新数据
    if (active.id !== over.id) {
      move(active.id, over.id);
    }
  };
  var instance = {
    isDragging: isDragging,
    activeId: activeId,
    options: options,
    rowKey: rowKey,
    children: children,
    move: move,
    items: options === null || options === void 0 ? void 0 : options.map(function (v) {
      return v[rowKey];
    })
  };
  return /*#__PURE__*/React.createElement(DndContext, {
    sensors: sensors,
    collisionDetection: closestCenter,
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragCancel: function onDragCancel() {
      return setActiveId(null);
    },
    modifiers: [restrictToParentElement]
  }, children, /*#__PURE__*/React.createElement(DragOver, {
    instance: instance
  }));
};
export default /*#__PURE__*/memo(DndContainer);