aretherecookies-mobile/js/components/ItemTile.js

//@flow
import React from 'react';
import { Text, View, Image } from 'react-native';
import theme from '../ui-theme';
import { getQuantityLabelText } from '../helpers/QuantityHelpers';
import moment from 'moment';
import type { Quantity } from '../constants/QuantityConstants';

const getRelativeDateText = (lastupdated: ?number) => {
	return lastupdated ? ` - ${moment(lastupdated).fromNow()}` : '';
};

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,
			marginLeft: 16,
			marginRight: 16,
			marginTop: 4,
			marginBottom: 4,
		}}
	>
		{!!thumb && (
			<Image
				style={{
					height: theme.itemTile.thumbnailSize,
					width: theme.itemTile.thumbnailSize,
					borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
				}}
				source={{ uri: thumb }}
			/>
		)}
	</View>
);

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

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

export const TileBox = ({ children, style = {} }: { children?: any, style?: Object }) => (
	<View style={{ flexDirection: 'row', backgroundColor: 'white', alignItems: 'center', paddingTop: 15, paddingBottom: 15, ...style }}>
		{children}
	</View>
);

export const QuantityLine = ({ quantity, lastupdated }: { quantity: Quantity, lastupdated: ?number }) => (
	<SubText>
		{getQuantityLabelText(quantity)}
		{getRelativeDateText(lastupdated)}
	</SubText>
);