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>
)
}
}
|