aretherecookies-mobile/js/components/QuantityPicker.js

// @flow
import React from 'react';
import { getQuantityDropdownText } from '../helpers/QuantityHelpers';
import { Picker, View } from 'react-native';
import theme from '../ui-theme';
import { pure } from 'recompose';
import { type Quantity, QUANTITIES } from '../constants/QuantityConstants';
import debounce from '../helpers/debounce';

const { picker: { color: selectedColor } } = theme;
const defaultColor = 'black';

const getItemColor = (selected, current) => (selected === current ? selectedColor : defaultColor);

/* eslint-disable react/display-name */
const renderQuantityItem = (selectedQuantity: Quantity) => (quantity: Quantity) => (
	<Picker.Item
		key={quantity}
		label={getQuantityDropdownText(quantity)}
		value={quantity}
		color={getItemColor(selectedQuantity, quantity)}
	/>
);

type QuantityPickerProps = { quantity: Quantity, onValueChange: Function, style: Object };
const QuantityPicker = pure(({ quantity, onValueChange, style }: QuantityPickerProps) => (
	<View style={style}>
		<Picker selectedValue={quantity} onValueChange={debounce(onValueChange)} style={{ flex: 1 }}>
			{QUANTITIES.map(renderQuantityItem(quantity))}
		</Picker>
	</View>
));

export default QuantityPicker;