All files / client/components/Common Tab.tsx

0% Statements 0/20
0% Branches 0/6
0% Functions 0/11
0% Lines 0/19

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72                                                                                                                                               
import React from 'react'
import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'
import { Props as TabItemProps } from 'client/components/Common/TabItem'
 
interface Props {
  id?: string
  children: React.ReactElement<TabItemProps>[]
  active: number
}
 
interface State {
  active: number
}
 
export default class Tab extends React.Component<Props, State> {
  static defaultProps = { active: 1 }
 
  constructor(props: Props) {
    super(props)
 
    const { active } = props
    this.state = { active }
  }
 
  toggle(tab: number) {
    return () => {
      if (this.state.active !== tab) {
        this.setState({ active: tab })
      }
    }
  }
 
  getTabTitles() {
    type TabItemElement = React.ReactElement<TabItemProps>
    type T = string | false
    return React.Children.map<T, TabItemElement>(this.props.children, child => (React.isValidElement(child) ? child.props.title : false)).filter(
      title => title !== false,
    )
  }
 
  renderNavItems() {
    const titles = this.getTabTitles()
    const { active } = this.state
    return titles.map((title, i) => (
      <NavItem key={i + 1}>
        <NavLink active={active === i + 1} onClick={this.toggle(i + 1)}>
          {title}
        </NavLink>
      </NavItem>
    ))
  }
 
  renderTabPanes() {
    return React.Children.map(this.props.children, (child, i) => {
      if (React.isValidElement(child)) {
        return <TabPane tabId={i + 1}>{child}</TabPane>
      }
    })
  }
 
  render() {
    const { active: _, ...props } = this.props
    const { active } = this.state
    return (
      <div {...props}>
        <Nav tabs>{this.renderNavItems()}</Nav>
        <TabContent activeTab={active}>{this.renderTabPanes()}</TabContent>
      </div>
    )
  }
}