From 13c0413ba0ea4eec8c3df02e4ac8d339e4a8fe19 Mon Sep 17 00:00:00 2001 From: Bart Akeley Date: Thu, 20 Apr 2017 16:28:13 -0500 Subject: [PATCH] remove thumnails use carousel --- js/components/ImageThumb.js | 10 ---- js/components/ImagesCountBadge.js | 24 ++++++++ js/components/ItemTile.js | 68 +++++++++++----------- js/pages/FoodItemDetail.js | 95 +++++++++++++++++++++---------- js/streams/FoodItemsStream.js | 19 ++----- js/ui-theme.js | 82 +++++++++++++------------- package.json | 1 + yarn.lock | 4 ++ 8 files changed, 173 insertions(+), 130 deletions(-) delete mode 100644 js/components/ImageThumb.js create mode 100644 js/components/ImagesCountBadge.js diff --git a/js/components/ImageThumb.js b/js/components/ImageThumb.js deleted file mode 100644 index bacbda1..0000000 --- a/js/components/ImageThumb.js +++ /dev/null @@ -1,10 +0,0 @@ -// @flow -import React from 'react'; -import { View, Image } from 'react-native'; -import { pure } from 'recompose'; - -export default pure(({ uri, style }: { uri: string, style?: Object }) => ( - - {!!uri && } - -)); diff --git a/js/components/ImagesCountBadge.js b/js/components/ImagesCountBadge.js new file mode 100644 index 0000000..bcc7a40 --- /dev/null +++ b/js/components/ImagesCountBadge.js @@ -0,0 +1,24 @@ +// @flow +import React from 'react'; +import { View, Text } from 'react-native'; + +type Props = { currentImage: number, totalCount: number, color: string }; + +const ImagesCountBadge = ({ currentImage, totalCount, color }: Props) => ( + + + {currentImage}/{totalCount} + + +); + +export default ImagesCountBadge; diff --git a/js/components/ItemTile.js b/js/components/ItemTile.js index cf0bdb8..0291d02 100644 --- a/js/components/ItemTile.js +++ b/js/components/ItemTile.js @@ -9,50 +9,50 @@ import { Link } from 'react-router-native'; import { routeWithTitle } from '../helpers/RouteHelpers'; export const Thumbnail = ({ thumb }: { thumb: ?string }) => ( - - {thumb} - + + {thumb} + ); export const NameAndPlace = ({ name, place, style }: { name: string, place: string, style: Object }) => ( - - {name} - {place} - + + {name} + {place} + ); export const AvailableCount = ({ count }: { count: number }) => ( - - {count} - + + {count} + ); export const PlaceTile = pure(({ place }: { place: Place, onPress: Function }) => ( - - - - - - + + + + + + )); export const FoodItemTile = pure(({ foodItem }: { foodItem: FoodItem, onPress: Function }) => ( - - - - - - - + + + + + + + )); diff --git a/js/pages/FoodItemDetail.js b/js/pages/FoodItemDetail.js index 213ab7a..badc9a3 100644 --- a/js/pages/FoodItemDetail.js +++ b/js/pages/FoodItemDetail.js @@ -1,30 +1,44 @@ // @flow import React, { Component } from 'react'; -import { Picker, View, TouchableHighlight } from 'react-native'; +import { Image, Text, Picker, View } from 'react-native'; import theme from '../ui-theme'; import { NameAndPlace } from '../components/ItemTile'; import { type FoodItem } from '../records/FoodItemRecord'; import { compose, pure } from 'recompose'; -import ImageThumb from '../components/ImageThumb'; import ImageBackdrop from '../components/ImageBackdrop'; import IconButton from '../components/IconButton'; import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers'; -import Modal from '../components/Modal'; import { withFoodItem } from '../enhancers/foodItemEnhancers'; import { COLOR } from 'react-native-material-ui'; +import Carousel from 'react-native-looped-carousel'; -const QuantityText = pure(({ quantity, onPress }: { quantity: Quantity, style: Object }) => ( - - - - {['none', 'few', 'alot', 'plenty'].map(quantity => ( - - ))} - - - +const QuantityText = pure(({ quantity, onValueChange }: { quantity: Quantity, style: Object }) => ( + + + {['none', 'few', 'alot', 'plenty'].map(quantity => ( + + ))} + + )); +const ImagesCountBadge = ({ currentImage, totalCount }: { currentImage: number, totalCount: number }) => ( + + + {currentImage}/{totalCount} + + +); + export class FoodItemDetail extends Component { static displayName = 'FoodItemDetail'; @@ -33,34 +47,54 @@ export class FoodItemDetail extends Component { }; state: { - quantityModalOpen: boolean, + isFavorite: boolean, + quantity: string, + currentImage: number, }; - state = { quantityModalOpen: false }; + state = { + currentImage: 0, + }; - addToFaves = () => {}; + addToFaves = () => + this.setState(prevState => ({ + isFavorite: !prevState.isFavorite, + })); - updateAmount = () => this.toggleQuantityModal(); + updateAmount = quantity => this.setState({ quantity }); addPhoto = () => {}; - toggleQuantityModal = () => { - this.setState(({ quantityModalOpen }) => { - return { quantityModalOpen: !quantityModalOpen }; - }); - }; + changeCurrentImage = currentImage => this.setState({ currentImage }); render() { const { foodItem } = this.props; + const { images, quantity } = foodItem; + const viewableImages = images.filter(image => !!image); + return ( - + - - - {foodItem.images.map((imageURI, index) => { - return ; - })} - + {viewableImages.length === 1 && + } + {viewableImages.length > 1 && + + {viewableImages.map(uri => ( + + ))} + } + @@ -74,13 +108,12 @@ export class FoodItemDetail extends Component { paddingRight: 20, }} > - + - ); } diff --git a/js/streams/FoodItemsStream.js b/js/streams/FoodItemsStream.js index b0239ba..a0254c6 100644 --- a/js/streams/FoodItemsStream.js +++ b/js/streams/FoodItemsStream.js @@ -14,46 +14,40 @@ const DUMMY_DATA = [ images: [ 'https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg', 'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg', - '', ], thumbImage: 'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg', - titleImage: 'https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg', }, { id: 2, name: 'Jelly Filled Donuts', placeId: 1, quantity: 'few', - images: ['https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg', ''], + images: ['https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg'], thumbImage: 'https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg', - titleImage: 'https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg', }, { id: 3, name: 'Spelt Brownies', placeId: 1, quantity: 'few', - images: ['http://www.momshealthyeats.com/wp-content/uploads/2011/11/spelt-fudge-brownie.jpg', ''], + 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', - titleImage: 'http://www.momshealthyeats.com/wp-content/uploads/2011/11/spelt-fudge-brownie.jpg', }, { id: 4, name: 'Oatmeal Raisin Cookies', placeId: 1, quantity: 'few', - images: ['http://cookingontheside.com/wp-content/uploads/2009/04/oatmeal_raisin_cookies_stack-400.jpg', ''], + 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', - titleImage: 'http://cookingontheside.com/wp-content/uploads/2009/04/oatmeal_raisin_cookies_stack-400.jpg', }, { id: 5, name: 'Donuts with Sprinkles', placeId: 1, quantity: 'few', - images: ['https://dannivee.files.wordpress.com/2013/10/img_1950.jpg', ''], + images: ['https://dannivee.files.wordpress.com/2013/10/img_1950.jpg'], thumbImage: 'https://dannivee.files.wordpress.com/2013/10/img_1950.jpg', - titleImage: 'https://dannivee.files.wordpress.com/2013/10/img_1950.jpg', }, { id: 6, @@ -62,19 +56,16 @@ const DUMMY_DATA = [ quantity: 'few', 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', - titleImage: 'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg', }, { id: 7, name: 'Snickerdoodles', placeId: 1, quantity: 'few', - images: ['http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg', ''], + images: ['http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg'], thumbImage: 'http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg', - titleImage: 'http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg', }, ]; diff --git a/js/ui-theme.js b/js/ui-theme.js index 23cc61f..a459bb8 100644 --- a/js/ui-theme.js +++ b/js/ui-theme.js @@ -6,45 +6,45 @@ import { COLOR } from 'react-native-material-ui'; export default { - palette: { - primaryColor: COLOR.orange500, - accentColor: COLOR.teal500, - disabledColor: COLOR.grey500, - }, - toolbar: { - titleText: { color: COLOR.grey800 }, - leftElement: { color: COLOR.grey800 }, - rightElement: { color: COLOR.grey800 }, - container: { - backgroundColor: COLOR.grey200, - height: 50, - elevation: 0, - }, - }, - page: { - container: { flex: 1, backgroundColor: COLOR.white }, - }, - topTabs: { - selectedUnderlineStyle: { - backgroundColor: COLOR.black, - }, - textColor: COLOR.grey500, - selectedTextColor: COLOR.grey500, - backgroundColor: COLOR.grey200, - }, - itemTile: { - thumbnailSize: 50, - thumbnailColor: COLOR.grey500, - itemNameStyle: { - color: COLOR.grey800, - }, - itemPlaceStyle: { - color: COLOR.grey500, - }, - availableCountStyle: { - fontSize: 25, - color: COLOR.black, - }, - pressHighlightColor: COLOR.pink500, - }, + palette: { + primaryColor: COLOR.orange500, + accentColor: COLOR.teal500, + disabledColor: COLOR.grey500, + }, + toolbar: { + titleText: { color: COLOR.grey800 }, + leftElement: { color: COLOR.grey800 }, + rightElement: { color: COLOR.grey800 }, + container: { + backgroundColor: COLOR.grey200, + height: 50, + elevation: 0, + }, + }, + page: { + container: { flex: 1, backgroundColor: COLOR.grey300 }, + }, + topTabs: { + selectedUnderlineStyle: { + backgroundColor: COLOR.black, + }, + textColor: COLOR.grey500, + selectedTextColor: COLOR.grey500, + backgroundColor: COLOR.grey200, + }, + itemTile: { + thumbnailSize: 50, + thumbnailColor: COLOR.grey500, + itemNameStyle: { + color: COLOR.grey800, + }, + itemPlaceStyle: { + color: COLOR.grey500, + }, + availableCountStyle: { + fontSize: 25, + color: COLOR.black, + }, + pressHighlightColor: COLOR.pink500, + }, }; diff --git a/package.json b/package.json index 12573ec..8a3696b 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react": "^15.4.2", "react-native": "^0.40.0", "react-native-drawer": "^2.3.0", + "react-native-looped-carousel": "^0.1.5", "react-native-material-ui": "^1.7.0", "react-native-modal": "^2.2.0", "react-native-scrollable-tab-view": "^0.7.4", diff --git a/yarn.lock b/yarn.lock index a359bbe..497854a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3603,6 +3603,10 @@ react-native-drawer@^2.3.0: dependencies: tween-functions "^1.0.1" +react-native-looped-carousel@^0.1.5: + version "0.1.5" + resolved "https://registry.yarnpkg.com/react-native-looped-carousel/-/react-native-looped-carousel-0.1.5.tgz#322ffe6cec208949113ed732bfd64d2d5107cbff" + react-native-material-design-styles@^0.2.6: version "0.2.6" resolved "https://registry.yarnpkg.com/react-native-material-design-styles/-/react-native-material-design-styles-0.2.6.tgz#2039f638fd11f1e340db7b39ea81ad07f6d81ff0"