Differential D6782 Diff 22866 web/components/tabs-header.js

Changeset 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';

	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?: 'pill' \| 'underline',
	};			};

	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 = React.useMemo(
				() => (headerStyle === 'pill' ? cssPill : cssUnderline),
				[headerStyle],
				);
				tomekUnsubmitted Not Done Inline Actions You don't have to memoize this. The `css` value is one constant or another, so the memoization isn't beneficial. tomek: You don't have to memoize this. The `css` value is one constant or another, so the memoization…
	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;