Differential D6343 Diff 22574 web/sidebar/navigation-panel.react.js

Changeset View

Standalone View

web/sidebar/navigation-panel.react.js

	// @flow			// @flow

	import classNames from 'classnames';			import classNames from 'classnames';
	import * as React from 'react';			import * as React from 'react';

	import css from './left-layout-aside.css';			import verticalCSS from './left-layout-aside.css';
	import type { AppState } from '../redux/redux-setup.js';			import type { AppState } from '../redux/redux-setup.js';
	import { useSelector } from '../redux/redux-utils.js';			import { useSelector } from '../redux/redux-utils.js';
				import horizontalCSS from '../topbar/topbar.css';

	type NavigationPanelItemProps = {			type NavigationPanelItemProps = {
	+tab: string,			+tab: string,
	+children: React.Node,			+children: React.Node,
	};			};

	function NavigationPanelItem(props: NavigationPanelItemProps): React.Node {			function NavigationPanelItem(props: NavigationPanelItemProps): React.Node {
	const { children } = props;			const { children } = props;
	return children;			return children;
	}			}

	type NavigationPanelContainerProps<T> = {			type NavigationPanelContainerProps<T> = {
	+tabSelector: AppState => T,			+tabSelector: AppState => T,
	+children: React.ChildrenArray<?React.Element<typeof NavigationPanelItem>>,			+children: React.ChildrenArray<?React.Element<typeof NavigationPanelItem>>,
				+horizontal?: boolean,
	};			};

	function NavigationPanelContainer<T>(			function NavigationPanelContainer<T>(
	props: NavigationPanelContainerProps<T>,			props: NavigationPanelContainerProps<T>,
	): React.Node {			): React.Node {
	const { children, tabSelector } = props;			const { children, tabSelector, horizontal = false } = props;
	const currentTab = useSelector(tabSelector);			const currentTab = useSelector(tabSelector);
				const css = horizontal ? horizontalCSS : verticalCSS;

	const items = React.useMemo(			const items = React.useMemo(
	() =>			() =>
	React.Children.map(children, child => {			React.Children.map(children, child => {
	if (!child) {			if (!child) {
	return null;			return null;
	}			}
	return (			return (
	<div			<div
	key={child.props.tab}			key={child.props.tab}
	className={classNames({			className={classNames({
	[css.current_tab]: currentTab === child.props.tab,			[css.current_tab]: currentTab === child.props.tab,
	})}			})}
	>			>
	{child}			{child}
	</div>			</div>
	);			);
	}),			}),
	[children, currentTab],			[children, css.current_tab, currentTab],
	);			);

	return <div className={css.navigationPanelContainer}>{items}</div>;			return <div className={css.navigationPanelContainer}>{items}</div>;
	}			}

	const NavigationPanel = {			const NavigationPanel = {
	Item: NavigationPanelItem,			Item: NavigationPanelItem,
	Container: NavigationPanelContainer,			Container: NavigationPanelContainer,
	};			};

	export default NavigationPanel;			export default NavigationPanel;