mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-14 17:01:17 +08:00
145 lines
2.9 KiB
TypeScript
145 lines
2.9 KiB
TypeScript
import React, { useCallback, useRef, useState } from 'react';
|
|
import { Table } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import update from 'immutability-helper';
|
|
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
|
|
interface DataType {
|
|
key: string;
|
|
name: string;
|
|
age: number;
|
|
address: string;
|
|
}
|
|
|
|
interface DraggableBodyRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
index: number;
|
|
moveRow: (dragIndex: number, hoverIndex: number) => void;
|
|
}
|
|
|
|
const type = 'DraggableBodyRow';
|
|
|
|
const DraggableBodyRow = ({
|
|
index,
|
|
moveRow,
|
|
className,
|
|
style,
|
|
...restProps
|
|
}: DraggableBodyRowProps) => {
|
|
const ref = useRef<HTMLTableRowElement>(null);
|
|
const [{ isOver, dropClassName }, drop] = useDrop({
|
|
accept: type,
|
|
collect: (monitor) => {
|
|
const { index: dragIndex } = monitor.getItem() || {};
|
|
if (dragIndex === index) {
|
|
return {};
|
|
}
|
|
return {
|
|
isOver: monitor.isOver(),
|
|
dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
|
|
};
|
|
},
|
|
drop: (item: { index: number }) => {
|
|
moveRow(item.index, index);
|
|
},
|
|
});
|
|
const [, drag] = useDrag({
|
|
type,
|
|
item: { index },
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
});
|
|
drop(drag(ref));
|
|
|
|
return (
|
|
<tr
|
|
ref={ref}
|
|
className={`${className}${isOver ? dropClassName : ''}`}
|
|
style={{ cursor: 'move', ...style }}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const columns: ColumnsType<DataType> = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
key: 'age',
|
|
},
|
|
{
|
|
title: 'Address',
|
|
dataIndex: 'address',
|
|
key: 'address',
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [data, setData] = useState([
|
|
{
|
|
key: '1',
|
|
name: 'John Brown',
|
|
age: 32,
|
|
address: 'New York No. 1 Lake Park',
|
|
},
|
|
{
|
|
key: '2',
|
|
name: 'Jim Green',
|
|
age: 42,
|
|
address: 'London No. 1 Lake Park',
|
|
},
|
|
{
|
|
key: '3',
|
|
name: 'Joe Black',
|
|
age: 32,
|
|
address: 'Sidney No. 1 Lake Park',
|
|
},
|
|
]);
|
|
|
|
const components = {
|
|
body: {
|
|
row: DraggableBodyRow,
|
|
},
|
|
};
|
|
|
|
const moveRow = useCallback(
|
|
(dragIndex: number, hoverIndex: number) => {
|
|
const dragRow = data[dragIndex];
|
|
setData(
|
|
update(data, {
|
|
$splice: [
|
|
[dragIndex, 1],
|
|
[hoverIndex, 0, dragRow],
|
|
],
|
|
}),
|
|
);
|
|
},
|
|
[data],
|
|
);
|
|
|
|
return (
|
|
<DndProvider backend={HTML5Backend}>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={data}
|
|
components={components}
|
|
onRow={(_, index) => {
|
|
const attr = {
|
|
index,
|
|
moveRow,
|
|
};
|
|
return attr as React.HTMLAttributes<any>;
|
|
}}
|
|
/>
|
|
</DndProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|