mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-06 05:58:46 +08:00
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import type { DragEndEvent } from '@dnd-kit/core';
|
|
import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
|
|
import {
|
|
arrayMove,
|
|
horizontalListSortingStrategy,
|
|
SortableContext,
|
|
useSortable,
|
|
} from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import React, { useState } from 'react';
|
|
import { Tabs } from 'antd';
|
|
|
|
interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
'data-node-key': string;
|
|
}
|
|
|
|
const DraggableTabNode = ({ className, ...props }: DraggableTabPaneProps) => {
|
|
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
|
|
id: props['data-node-key'],
|
|
});
|
|
|
|
const style: React.CSSProperties = {
|
|
...props.style,
|
|
transform: CSS.Transform.toString(transform && { ...transform, scaleX: 1 }),
|
|
transition,
|
|
cursor: 'move',
|
|
};
|
|
|
|
return React.cloneElement(props.children as React.ReactElement, {
|
|
ref: setNodeRef,
|
|
style,
|
|
...attributes,
|
|
...listeners,
|
|
});
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [items, setItems] = useState([
|
|
{
|
|
key: '1',
|
|
label: 'Tab 1',
|
|
children: 'Content of Tab Pane 1',
|
|
},
|
|
{
|
|
key: '2',
|
|
label: 'Tab 2',
|
|
children: 'Content of Tab Pane 2',
|
|
},
|
|
{
|
|
key: '3',
|
|
label: 'Tab 3',
|
|
children: 'Content of Tab Pane 3',
|
|
},
|
|
]);
|
|
|
|
const sensor = useSensor(PointerSensor, { activationConstraint: { distance: 10 } });
|
|
|
|
const onDragEnd = ({ active, over }: DragEndEvent) => {
|
|
if (active.id !== over?.id) {
|
|
setItems((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 (
|
|
<Tabs
|
|
items={items}
|
|
renderTabBar={(tabBarProps, DefaultTabBar) => (
|
|
<DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
|
|
<SortableContext items={items.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
|
|
<DefaultTabBar {...tabBarProps}>
|
|
{(node) => (
|
|
<DraggableTabNode {...node.props} key={node.key}>
|
|
{node}
|
|
</DraggableTabNode>
|
|
)}
|
|
</DefaultTabBar>
|
|
</SortableContext>
|
|
</DndContext>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|