Changeset View
Changeset View
Standalone View
Standalone View
web/components/tabs-header.js
// @flow | // @flow | ||||
import classnames from 'classnames'; | import classnames from 'classnames'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import Button from './button.react.js'; | import Button from './button.react.js'; | ||||
import css from './tabs.css'; | import cssPill from './tabs-pill.css'; | ||||
import cssUnderline from './tabs-underline.css'; | |||||
export type TabsHeaderStyle = 'pill' | 'underline'; | |||||
type Props<T: string> = { | type Props<T: string> = { | ||||
+children: React.Node, | +children: React.Node, | ||||
+isActive: boolean, | +isActive: boolean, | ||||
+setTab: T => mixed, | +setTab: T => mixed, | ||||
+id: T, | +id: T, | ||||
+headerStyle?: TabsHeaderStyle, | |||||
}; | }; | ||||
function TabsHeader<T: string>(props: Props<T>): React.Node { | function TabsHeader<T: string>(props: Props<T>): React.Node { | ||||
const { children, isActive, setTab, id } = props; | const { children, isActive, setTab, id, headerStyle = 'underline' } = props; | ||||
const css = headerStyle === 'pill' ? cssPill : cssUnderline; | |||||
const headerClasses = classnames(css.tabHeader, { | const headerClasses = classnames(css.tabHeader, { | ||||
[css.backgroundTabHeader]: !isActive, | [css.backgroundTabHeader]: !isActive, | ||||
}); | }); | ||||
const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]); | const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]); | ||||
return ( | return ( | ||||
<Button className={headerClasses} onClick={onClickSetTab}> | <Button className={headerClasses} onClick={onClickSetTab}> | ||||
{children} | {children} | ||||
</Button> | </Button> | ||||
); | ); | ||||
} | } | ||||
export default TabsHeader; | export default TabsHeader; |