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