All files / src/tabs/_example TabsClosableExample.jsx

37.5% Statements 3/8
100% Branches 0/0
28.57% Functions 2/7
60% Lines 3/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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          1x                                 1x     3x              
import React, { useState } from "react";
import { Tabs, TabPanel } from "@tencent/tea-component/lib/tabs";
import { Button } from "@tencent/tea-component/lib/button";
 
export default function TabsExample() {
  const [tabs, setTabs] = useState([
    { id: "1", label: "Tab-1", onClose: remove },
    { id: "2", label: "Tab-2", onClose: remove },
    { id: "3", label: "Tab-3", onClose: remove },
  ]);
 
  function add() {
    setTabs(tabs => [
      ...tabs,
      { id: String(Date.now()), label: "New Tab", onClose: remove },
    ]);
  }
 
  function remove({ id }) {
    setTabs(tabs => tabs.filter(tab => tab.id !== id));
  }
 
  return (
    <Tabs tabs={tabs} addon={<Button type="icon" icon="plus" onClick={add} />}>
      {tabs.map(tab => (
        <TabPanel id={tab.id} key={tab.id}>
          {tab.label}
        </TabPanel>
      ))}
    </Tabs>
  );
}