mirror of
https://gitlab.com/wheres-the-tp/ui-mobile.git
synced 2026-01-25 05:54:56 -06:00
remove thumnails use carousel
This commit is contained in:
Bart Akeley
parent
759c98e5ee
commit
13c0413ba0
8 changed files with 173 additions and 130 deletions
|
|
@ -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 }) => (
|
||||
<View style={{ height: 50, width: 50, margin: 10, backgroundColor: 'grey', ...style }}>
|
||||
{!!uri && <Image source={{ uri }} style={{ flex: 1, resizeMode: 'stretch' }} />}
|
||||
</View>
|
||||
));
|
||||
24
js/components/ImagesCountBadge.js
Normal file
24
js/components/ImagesCountBadge.js
Normal file
|
|
@ -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) => (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
position: 'absolute',
|
||||
bottom: 15,
|
||||
left: 15,
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: 'white' }}>
|
||||
{currentImage}/{totalCount}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export default ImagesCountBadge;
|
||||
|
|
@ -9,50 +9,50 @@ import { Link } from 'react-router-native';
|
|||
import { routeWithTitle } from '../helpers/RouteHelpers';
|
||||
|
||||
export const Thumbnail = ({ thumb }: { thumb: ?string }) => (
|
||||
<View
|
||||
style={{
|
||||
height: theme.itemTile.thumbnailSize,
|
||||
width: theme.itemTile.thumbnailSize,
|
||||
borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
|
||||
backgroundColor: theme.itemTile.thumbnailColor,
|
||||
margin: 10,
|
||||
}}
|
||||
>
|
||||
<Text>{thumb}</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
height: theme.itemTile.thumbnailSize,
|
||||
width: theme.itemTile.thumbnailSize,
|
||||
borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
|
||||
backgroundColor: theme.itemTile.thumbnailColor,
|
||||
margin: 10,
|
||||
}}
|
||||
>
|
||||
<Text>{thumb}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export const NameAndPlace = ({ name, place, style }: { name: string, place: string, style: Object }) => (
|
||||
<View style={{ paddingTop: 15, ...style }}>
|
||||
<Text style={{ ...theme.itemTile.itemNameStyle }}>{name}</Text>
|
||||
<Text style={{ ...theme.itemTile.itemPlaceStyle }}>{place}</Text>
|
||||
</View>
|
||||
<View style={{ paddingTop: 15, ...style }}>
|
||||
<Text style={{ ...theme.itemTile.itemNameStyle }}>{name}</Text>
|
||||
<Text style={{ ...theme.itemTile.itemPlaceStyle }}>{place}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export const AvailableCount = ({ count }: { count: number }) => (
|
||||
<View style={{ height: 70, width: 70, paddingTop: 15 }}>
|
||||
<Text style={{ ...theme.itemTile.availableCountStyle }}>{count}</Text>
|
||||
</View>
|
||||
<View style={{ height: 70, width: 70, paddingTop: 15 }}>
|
||||
<Text style={{ ...theme.itemTile.availableCountStyle }}>{count}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export const PlaceTile = pure(({ place }: { place: Place, onPress: Function }) => (
|
||||
<Link to={routeWithTitle(`/place/${place.id}`, place.name)} underlayColor={theme.itemTile.pressHighlightColor}>
|
||||
<View style={{ height: 70, flexDirection: 'row' }}>
|
||||
<Thumbnail thumb={place.thumb} />
|
||||
<NameAndPlace name={place.name} place="Whole Foods" style={{ flex: 1 }} />
|
||||
</View>
|
||||
</Link>
|
||||
<Link to={routeWithTitle(`/place/${place.id}`, place.name)} underlayColor={theme.itemTile.pressHighlightColor}>
|
||||
<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
|
||||
<Thumbnail thumb={place.thumb} />
|
||||
<NameAndPlace name={place.name} place="Whole Foods" style={{ flex: 1 }} />
|
||||
</View>
|
||||
</Link>
|
||||
));
|
||||
|
||||
export const FoodItemTile = pure(({ foodItem }: { foodItem: FoodItem, onPress: Function }) => (
|
||||
<Link
|
||||
to={routeWithTitle(`/foodItem/${foodItem.id}`, foodItem.name)}
|
||||
underlayColor={theme.itemTile.pressHighlightColor}
|
||||
>
|
||||
<View style={{ height: 70, flexDirection: 'row' }}>
|
||||
<Thumbnail thumb={foodItem.thumb} />
|
||||
<NameAndPlace name={foodItem.name} place="Whole Foods" style={{ flex: 1 }} />
|
||||
<AvailableCount count={foodItem.availableCount} />
|
||||
</View>
|
||||
</Link>
|
||||
<Link
|
||||
to={routeWithTitle(`/foodItem/${foodItem.id}`, foodItem.name)}
|
||||
underlayColor={theme.itemTile.pressHighlightColor}
|
||||
>
|
||||
<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
|
||||
<Thumbnail thumb={foodItem.thumb} />
|
||||
<NameAndPlace name={foodItem.name} place="Whole Foods" style={{ flex: 1 }} />
|
||||
<AvailableCount count={foodItem.availableCount} />
|
||||
</View>
|
||||
</Link>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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 }) => (
|
||||
<TouchableHighlight style={{ flex: 1, flexDirection: 'row' }} onPress={onPress} underlayColor="pink">
|
||||
<View style={{ flex: 1 }}>
|
||||
<Picker selectedValue={quantity} onValueChange={this.toggleQuantityModal} style={{ flex: 1 }}>
|
||||
{['none', 'few', 'alot', 'plenty'].map(quantity => (
|
||||
<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
const QuantityText = pure(({ quantity, onValueChange }: { quantity: Quantity, style: Object }) => (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Picker selectedValue={quantity} onValueChange={onValueChange} style={{ flex: 1 }}>
|
||||
{['none', 'few', 'alot', 'plenty'].map(quantity => (
|
||||
<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
));
|
||||
|
||||
const ImagesCountBadge = ({ currentImage, totalCount }: { currentImage: number, totalCount: number }) => (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: COLOR.grey500,
|
||||
position: 'absolute',
|
||||
bottom: 15,
|
||||
left: 15,
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: COLOR.white }}>
|
||||
{currentImage}/{totalCount}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
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 (
|
||||
<View style={{ ...theme.page.container, backgroundColor: COLOR.grey300 }}>
|
||||
<View style={{ ...theme.page.container }}>
|
||||
<View style={{ flex: 3 }}>
|
||||
<ImageBackdrop uri={foodItem.titleImage} />
|
||||
<View style={{ position: 'absolute', bottom: 0, left: 0, flexDirection: 'row' }}>
|
||||
{foodItem.images.map((imageURI, index) => {
|
||||
return <ImageThumb key={index} uri={imageURI} />;
|
||||
})}
|
||||
</View>
|
||||
{viewableImages.length === 1 &&
|
||||
<Image
|
||||
style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
|
||||
source={{ uri: viewableImages[0] }}
|
||||
/>}
|
||||
{viewableImages.length > 1 &&
|
||||
<Carousel
|
||||
autoplay={false}
|
||||
onAnimateNextPage={this.changeCurrentImage}
|
||||
style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
|
||||
>
|
||||
{viewableImages.map(uri => (
|
||||
<Image key={uri} style={{ flex: 1, resizeMode: 'stretch' }} source={{ uri }} />
|
||||
))}
|
||||
</Carousel>}
|
||||
<ImagesCountBadge
|
||||
currentImage={this.state.currentImage + 1}
|
||||
totalCount={viewableImages.length}
|
||||
color={COLOR.grey500}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1, marginBottom: 10, backgroundColor: 'white', paddingLeft: 20 }}>
|
||||
<NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
|
||||
|
|
@ -74,13 +108,12 @@ export class FoodItemDetail extends Component {
|
|||
paddingRight: 20,
|
||||
}}
|
||||
>
|
||||
<QuantityText quantity="many" onPress={this.toggleQuantityModal} />
|
||||
<QuantityText quantity={this.state.quantity || quantity} onValueChange={this.updateAmount} />
|
||||
</View>
|
||||
<View style={{ flex: 2, paddingBottom: 20, paddingTop: 10, backgroundColor: 'white', paddingLeft: 20 }}>
|
||||
<IconButton glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
|
||||
<IconButton glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
|
||||
</View>
|
||||
<Modal isVisible={this.state.quantityModalOpen} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue