linkmore-design/lib/lm-drag/components/DndContainer.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _core = require("@dnd-kit/core");
var _modifiers = require("@dnd-kit/modifiers");
var _sortable = require("@dnd-kit/sortable");
var _react = _interopRequireDefault(require("react"));
var _sortableBox = _interopRequireDefault(require("./sortableBox"));
const DragOver = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const {
    isDragging,
    activeId,
    rowKey,
    children,
    options
  } = instance;
  const item = activeId && options.find(v => v[rowKey] === activeId);
  return /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
    adjustScale: false
  }, isDragging ? children({
    item,
    listeners: {},
    isDragging
  }) : null);
});

/*
 * restrictToParentElement 拖拽限制在父元素内
 */
// 可拖拽容器
const DndContainer = ({
  options,
  rowKey,
  children,
  move,
  activationConstraint
}) => {
  const [isDragging, setIsDragging] = _react.default.useState(false); // 是否拖拽中
  const [activeId, setActiveId] = _react.default.useState(null); // 是否拖拽中

  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
    activationConstraint: {
      delay: 150,
      tolerance: 5,
      ...activationConstraint
    }
  }), (0, _core.useSensor)(_core.KeyboardSensor, {
    coordinateGetter: _sortable.sortableKeyboardCoordinates
  }));
  const handleMove = (activeItem, overItem) => {
    const fileMap = options.map(v => {
      if (v[rowKey] === activeItem[rowKey]) {
        return {
          ...overItem
        };
      }
      if (v[rowKey] === overItem[rowKey]) {
        return {
          ...activeItem
        };
      }
      return v;
    });
    move?.(activeItem, overItem, fileMap);
  };

  // 开始拖拽
  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) {
      handleMove(active.data.current.item, over.data.current.item);
    }
  };
  const instance = {
    isDragging,
    activeId,
    options,
    rowKey,
    children,
    move,
    items: options?.map(v => v[rowKey])
  };
  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
    sensors: sensors,
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragCancel: () => setActiveId(null),
    modifiers: [_modifiers.restrictToParentElement],
    collisionDetection: _core.closestCenter
  }, /*#__PURE__*/_react.default.createElement(_sortableBox.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(DragOver, {
    instance: instance
  }));
};
var _default = DndContainer;
exports.default = _default;