1 import classNames from "classnames";
2 import { Component, InfernoNode, linkEvent } from "inferno";
6 getNode: (isSelected: boolean) => InfernoNode;
18 function handleSwitchTab({ ctx, tab }: { ctx: Tabs; tab: string }) {
19 ctx.setState({ currentTab: tab });
22 export default class Tabs extends Component<TabsProps, TabsState> {
23 constructor(props: TabsProps, context) {
24 super(props, context);
27 currentTab: props.tabs.length > 0 ? props.tabs[0].key : "",
34 <ul className="nav nav-tabs mb-2" role="tablist">
35 {this.props.tabs.map(({ key, label }) => (
36 <li key={key} className="nav-item">
39 className={classNames("nav-link", {
40 active: this.state?.currentTab === key,
42 onClick={linkEvent({ ctx: this, tab: key }, handleSwitchTab)}
43 aria-controls={`${key}-tab-pane`}
44 {...(this.state?.currentTab === key && {
46 "aria-current": "page",
47 "aria-selected": "true",
56 <div className="tab-content">
57 {this.props.tabs.map(({ key, getNode }) => {
58 return getNode(this.state?.currentTab === key);