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 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?: 'pill' | 'underline', | |||||
tomek: Can we avoid repeating this type by extracting it somewhere? | |||||
}; | }; | ||||
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 = React.useMemo( | |||||
() => (headerStyle === 'pill' ? cssPill : cssUnderline), | |||||
[headerStyle], | |||||
); | |||||
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 |
Can we avoid repeating this type by extracting it somewhere?