linxianxi
2 years ago
committed by
GitHub
GitHub
9 changed files with 825 additions and 109 deletions
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
使用 [dnd-kit](https://github.com/clauderic/dnd-kit) 来实现一个拖拽操作列。 |
|||
|
|||
## en-US |
|||
|
|||
Alternatively you can implement drag sorting with handler using [dnd-kit](https://github.com/clauderic/dnd-kit). |
|||
@ -0,0 +1,139 @@ |
|||
import { MenuOutlined } from '@ant-design/icons'; |
|||
import type { DragEndEvent } from '@dnd-kit/core'; |
|||
import { DndContext } from '@dnd-kit/core'; |
|||
import { |
|||
arrayMove, |
|||
SortableContext, |
|||
useSortable, |
|||
verticalListSortingStrategy, |
|||
} from '@dnd-kit/sortable'; |
|||
import { CSS } from '@dnd-kit/utilities'; |
|||
import { Table } from 'antd'; |
|||
import type { ColumnsType } from 'antd/es/table'; |
|||
import React, { useState } from 'react'; |
|||
|
|||
interface DataType { |
|||
key: string; |
|||
name: string; |
|||
age: number; |
|||
address: string; |
|||
} |
|||
|
|||
const columns: ColumnsType<DataType> = [ |
|||
{ |
|||
key: 'sort', |
|||
}, |
|||
{ |
|||
title: 'Name', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: 'Age', |
|||
dataIndex: 'age', |
|||
}, |
|||
{ |
|||
title: 'Address', |
|||
dataIndex: 'address', |
|||
}, |
|||
]; |
|||
|
|||
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> { |
|||
'data-row-key': string; |
|||
} |
|||
|
|||
const Row = ({ children, ...props }: RowProps) => { |
|||
const { |
|||
attributes, |
|||
listeners, |
|||
setNodeRef, |
|||
setActivatorNodeRef, |
|||
transform, |
|||
transition, |
|||
isDragging, |
|||
} = useSortable({ |
|||
id: props['data-row-key'], |
|||
}); |
|||
|
|||
const style: React.CSSProperties = { |
|||
...props.style, |
|||
transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }), |
|||
transition, |
|||
...(isDragging ? { position: 'relative', zIndex: 9999 } : {}), |
|||
}; |
|||
|
|||
return ( |
|||
<tr {...props} ref={setNodeRef} style={style} {...attributes}> |
|||
{React.Children.map(children, (child) => { |
|||
if ((child as React.ReactElement).key === 'sort') { |
|||
return React.cloneElement(child as React.ReactElement, { |
|||
children: ( |
|||
<MenuOutlined |
|||
ref={setActivatorNodeRef} |
|||
style={{ touchAction: 'none', cursor: 'move' }} |
|||
{...listeners} |
|||
/> |
|||
), |
|||
}); |
|||
} |
|||
return child; |
|||
})} |
|||
</tr> |
|||
); |
|||
}; |
|||
|
|||
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 onDragEnd = ({ active, over }: DragEndEvent) => { |
|||
if (active.id !== over?.id) { |
|||
setDataSource((previous) => { |
|||
const activeIndex = previous.findIndex((i) => i.key === active.id); |
|||
const overIndex = previous.findIndex((i) => i.key === over?.id); |
|||
return arrayMove(previous, activeIndex, overIndex); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<DndContext 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; |
|||
@ -1,17 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
使用自定义元素，我们可以集成 [react-dnd](https://github.com/react-dnd/react-dnd) 来实现拖拽排序。 |
|||
使用自定义元素，我们可以集成 [dnd-kit](https://github.com/clauderic/dnd-kit) 来实现拖拽排序。 |
|||
|
|||
## en-US |
|||
|
|||
By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function. |
|||
|
|||
```css |
|||
#components-table-demo-drag-sorting tr.drop-over-downward td { |
|||
border-bottom: 2px dashed #1677ff !important; |
|||
} |
|||
|
|||
#components-table-demo-drag-sorting tr.drop-over-upward td { |
|||
border-top: 2px dashed #1677ff !important; |
|||
} |
|||
``` |
|||
By using `components`, we can integrate table with [dnd-kit](https://github.com/clauderic/dnd-kit) to implement drag sorting function. |
|||
|
|||
Loading…
Reference in new issue