mirror of
https://gitlab.com/wheres-the-tp/ui-mobile.git
synced 2026-01-25 14:24:55 -06:00
33 lines
1.2 KiB
JavaScript
33 lines
1.2 KiB
JavaScript
// @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: { defaultColor, selectedColor } } = theme;
|
|
|
|
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;
|