src/shared/components/common/tabs.tsx

   1 import classNames from "classnames";
   2 import { Component, InfernoNode, linkEvent } from "inferno";
   3
   4 interface TabItem {
   5   key: string;
   6   getNode: (isSelected: boolean) => InfernoNode;
   7   label: string;
   8 }
   9
  10 interface TabsProps {
  11   tabs: TabItem[];
  12 }
  13
  14 interface TabsState {
  15   currentTab: string;
  16 }
  17
  18 function handleSwitchTab({ ctx, tab }: { ctx: Tabs; tab: string }) {
  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" role="tablist">
  35           {this.props.tabs.map(({ key, label }) => (
  36             <li key={key} className="nav-item">
  37               <button
  38                 type="button"
  39                 className={classNames("nav-link", {
  40                   active: this.state?.currentTab === key,
  41                 })}
  42                 onClick={linkEvent({ ctx: this, tab: key }, handleSwitchTab)}
  43                 aria-controls={`${key}-tab-pane`}
  44                 {...(this.state?.currentTab === key && {
  45                   ...{
  46                     "aria-current": "page",
  47                     "aria-selected": "true",
  48                   },
  49                 })}
  50               >
  51                 {label}
  52               </button>
  53             </li>
  54           ))}
  55         </ul>
  56         <div className="tab-content">
  57           {this.props.tabs.map(({ key, getNode }) => {
  58             return getNode(this.state?.currentTab === key);
  59           })}
  60         </div>
  61       </div>
  62     );
  63   }
  64 }