import React, { useState, useEffect } from 'react'; import { Table } from 'antd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DndProvider } from 'react-dnd'; import DraggableBodyRow from './DraggableBodyRow'; const DragTable = props => { const { columns, dataSource, dragCallBack, ItemTypes } = props; const [data, setData] = useState(null); // 分组后的数组 const components = { body: { row: DraggableBodyRow, }, }; useEffect(() => { if (dataSource.length > 0) { setData(dataSource); } }, [dataSource]); // 每次拖拽后返回 useEffect(() => { dragCallBack(data); }, [data]); // 移动数组元素到指定位置 const moveInArray = (arr, from, to) => { // 确保是有效数组 if (Object.prototype.toString.call(arr) !== '[object Array]') { throw new Error('Please provide a valid array'); } // 删除当前的位置 let item = arr.splice(from, 1); // 确保还剩有元素移动 if (!item.length) { throw new Error(`There is no item in the array at index ${from}`); } // 移动元素到指定位置 arr.splice(to, 0, item[0]); return arr; }; // 拖拽表格 const moveRow = (dragIndex, hoverIndex) => { setData(val => { let newData = JSON.parse(JSON.stringify(val)); newData = moveInArray(newData, dragIndex, hoverIndex); return newData; }); }; return ( <div> <DndProvider backend={HTML5Backend}> <Table bordered columns={columns} dataSource={data} components={components} onRow={(record, index) => ({ index, ItemTypes, moveRow, onClick: () => props.onClick && props.onClick(record), })} {...props} /> </DndProvider> </div> ); }; export default DragTable;