aretherecookies-mobile/js/components/ItemTile.js

//@flow
import React from 'react';
import { Text, View, Image } from 'react-native';
import { pure } from 'recompose';
import { type FoodItem } from '../records/FoodItemRecord';
import typeof PlaceRecord from '../records/PlaceRecord';
import theme from '../ui-theme';
import { Link } from 'react-router-native';
import { routeWithTitle } from '../helpers/RouteHelpers';

export const Thumbnail = ({ thumb }: { thumb: ?string }) => (
	<View
		style={{
			height: theme.itemTile.thumbnailSize,
			width: theme.itemTile.thumbnailSize,
			borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
			backgroundColor: theme.itemTile.thumbnailColor,
			margin: 10,
		}}
	>
		{!!thumb &&
			<Image
				style={{
					height: theme.itemTile.thumbnailSize,
					width: theme.itemTile.thumbnailSize,
					borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
				}}
				source={{ uri: thumb }}
			/>}
	</View>
);

export const Name = ({ value, style = {} }: { value: string, style?: Object }) => {
	return <Text style={{ ...theme.itemTile.itemNameStyle, ...style }}>{value}</Text>;
};

export const Place = ({ value, style = {} }: { value: string, style?: Object }) => {
	return <Text style={{ ...theme.itemTile.itemPlaceStyle, ...style }}>{value}</Text>;
};

export const NameAndPlace = ({ name, place, style = {} }: { name: string, place: string, style?: Object }) => (
	<View style={{ paddingTop: 15, ...style }}>
		<Name value={name} />
		<Place value={place} />
	</View>
);

export const TileBox = ({ children, style = {} }: { children?: any, style?: Object }) => (
	<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white', ...style }}>
		{children}
	</View>
);

export const PlaceTile = pure(({ place }: { place: PlaceRecord, onPress: Function }) => (
	<Link
		to={routeWithTitle(`/place/${place.id || ''}`, place.name)}
		underlayColor={theme.itemTile.pressHighlightColor}
	>
		<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
			<Thumbnail thumb={place.thumb} />
			<NameAndPlace name={place.name} place="Whole Foods" style={{ flex: 1 }} />
		</View>
	</Link>
));

export const FoodItemTile = pure(({ foodItem, place }: { foodItem: FoodItem, place: PlaceRecord }) => (
	<Link
		to={routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name)}
		underlayColor={theme.itemTile.pressHighlightColor}
	>
		<View>
			<TileBox>
				<Thumbnail thumb={foodItem.thumbImage} />
				<NameAndPlace name={foodItem.name} place={place.name} />
			</TileBox>
		</View>
	</Link>
));