aretherecookies-mobile/js/modals/QuantityModal.js

// @flow
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import Modal from './Modal';
import { compose, onlyUpdateForKeys } from 'recompose';
import { getQuantityDropdownText } from '../helpers/QuantityHelpers';
import { type Quantity, QUANTITIES } from '../constants/QuantityConstants';

import theme from '../ui-theme';

const { picker: { defaultColor, selectedColor } } = theme;

const QuantityItem = ({
	quantity,
	isSelected,
	onPress,
}: {
	quantity: Quantity,
	isSelected?: boolean,
	onPress: Function,
}) => {
	const color = isSelected ? selectedColor : defaultColor;
	return (
		<TouchableOpacity style={{ padding: 15 }} onPress={onPress}>
			<Text style={{ color, fontSize: 16 }}>{getQuantityDropdownText(quantity)}</Text>
		</TouchableOpacity>
	);
};

type Props = {
	isVisible: boolean,
	onClose: () => void,
	quantity: Quantity,
	onChange: (q: Quantity) => void,
};

const QuantityModal = (props: Props) => {
	const { isVisible, quantity, onChange, onClose } = props;

	const onPress = (q: Quantity) => () => {
		onChange(q);
		onClose();
	};

	return (
		<Modal isVisible={isVisible}>
			{QUANTITIES.map((q: Quantity) => (
				<QuantityItem key={q} quantity={q} isSelected={q === quantity} onPress={onPress(q)} />
			))}
		</Modal>
	);
};

export default compose(onlyUpdateForKeys(['isVisible', 'quantity']))(QuantityModal);