Differential D6782 Diff 22726 web/components/tabs.react.js

Changeset 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,
				+isPillStyle?: boolean,
	};			};

	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, isPillStyle = false } = props;

				const css = React.useMemo(() => (isPillStyle ? cssPill : cssUnderline), [
				isPillStyle,
				]);

	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}
				isPillStyle={isPillStyle}
				>
	{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