linkmore-design/lib/lm-table/components/rowSort/DndContainerRow.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");
var _lodash = require("lodash");
var _ = require("../../..");
require("./index.less");
/* eslint-disable no-unused-vars */

const DragOver = /*#__PURE__*/_react.default.memo(({
  instance
}) => {
  const {
    isDragging,
    activeId,
    rowKey,
    options,
    columns
  } = instance;
  const item = activeId && options.find(v => v[rowKey] === activeId);
  const filterCol = columns?.filter(item => (0, _lodash.omit)(item, 'onCell'));
  return /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
    adjustScale: false
  }, isDragging ? /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_editable_darg_item",
    style: {
      width: instance.tableWidth,
      backgroundColor: '#fff',
      overflowX: 'hidden'
    }
  }, /*#__PURE__*/_react.default.createElement(_.Table, {
    columns: filterCol || [],
    showHeader: false,
    style: {
      overflow: 'hidden'
    },
    pagination: false,
    dataSource: [item]
  })) : null);
});

// 可拖拽容器
const DndContainer = ({
  children,
  options,
  move,
  rowKey,
  items,
  tableWidth,
  columns
}) => {
  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);
    }
  };
  // @ts-ignore
  const instance = {
    isDragging,
    activeId,
    options,
    rowKey,
    children,
    move,
    items,
    tableWidth,
    columns
  };
  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
    sensors: sensors,
    onDragStart: handleDragStart,
    onDragCancel: () => setActiveId(null),
    collisionDetection: _core.closestCenter,
    onDragEnd: handleDragEnd,
    modifiers: [_modifiers.restrictToParentElement, _modifiers.restrictToVerticalAxis]
  }, children, /*#__PURE__*/_react.default.createElement(DragOver, {
    instance: instance
  }));
};
var _default = /*#__PURE__*/(0, _react.memo)(DndContainer);
exports.default = _default;