Skip to content

Commit 57d153b

Browse files
ATF19ATF19
authored
Merge pull request atef-najar#28 from nipek/patch-1
Carousel, quantity icons and open gallery fix
2 parents a391e2d + 8a65416 commit 57d153b

File tree

1 file changed

+92
-92
lines changed

1 file changed

+92
-92
lines changed

‎src/page/Product.js

Lines changed: 92 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Carousel, { Pagination } from 'react-native-snap-carousel';
1313
import Colors from '../Colors';
1414
import Text from '../component/Text';
1515
import Navbar from '../component/Navbar';
16-
import {default as ProductComponent} from '../component/Product';
16+
import { default as ProductComponent } from '../component/Product';
1717

1818
export default class Product extends Component {
1919

@@ -30,7 +30,7 @@ export default class Product extends Component {
3030

3131
componentWillMount() {
3232
//get the product with id of this.props.product.id from your server
33-
this.setState({product: dummyProduct});
33+
this.setState({ product: dummyProduct });
3434
}
3535

3636
componentDidMount() {
@@ -45,61 +45,65 @@ export default class Product extends Component {
4545

4646
render() {
4747
var left = (
48-
<Left style={{flex:1}}>
48+
<Left style={{ flex: 1 }}>
4949
<Button onPress={() => Actions.pop()} transparent>
5050
<Icon name='ios-arrow-back' />
5151
</Button>
5252
</Left>
5353
);
5454
var right = (
55-
<Right style={{flex:1}}>
55+
<Right style={{ flex: 1 }}>
5656
<Button onPress={() => Actions.search()} transparent>
57-
<Icon name='ios-search-outline' />
57+
<Icon name='ios-search' />
5858
</Button>
5959
<Button onPress={() => Actions.cart()} transparent>
6060
<Icon name='ios-cart' />
6161
</Button>
6262
</Right>
6363
);
64-
return(
65-
<Container style={{backgroundColor: '#fdfdfd'}}>
64+
return (
65+
<Container style={{ backgroundColor: '#fdfdfd' }}>
6666
<Navbar left={left} right={right} title={this.props.product.title} />
6767
<Content>
68+
69+
70+
71+
6872
<Carousel
69-
ref={(carousel) => { this._carousel = carousel; }}
70-
sliderWidth={Dimensions.get('window').width}
71-
itemWidth={Dimensions.get('window').width}
72-
onSnapToItem={(index) => this.setState({ activeSlide: index }) }
73-
enableSnap={true}
74-
>
75-
{this.renderImages()}
76-
</Carousel>
77-
<Pagination
78-
dotsLength={this.state.product.images.length}
79-
activeDotIndex={this.state.activeSlide}
80-
containerStyle={{ backgroundColor: 'transparent',paddingTop: 0, paddingBottom: 0, marginTop: -15 }}
81-
dotStyle={{
82-
width: 10,
83-
height: 10,
84-
borderRadius: 5,
85-
marginHorizontal: 2,
86-
backgroundColor: 'rgba(255, 255, 255, 0.92)'
87-
}}
88-
inactiveDotOpacity={0.4}
89-
inactiveDotScale={0.6}
90-
/>
91-
<View style={{backgroundColor: '#fdfdfd', paddingTop: 10, paddingBottom: 10, paddingLeft: 12, paddingRight: 12, alignItems: 'center'}}>
73+
data={this.state.product.images}
74+
renderItem={this._renderItem}
75+
ref={(carousel) => { this._carousel = carousel; }}
76+
sliderWidth={Dimensions.get('window').width}
77+
itemWidth={Dimensions.get('window').width}
78+
onSnapToItem={(index) => this.setState({ activeSlide: index })}
79+
enableSnap={true}
80+
/>
81+
<Pagination
82+
dotsLength={this.state.product.images.length}
83+
activeDotIndex={this.state.activeSlide}
84+
containerStyle={{ backgroundColor: 'transparent', paddingTop: 0, paddingBottom: 0, marginTop: -15 }}
85+
dotStyle={{
86+
width: 10,
87+
height: 10,
88+
borderRadius: 5,
89+
marginHorizontal: 2,
90+
backgroundColor: 'rgba(255, 255, 255, 0.92)'
91+
}}
92+
inactiveDotOpacity={0.4}
93+
inactiveDotScale={0.6}
94+
/>
95+
<View style={{ backgroundColor: '#fdfdfd', paddingTop: 10, paddingBottom: 10, paddingLeft: 12, paddingRight: 12, alignItems: 'center' }}>
9296
<Grid>
9397
<Col size={3}>
94-
<Text style={{fontSize: 18}}>{this.state.product.title}</Text>
98+
<Text style={{ fontSize: 18 }}>{this.state.product.title}</Text>
9599
</Col>
96100
<Col>
97-
<Text style={{fontSize: 20, fontWeight: 'bold'}}>{this.state.product.price}</Text>
101+
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>{this.state.product.price}</Text>
98102
</Col>
99103
</Grid>
100-
<Grid style={{marginTop: 15}}>
104+
<Grid style={{ marginTop: 15 }}>
101105
<Col>
102-
<View style={{flex: 1, justifyContent: 'center'}}>
106+
<View style={{ flex: 1, justifyContent: 'center' }}>
103107
<Text>Color:</Text>
104108
</View>
105109
</Col>
@@ -109,15 +113,15 @@ export default class Product extends Component {
109113
placeholder="Select a color"
110114
note={true}
111115
selectedValue={this.state.selectedColor}
112-
onValueChange={(color) => this.setState({selectedColor: color})}
116+
onValueChange={(color) => this.setState({ selectedColor: color })}
113117
>
114118
{this.renderColors()}
115119
</Picker>
116120
</Col>
117121
</Grid>
118122
<Grid>
119123
<Col>
120-
<View style={{flex: 1, justifyContent: 'center'}}>
124+
<View style={{ flex: 1, justifyContent: 'center' }}>
121125
<Text>Size:</Text>
122126
</View>
123127
</Col>
@@ -127,81 +131,77 @@ export default class Product extends Component {
127131
placeholder="Select a size"
128132
note={true}
129133
selectedValue={this.state.selectedSize}
130-
onValueChange={(size) => this.setState({selectedSize: size})}
134+
onValueChange={(size) => this.setState({ selectedSize: size })}
131135
>
132136
{this.renderSize()}
133137
</Picker>
134138
</Col>
135139
</Grid>
136140
<Grid>
137141
<Col>
138-
<View style={{flex: 1, justifyContent: 'center'}}>
142+
<View style={{ flex: 1, justifyContent: 'center' }}>
139143
<Text>Quantity:</Text>
140144
</View>
141145
</Col>
142146
<Col size={3}>
143-
<View style={{flex: 1, flexDirection: 'row'}}>
144-
<Button style={{flex: 1}} icon light onPress={() => this.setState({quantity: this.state.quantity>1 ? this.state.quantity-1 : 1})} >
145-
<Icon name='ios-remove-outline' />
147+
<View style={{ flex: 1, flexDirection: 'row' }}>
148+
<Button block icon transparent onPress={() => this.setState({ quantity: this.state.quantity > 1 ? this.state.quantity - 1 : 1 })} >
149+
<Icon name='ios-remove' style={{ color: Colors.navbarBackgroundColor }} />
146150
</Button>
147-
<View style={{flex: 4, justifyContent: 'center', alignItems: 'center', paddingLeft: 30, paddingRight: 30}}>
148-
<Text style={{fontSize: 18}}>{this.state.quantity}</Text>
151+
<View style={{ flex: 4, justifyContent: 'center', alignItems: 'center', paddingLeft: 30, paddingRight: 30 }}>
152+
<Text style={{ fontSize: 18 }}>{this.state.quantity}</Text>
149153
</View>
150-
<Button style={{flex: 1}} icon light onPress={() => this.setState({quantity: this.state.quantity+1})}>
151-
<Icon name='ios-add' />
154+
<Button block icon transparent onPress={() => this.setState({ quantity: this.state.quantity + 1 })}>
155+
<Icon style={{ color: Colors.navbarBackgroundColor }} name='ios-add' />
152156
</Button>
153157
</View>
154158
</Col>
155159
</Grid>
156-
<Grid style={{marginTop: 15}}>
160+
<Grid style={{ marginTop: 15 }}>
157161
<Col size={3}>
158-
<Button block onPress={this.addToCart.bind(this)} style={{backgroundColor: Colors.navbarBackgroundColor}}>
159-
<Text style={{color: "#fdfdfd", marginLeft: 5}}>Add to cart</Text>
162+
<Button block onPress={this.addToCart.bind(this)} style={{ backgroundColor: Colors.navbarBackgroundColor }}>
163+
<Text style={{ color: "#fdfdfd", marginLeft: 5 }}>Add to cart</Text>
160164
</Button>
161165
</Col>
162166
<Col>
163-
<Button block onPress={this.addToWishlist.bind(this)} icon transparent style={{backgroundColor: '#fdfdfd'}}>
164-
<Icon style={{color: Colors.navbarBackgroundColor}} name='ios-heart' />
165-
</Button>
167+
<Button block onPress={this.addToWishlist.bind(this)} icon transparent style={{ backgroundColor: '#fdfdfd' }}>
168+
<Icon style={{ color: Colors.navbarBackgroundColor }} name='ios-heart' />
169+
</Button>
166170
</Col>
167171
</Grid>
168-
<View style={{marginTop: 15, padding: 10, borderWidth: 1, borderRadius: 3, borderColor: 'rgba(149, 165, 166, 0.3)'}}>
169-
<Text style={{marginBottom: 5}}>Description</Text>
170-
<View style={{width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10}} />
172+
<View style={{ marginTop: 15, padding: 10, borderWidth: 1, borderRadius: 3, borderColor: 'rgba(149, 165, 166, 0.3)' }}>
173+
<Text style={{ marginBottom: 5 }}>Description</Text>
174+
<View style={{ width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10 }} />
171175
<NBText note>
172176
{this.state.product.description}
173177
</NBText>
174178
</View>
175179
</View>
176-
<View style={{marginTop: 15, paddingLeft: 12, paddingRight: 12}}>
177-
<Text style={{marginBottom: 5}}>Similar items</Text>
178-
<View style={{width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10}} />
180+
<View style={{ marginTop: 15, paddingLeft: 12, paddingRight: 12 }}>
181+
<Text style={{ marginBottom: 5 }}>Similar items</Text>
182+
<View style={{ width: 50, height: 1, backgroundColor: 'rgba(44, 62, 80, 0.5)', marginLeft: 7, marginBottom: 10 }} />
179183
{this.renderSimilairs()}
180184
</View>
181185
</Content>
182186
</Container>
183187
);
184188
}
185-
186-
renderImages() {
187-
let images = [];
188-
this.state.product.images.map((img, i) => {
189-
images.push(
190-
<TouchableWithoutFeedback
191-
key={i}
192-
onPress={() => this.openGallery(i)}
193-
>
194-
<Image
195-
source={{uri: img}}
196-
style={{width: Dimensions.get('window').width, height: 350}}
197-
resizeMode="cover"
198-
/>
199-
</TouchableWithoutFeedback>
200-
);
201-
});
202-
return images;
189+
_renderItem = ({ item, index }) => {
190+
return (
191+
<TouchableWithoutFeedback
192+
key={index}
193+
onPress={() => this.openGallery(index)}
194+
>
195+
<Image
196+
source={{ uri: item }}
197+
style={{ width: Dimensions.get('window').width, height: 350 }}
198+
resizeMode="cover"
199+
/>
200+
</TouchableWithoutFeedback>
201+
);
203202
}
204203

204+
205205
renderColors() {
206206
let colors = [];
207207
this.state.product.colors.map((color, i) => {
@@ -225,29 +225,29 @@ export default class Product extends Component {
225225
renderSimilairs() {
226226
let items = [];
227227
let stateItems = this.state.product.similarItems;
228-
for(var i=0; i<stateItems.length; i+=2 ) {
229-
if(stateItems[i+1]) {
228+
for (var i = 0; i < stateItems.length; i += 2) {
229+
if (stateItems[i + 1]) {
230230
items.push(
231231
<Grid key={i}>
232232
<ProductComponent key={stateItems[i].id} product={stateItems[i]} />
233-
<ProductComponent key={stateItems[i+1].id} product={stateItems[i+1]} isRight />
233+
<ProductComponent key={stateItems[i + 1].id} product={stateItems[i + 1]} isRight />
234234
</Grid>
235235
);
236236
}
237237
else {
238238
items.push(
239239
<Grid key={i}>
240240
<ProductComponent key={stateItems[i].id} product={stateItems[i]} />
241-
<Col key={i+1} />
241+
<Col key={i + 1} />
242242
</Grid>
243243
);
244244
}
245245
}
246246
return items;
247247
}
248248

249-
openGallery(pos) {
250-
Actions.imageGallery({images: this.state.product.images, position: pos});
249+
openGallery = (pos) => {
250+
Actions.imageGallery({ images: this.state.product.images, position: pos });
251251
}
252252

253253
addToCart() {
@@ -256,11 +256,11 @@ export default class Product extends Component {
256256
product['size'] = this.state.selectedSize;
257257
product['quantity'] = this.state.quantity;
258258
AsyncStorage.getItem("CART", (err, res) => {
259-
if(!res) AsyncStorage.setItem("CART",JSON.stringify([product]));
259+
if (!res) AsyncStorage.setItem("CART", JSON.stringify([product]));
260260
else {
261261
var items = JSON.parse(res);
262262
items.push(product);
263-
AsyncStorage.setItem("CART",JSON.stringify(items));
263+
AsyncStorage.setItem("CART", JSON.stringify(items));
264264
}
265265
Toast.show({
266266
text: 'Product added to your cart !',
@@ -276,18 +276,18 @@ export default class Product extends Component {
276276
var product = this.state.product;
277277
var success = true;
278278
AsyncStorage.getItem("WISHLIST", (err, res) => {
279-
if(!res) AsyncStorage.setItem("WISHLIST",JSON.stringify([product]));
279+
if (!res) AsyncStorage.setItem("WISHLIST", JSON.stringify([product]));
280280
else {
281281
var items = JSON.parse(res);
282-
if(this.search(items, product)) {
282+
if (this.search(items, product)) {
283283
success = false
284284
}
285285
else {
286286
items.push(product);
287-
AsyncStorage.setItem("WISHLIST",JSON.stringify(items));
287+
AsyncStorage.setItem("WISHLIST", JSON.stringify(items));
288288
}
289289
}
290-
if(success) {
290+
if (success) {
291291
Toast.show({
292292
text: 'Product added to your wishlist !',
293293
position: 'bottom',
@@ -309,8 +309,8 @@ export default class Product extends Component {
309309
}
310310

311311
search(array, object) {
312-
for(var i=0; i<array.length; i++)
313-
if(JSON.stringify(array[i]) === JSON.stringify(object))
312+
for (var i = 0; i < array.length; i++)
313+
if (JSON.stringify(array[i]) === JSON.stringify(object))
314314
return true;
315315
return false;
316316
}
@@ -333,8 +333,8 @@ const dummyProduct = {
333333
sizes: ['S', 'M', 'L', 'XL', 'XXL'],
334334
category: 'MAN',
335335
similarItems: [
336-
{id: 10, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg'},
337-
{id: 11, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'},
338-
{id: 12, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg'}
336+
{ id: 10, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg' },
337+
{ id: 11, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg' },
338+
{ id: 12, title: 'V NECK T-SHIRT', price: '29$', image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg' }
339339
]
340340
};

0 commit comments

Comments
 (0)