aretherecookies-mobile/js/components/CategoryPicker.js

// @flow
import React from 'react';
import { getCategoryText } from '../helpers/CategoryHelpers';
import { Picker, View } from 'react-native';
import theme from '../ui-theme';
import { pure } from 'recompose';
import { type Category, CATEGORIES } from '../constants/CategoryConstants';
import debounce from '../helpers/debounce';

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

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

/* eslint-disable react/display-name */
const renderItem = (selected: Category) => (item: Category) => (
	<Picker.Item
		key={item}
		label={getCategoryText(item)}
		value={item}
		color={getItemColor(selected, item)}
	/>
);

type categoryPickerProps = { selected: Category, onValueChange: Function, style: Object };
const categoryPicker = pure(({ selected, onValueChange, style }: categoryPickerProps) => (
	<View style={style}>
		<Picker selectedValue={selected} onValueChange={debounce(onValueChange)} style={{ flex: 1 }}>
			{CATEGORIES.map(renderItem(selected))}
		</Picker>
	</View>
));

export default categoryPicker;