mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
2cdf586291
* chore: fix lint * chore: fix lint * test: fix 16 * fix: lint
122 lines
3.1 KiB
TypeScript
122 lines
3.1 KiB
TypeScript
import type { DragEndEvent } from '@dnd-kit/core';
|
|
import { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
|
import {
|
|
SortableContext,
|
|
arrayMove,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import React, { useState } from 'react';
|
|
import { Table } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
|
|
interface DataType {
|
|
key: string;
|
|
name: string;
|
|
age: number;
|
|
address: string;
|
|
}
|
|
|
|
const columns: ColumnsType<DataType> = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
},
|
|
{
|
|
title: 'Address',
|
|
dataIndex: 'address',
|
|
},
|
|
];
|
|
|
|
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
'data-row-key': string;
|
|
}
|
|
|
|
const Row = (props: RowProps) => {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id: props['data-row-key'],
|
|
});
|
|
|
|
const style: React.CSSProperties = {
|
|
...props.style,
|
|
transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
|
|
transition,
|
|
cursor: 'move',
|
|
...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
|
|
};
|
|
|
|
return <tr {...props} ref={setNodeRef} style={style} {...attributes} {...listeners} />;
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [dataSource, setDataSource] = useState([
|
|
{
|
|
key: '1',
|
|
name: 'John Brown',
|
|
age: 32,
|
|
address:
|
|
'Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text',
|
|
},
|
|
{
|
|
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 sensors = useSensors(
|
|
useSensor(PointerSensor, {
|
|
activationConstraint: {
|
|
// https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints
|
|
distance: 1,
|
|
},
|
|
}),
|
|
);
|
|
|
|
const onDragEnd = ({ active, over }: DragEndEvent) => {
|
|
if (active.id !== over?.id) {
|
|
setDataSource((prev) => {
|
|
const activeIndex = prev.findIndex((i) => i.key === active.id);
|
|
const overIndex = prev.findIndex((i) => i.key === over?.id);
|
|
return arrayMove(prev, activeIndex, overIndex);
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
|
|
<SortableContext
|
|
// rowKey array
|
|
items={dataSource.map((i) => i.key)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
<Table
|
|
components={{
|
|
body: {
|
|
row: Row,
|
|
},
|
|
}}
|
|
rowKey="key"
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
/>
|
|
</SortableContext>
|
|
</DndContext>
|
|
);
|
|
};
|
|
|
|
export default App;
|