mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
import React, { useRef, useState } from 'react';
|
||
|
import { Button, Tabs } from 'antd';
|
||
|
|
||
|
const defaultPanes = new Array(2).fill(null).map((_, index) => {
|
||
|
const id = String(index + 1);
|
||
|
return { label: `Tab ${id}`, children: `Content of Tab Pane ${index + 1}`, key: id };
|
||
|
});
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [activeKey, setActiveKey] = useState(defaultPanes[0].key);
|
||
|
const [items, setItems] = useState(defaultPanes);
|
||
|
const newTabIndex = useRef(0);
|
||
|
|
||
|
const onChange = (key: string) => {
|
||
|
setActiveKey(key);
|
||
|
};
|
||
|
|
||
|
const add = () => {
|
||
|
const newActiveKey = `newTab${newTabIndex.current++}`;
|
||
|
setItems([...items, { label: 'New Tab', children: 'New Tab Pane', key: newActiveKey }]);
|
||
|
setActiveKey(newActiveKey);
|
||
|
};
|
||
|
|
||
|
const remove = (targetKey: string) => {
|
||
|
const targetIndex = items.findIndex(pane => pane.key === targetKey);
|
||
|
const newPanes = items.filter(pane => pane.key !== targetKey);
|
||
|
if (newPanes.length && targetKey === activeKey) {
|
||
|
const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
|
||
|
setActiveKey(key);
|
||
|
}
|
||
|
setItems(newPanes);
|
||
|
};
|
||
|
|
||
|
const onEdit = (targetKey: string, action: 'add' | 'remove') => {
|
||
|
if (action === 'add') {
|
||
|
add();
|
||
|
} else {
|
||
|
remove(targetKey);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<div style={{ marginBottom: 16 }}>
|
||
|
<Button onClick={add}>ADD</Button>
|
||
|
</div>
|
||
|
<Tabs
|
||
|
hideAdd
|
||
|
onChange={onChange}
|
||
|
activeKey={activeKey}
|
||
|
type="editable-card"
|
||
|
onEdit={onEdit}
|
||
|
items={items}
|
||
|
/>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|