aretherecookies-mobile/js/components/TopToolbar.js

// @flow
import React, { Component } from 'react';
import { Toolbar } from 'react-native-material-ui';
import { type RoutingContextFlowTypes, routingContextPropTypes } from '../routes';
import { path } from 'ramda';
import queryString from 'query-string';
import { getSearch } from '../helpers/RouteHelpers';

type Props = {
	title: ?string,
	toggleSideMenu: Function,
};

class TopToolbar extends Component {
	static contextTypes = routingContextPropTypes;
	static defaultProps = {
		title: 'Are There Cookies?',
	};

	props: Props;

	context: RoutingContextFlowTypes;

	onRightPress = ({ action }: { action: string }) => {
		const { router: { history } } = this.context;
		const search = getSearch(this.context);

		history.replace({
			search: queryString.stringify({
				...search,
				viewMode: action,
			}),
		});
	};

	onSearchPressed: () => {};

	onSearchClosed: () => {};

	onSearchChanged: () => {};

	getRightElement = () => {
		const search = getSearch(this.context);
		const pathname = path(['router', 'route', 'location', 'pathname'], this.context);
		const { viewMode } = queryString.parse(search);

		switch (pathname.match(/^\/\w*/)[0]) {
			case '/list': {
				return viewMode === 'map' ? 'list' : 'map';
			}
			default: {
				return '';
			}
		}
	};

	getSearchable = () => {
		const pathname = path(['router', 'route', 'location', 'pathname'], this.context);

		if (!/list/.test(pathname)) {
			return {};
		}

		return {
			searchable: {
				autoFocus: true,
				onSearchPressed: this.onSearchPressed,
				onSearchClosed: this.onSearchClosed,
				onChangeText: this.onSearchChanged,
			},
		};
	};

	render() {
		const { toggleSideMenu } = this.props;
		const history = path(['router', 'history'], this.context);
		const search = getSearch(this.context);
		const title = search.routeTitle || this.props.title;
		const isBasePage = history.index === 0;

		return (
			<Toolbar
				leftElement={isBasePage ? 'menu' : 'arrow-back'}
				onLeftElementPress={isBasePage ? toggleSideMenu : history.goBack}
				centerElement={title}
				rightElement={this.getRightElement()}
				onRightElementPress={this.onRightPress}
				{...this.getSearchable()}
			/>
		);
	}
}

export default TopToolbar;