src/shared/components/common/tabs.tsx

   1 import { Component, InfernoNode, linkEvent } from "inferno";
   2
   3 interface TabItem {
   4   key: string;
   5   getNode: () => InfernoNode;
   6   label: string;
   7 }
   8
   9 interface TabsProps {
  10   tabs: TabItem[];
  11 }
  12
  13 interface TabsState {
  14   currentTab: string;
  15 }
  16
  17 function handleSwitchTab({ ctx, tab }: { ctx: Tabs; tab: string }) {
  18   console.log(tab);
  19   ctx.setState({ currentTab: tab });
  20 }
  21
  22 export default class Tabs extends Component<TabsProps, TabsState> {
  23   constructor(props: TabsProps, context) {
  24     super(props, context);
  25
  26     this.state = {
  27       currentTab: props.tabs.length > 0 ? props.tabs[0].key : "",
  28     };
  29   }
  30
  31   render() {
  32     return (
  33       <div>
  34         <ul className="nav nav-tabs mb-2">
  35           {this.props.tabs.map(({ key, label }) => (
  36             <li key={key} className="nav-item">
  37               <button
  38                 className={`nav-link btn${
  39                   this.state?.currentTab === key ? " active" : ""
  40                 }`}
  41                 onClick={linkEvent({ ctx: this, tab: key }, handleSwitchTab)}
  42               >
  43                 {label}
  44               </button>
  45             </li>
  46           ))}
  47         </ul>
  48         {this.props.tabs
  49           .find(tab => tab.key === this.state?.currentTab)
  50           ?.getNode()}
  51       </div>
  52     );
  53   }
  54 }