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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _core = require("@dnd-kit/core");
var _modifiers = require("@dnd-kit/modifiers");
var _sortable = require("@dnd-kit/sortable");
const DragOver = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const {
    isDragging,
    activeId,
    options
  } = instance;
  const item = activeId && options.find(v => v.dataIndex === activeId);
  return /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
    adjustScale: false
  }, isDragging ? /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_editable_col_drag"
  }, item?.title) : null);
});
// 可拖拽容器
const DndContainer = ({
  children,
  move,
  options,
  rowKey
}) => {
  const [isDragging, setIsDragging] = _react.default.useState(false); // 是否拖拽中
  const [activeId, setActiveId] = _react.default.useState(null); // 是否拖拽中

  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
    coordinateGetter: _sortable.sortableKeyboardCoordinates
  }));

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

  // 拖拽结束
  const handleDragEnd = event => {
    const {
      active,
      over
    } = event;
    setActiveId(null);

    // 未移入时触发
    if (!over?.id) {
      return;
    }

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