ant-design/components/tabs/demo/editable-card.tsx
Jimmy 546bda457f
demo : Tabs onEdit Callback parameter type problem ()
* fix : Tabs`onEdit`Callback parameter type problem

* fix : Tabs onEdit Callback parameter type problem
2023-01-15 13:08:09 +08:00

77 lines
1.8 KiB
TypeScript

import React, { useRef, useState } from 'react';
import { Tabs } from 'antd';
type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
const initialItems = [
{ label: 'Tab 1', children: 'Content of Tab 1', key: '1' },
{ label: 'Tab 2', children: 'Content of Tab 2', key: '2' },
{
label: 'Tab 3',
children: 'Content of Tab 3',
key: '3',
closable: false,
},
];
const App: React.FC = () => {
const [activeKey, setActiveKey] = useState(initialItems[0].key);
const [items, setItems] = useState(initialItems);
const newTabIndex = useRef(0);
const onChange = (newActiveKey: string) => {
setActiveKey(newActiveKey);
};
const add = () => {
const newActiveKey = `newTab${newTabIndex.current++}`;
const newPanes = [...items];
newPanes.push({ label: 'New Tab', children: 'Content of new Tab', key: newActiveKey });
setItems(newPanes);
setActiveKey(newActiveKey);
};
const remove = (targetKey: TargetKey) => {
let newActiveKey = activeKey;
let lastIndex = -1;
items.forEach((item, i) => {
if (item.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = items.filter((item) => item.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex >= 0) {
newActiveKey = newPanes[lastIndex].key;
} else {
newActiveKey = newPanes[0].key;
}
}
setItems(newPanes);
setActiveKey(newActiveKey);
};
const onEdit = (
targetKey: React.MouseEvent | React.KeyboardEvent | string,
action: 'add' | 'remove',
) => {
if (action === 'add') {
add();
} else {
remove(targetKey);
}
};
return (
<Tabs
type="editable-card"
onChange={onChange}
activeKey={activeKey}
onEdit={onEdit}
items={items}
/>
);
};
export default App;