linkmore-design/es/lm-edit-table/rowSort/DndContainerRow.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/* eslint-disable no-unused-vars */
import React, { memo } from 'react';
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay } from '@dnd-kit/core';
import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import { omit } from 'lodash';
import Table from "../EditTable";
import "./index.less";
var DragOver = /*#__PURE__*/React.memo(function (_ref) {
  var instance = _ref.instance;
  var isDragging = instance.isDragging,
    activeId = instance.activeId,
    rowKey = instance.rowKey,
    options = instance.options,
    columns = instance.columns;
  var item = activeId && options.find(function (v) {
    return v[rowKey] === activeId;
  });
  var filterCol = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
    return omit(item, 'onCell');
  });
  return /*#__PURE__*/React.createElement(DragOverlay, {
    adjustScale: false
  }, isDragging ? /*#__PURE__*/React.createElement("div", {
    className: "lm_editable_darg_item",
    style: {
      width: instance.tableWidth,
      backgroundColor: '#fff',
      overflowX: 'hidden'
    }
  }, /*#__PURE__*/React.createElement(Table, {
    columns: filterCol || [],
    showHeader: false,
    style: {
      overflow: 'hidden'
    },
    pagination: false,
    value: [item]
  })) : null);
});

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