From 2b631036620cefd75afc4539a58c072b76fa72fa Mon Sep 17 00:00:00 2001 From: Bart Akeley Date: Sat, 24 Jun 2017 16:06:11 -0500 Subject: [PATCH] category picker --- js/components/CategoryPicker.js | 28 ++++++++++++++++++++++++++++ js/components/QuantityPicker.js | 4 ++-- js/helpers/CategoryHelpers.js | 15 +++++++++++++++ js/pages/CreateFoodItem.js | 13 ++++++++++--- js/records/FoodItemRecord.js | 13 +++++++++++++ js/streams/FoodItemsStream.js | 12 ++++++++++-- js/ui-theme.js | 5 ++++- 7 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 js/components/CategoryPicker.js create mode 100644 js/helpers/CategoryHelpers.js diff --git a/js/components/CategoryPicker.js b/js/components/CategoryPicker.js new file mode 100644 index 0000000..3c38999 --- /dev/null +++ b/js/components/CategoryPicker.js @@ -0,0 +1,28 @@ +// @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 '../records/FoodItemRecord'; +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 renderItem = (selected: Category) => (item: Category) => + ; + +type categoryPickerProps = { selected: Category, onValueChange: Function, style: Object }; +const categoryPicker = pure(({ selected, onValueChange, style }: categoryPickerProps) => + + + {CATEGORIES.map(renderItem(selected))} + + +); + +export default categoryPicker; diff --git a/js/components/QuantityPicker.js b/js/components/QuantityPicker.js index df6bc27..390a461 100644 --- a/js/components/QuantityPicker.js +++ b/js/components/QuantityPicker.js @@ -7,7 +7,7 @@ import { pure } from 'recompose'; import { type Quantity, QUANTITIES } from '../records/FoodItemRecord'; import debounce from '../helpers/debounce'; -const { quantityPicker: { color: selectedColor } } = theme; +const { picker: { color: selectedColor } } = theme; const defaultColor = 'black'; const getItemColor = (selected, current) => (selected === current ? selectedColor : defaultColor); @@ -24,7 +24,7 @@ const renderQuantityItem = (selectedQuantity: Quantity) => (quantity: Quantity) type QuantityPickerProps = { quantity: Quantity, onValueChange: Function, style: Object }; const QuantityPicker = pure(({ quantity, onValueChange, style }: QuantityPickerProps) => - + {QUANTITIES.map(renderQuantityItem(quantity))} diff --git a/js/helpers/CategoryHelpers.js b/js/helpers/CategoryHelpers.js new file mode 100644 index 0000000..8eed125 --- /dev/null +++ b/js/helpers/CategoryHelpers.js @@ -0,0 +1,15 @@ +// @flow +import { type Category, CATEGORY_BEVERAGES, CATEGORY_DESSERTS, CATEGORY_ENTREES } from '../records/FoodItemRecord'; + +export const getCategoryText = (category: Category) => { + switch (category) { + case CATEGORY_BEVERAGES: + return 'Beverages'; + case CATEGORY_DESSERTS: + return 'Desserts'; + case CATEGORY_ENTREES: + return 'Entrees'; + default: + return 'Other'; + } +}; diff --git a/js/pages/CreateFoodItem.js b/js/pages/CreateFoodItem.js index 116d17d..8818036 100644 --- a/js/pages/CreateFoodItem.js +++ b/js/pages/CreateFoodItem.js @@ -9,14 +9,16 @@ import NameModal from '../modals/FoodItemNameModal'; import QuantityPicker from '../components/QuantityPicker'; import { compose, branch, withState, withHandlers, renderComponent, mapProps } from 'recompose'; import RNGooglePlaces from 'react-native-google-places'; +import CategoryPicker from '../components/CategoryPicker'; const fieldStyle = { paddingTop: 10, - paddingBottom: 10, }; const fieldNameStyle = { fontSize: 18, + paddingBottom: 10, + paddingLeft: 10, }; const Field = ({ onPress, text = '' }: { onPress?: Function, text: string }) => @@ -63,11 +65,16 @@ const CreateFoodItem = ({ foodItem, toggleModal, setPropOfFoodItem, place, setPl - + + diff --git a/js/records/FoodItemRecord.js b/js/records/FoodItemRecord.js index d70e44a..fc1bed4 100644 --- a/js/records/FoodItemRecord.js +++ b/js/records/FoodItemRecord.js @@ -7,11 +7,23 @@ export const QUANTITY_MANY: 'many' = 'many'; export type Quantity = typeof QUANTITY_NONE | typeof QUANTITY_FEW | typeof QUANTITY_MANY; export const QUANTITIES = [QUANTITY_NONE, QUANTITY_FEW, QUANTITY_MANY]; +export const CATEGORY_BEVERAGES: 'beverages' = 'beverages'; +export const CATEGORY_DESSERTS: 'desserts' = 'desserts'; +export const CATEGORY_ENTREES: 'entrees' = 'entrees'; +export const CATEGORY_OTHER: 'other' = 'other'; +export type Category = + | typeof CATEGORY_BEVERAGES + | typeof CATEGORY_DESSERTS + | typeof CATEGORY_ENTREES + | typeof CATEGORY_OTHER; +export const CATEGORIES = [CATEGORY_BEVERAGES, CATEGORY_DESSERTS, CATEGORY_ENTREES, CATEGORY_OTHER]; + export type FoodItem = { id: ?number, name: string, placeId: ?number, quantity: Quantity, + category: Category, images: Array, thumbImage: ?string, titleImage: ?string, @@ -22,6 +34,7 @@ const FoodRecordDefaults: FoodItem = { name: '', placeId: null, quantity: QUANTITY_MANY, + category: CATEGORY_DESSERTS, images: [], thumbImage: '', titleImage: '', diff --git a/js/streams/FoodItemsStream.js b/js/streams/FoodItemsStream.js index 3bd3652..c6e591e 100644 --- a/js/streams/FoodItemsStream.js +++ b/js/streams/FoodItemsStream.js @@ -11,6 +11,7 @@ const DUMMY_DATA = [ name: 'Big John Cookies', placeId: 1, quantity: 'alot', + category: 'dessert', images: [ 'https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg', 'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg', @@ -22,6 +23,7 @@ const DUMMY_DATA = [ name: 'Jelly Filled Donuts', placeId: 2, quantity: 'few', + category: 'dessert', images: ['https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg'], thumbImage: 'https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg', }, @@ -30,6 +32,7 @@ const DUMMY_DATA = [ name: 'Spelt Brownies', placeId: 3, quantity: 'few', + category: 'dessert', images: ['http://www.momshealthyeats.com/wp-content/uploads/2011/11/spelt-fudge-brownie.jpg'], thumbImage: 'http://www.momshealthyeats.com/wp-content/uploads/2011/11/spelt-fudge-brownie.jpg', }, @@ -38,6 +41,7 @@ const DUMMY_DATA = [ name: 'Oatmeal Raisin Cookies', placeId: 4, quantity: 'few', + category: 'dessert', images: ['http://cookingontheside.com/wp-content/uploads/2009/04/oatmeal_raisin_cookies_stack-400.jpg'], thumbImage: 'http://cookingontheside.com/wp-content/uploads/2009/04/oatmeal_raisin_cookies_stack-400.jpg', }, @@ -46,6 +50,7 @@ const DUMMY_DATA = [ name: 'Donuts with Sprinkles', placeId: 5, quantity: 'few', + category: 'dessert', images: ['https://dannivee.files.wordpress.com/2013/10/img_1950.jpg'], thumbImage: 'https://dannivee.files.wordpress.com/2013/10/img_1950.jpg', }, @@ -54,19 +59,22 @@ const DUMMY_DATA = [ name: 'Powdered Donuts', placeId: 1, quantity: 'few', + category: 'dessert', images: [ 'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg', ], - thumbImage: 'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg', + thumbImage: + 'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg', }, { id: 7, name: 'Snickerdoodles', placeId: 3, quantity: 'few', + category: 'dessert', images: ['http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg'], thumbImage: 'http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg', }, ]; -export default Observable.from(DUMMY_DATA.concat(DUMMY_DATA)).map(FoodItemRecord).scan(setById, Map()); +export default Observable.from(DUMMY_DATA).map(FoodItemRecord).scan(setById, Map()); diff --git a/js/ui-theme.js b/js/ui-theme.js index de56e3d..c5a8ca8 100644 --- a/js/ui-theme.js +++ b/js/ui-theme.js @@ -26,6 +26,9 @@ export default { page: { container: { flex: 1, backgroundColor: COLOR.grey300 }, }, + divider: { + container: { height: 2 }, + }, topTabs: { selectedUnderlineStyle: { backgroundColor: COLOR.grey100, @@ -53,7 +56,7 @@ export default { backgroundColor: primaryColor, textColor: COLOR.white, }, - quantityPicker: { + picker: { color: '#0E6E9E', }, foodItemDetails: {