Changeset View
Changeset View
Standalone View
Standalone View
web/components/tabs.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import TabsHeader from './tabs-header.js'; | import TabsHeader from './tabs-header.js'; | ||||
import css from './tabs.css'; | import type { TabsHeaderStyle } from './tabs-header.js'; | ||||
import cssPill from './tabs-pill.css'; | |||||
import cssUnderline from './tabs-underline.css'; | |||||
type TabsContainerProps<T: string> = { | type TabsContainerProps<T: string> = { | ||||
+children?: React.ChildrenArray<?React.Element<typeof TabsItem>>, | +children?: React.ChildrenArray<?React.Element<typeof TabsItem>>, | ||||
+activeTab: T, | +activeTab: T, | ||||
+setTab: T => mixed, | +setTab: T => mixed, | ||||
+headerStyle?: TabsHeaderStyle, | |||||
}; | }; | ||||
function TabsContainer<T: string>(props: TabsContainerProps<T>): React.Node { | function TabsContainer<T: string>(props: TabsContainerProps<T>): React.Node { | ||||
const { children, activeTab, setTab } = props; | const { children, activeTab, setTab, headerStyle = 'underline' } = props; | ||||
const css = headerStyle === 'pill' ? cssPill : cssUnderline; | |||||
const headers = React.Children.map(children, tab => { | const headers = React.Children.map(children, tab => { | ||||
const { id, header } = tab.props; | const { id, header } = tab.props; | ||||
const isActive = id === activeTab; | const isActive = id === activeTab; | ||||
return ( | return ( | ||||
<TabsHeader id={id} isActive={isActive} setTab={setTab}> | <TabsHeader | ||||
id={id} | |||||
isActive={isActive} | |||||
setTab={setTab} | |||||
headerStyle={headerStyle} | |||||
> | |||||
{header} | {header} | ||||
</TabsHeader> | </TabsHeader> | ||||
); | ); | ||||
}); | }); | ||||
const currentTab = React.Children.toArray(children).find( | const currentTab = React.Children.toArray(children).find( | ||||
tab => tab.props.id === activeTab, | tab => tab.props.id === activeTab, | ||||
); | ); | ||||
Show All 30 Lines |