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   ctx.setState({ currentTab: tab });
  19 }
  20
  21 export default class Tabs extends Component<TabsProps, TabsState> {
  22   constructor(props: TabsProps, context) {
  23     super(props, context);
  24
  25     this.state = {
  26       currentTab: props.tabs.length > 0 ? props.tabs[0].key : "",
  27     };
  28   }
  29
  30   render() {
  31     return (
  32       <div>
  33         <ul className="nav nav-tabs mb-2">
  34           {this.props.tabs.map(({ key, label }) => (
  35             <li key={key} className="nav-item">
  36               <button
  37                 type="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 }