App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
import React, { useState } from 'react'; import { Tabs, DragTabList, DragTab, PanelList, Panel } from 'react-tabtab'; import { simpleSwitch } from 'react-tabtab/lib/helpers/move'; const Drag = () => { const [activeIndex, setActiveIndex] = useState(0); const [tabs, setTabs] = useState([ { id: 1, label: 'Tab1', content: 'Content1' }, { id: 2, label: 'Tab2', content: 'Content2' }, ]); const handleTabChange = (index) => { setActiveIndex(index); }; const handleTabSequenceChange = ({ oldIndex, newIndex }) => { const updatedTabs = simpleSwitch(tabs, oldIndex, newIndex); setTabs(updatedTabs); setActiveIndex(newIndex); }; const addTab = () => { const newTab = { id: tabs.length + 1, label: `Tab${tabs.length + 1}`, content: `Content${tabs.length + 1}`, }; setTabs([...tabs, newTab]); }; const removeTab = (index) => { const updatedTabs = tabs.filter((tab, i) => i !== index); setTabs(updatedTabs); // Adjust active index if necessary if (activeIndex >= updatedTabs.length) { setActiveIndex(updatedTabs.length - 1); } }; return ( <div> <Tabs activeIndex={activeIndex} onTabChange={handleTabChange} onTabSequenceChange={handleTabSequenceChange}> <DragTabList> {tabs.map((tab, index) => ( <DragTab key={tab.id}> {tab.label} <button onClick={() => removeTab(index)} style={{ marginLeft: '8px', fontSize: '12px' }}> x </button> </DragTab> ))} </DragTabList> <PanelList> {tabs.map((tab) => ( <Panel key={tab.id}>{tab.content}</Panel> ))} </PanelList> </Tabs> <button onClick={addTab} style={{ marginTop: '20px' }}> Add Tab </button> </div> ); }; export default Drag; |
