Skip to content

Commit 4ba8eda

Browse files
Marco SciutoMarco Sciuto
Marco Sciuto
authored and
Marco Sciuto
committed
first commit
0 parents  commit 4ba8eda

9 files changed

Lines changed: 342 additions & 0 deletions

File tree

‎App.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component } from 'react';
2+
import { View, StyleSheet } from 'react-native';
3+
4+
import ShoppingList from './src/components/ShoppingList';
5+
import Header from './src/components/Header';
6+
7+
8+
export default class App extends Component {
9+
render() {
10+
return (
11+
<View style={styles.container}>
12+
<Header title="Shopping Cart" />
13+
<ShoppingList />
14+
</View>
15+
);
16+
}
17+
}
18+
19+
const styles = StyleSheet.create({
20+
container: {
21+
flex: 1,
22+
backgroundColor: '#fff',
23+
//alignItems: 'center',
24+
justifyContent: 'flex-start',
25+
top: 24
26+
},
27+
});

‎src/components/Header.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
4+
class Header extends Component {
5+
render() {
6+
return (
7+
<View style={[styles.wrapper, this.props.style]}>
8+
<Text style={styles.text}>{this.props.title}</Text>
9+
</View>
10+
11+
);
12+
}
13+
}
14+
export default Header;
15+
const styles = StyleSheet.create({
16+
wrapper: {
17+
height: 44,
18+
justifyContent: 'center',
19+
backgroundColor: 'dodgerblue',
20+
alignItems: 'center'
21+
},
22+
text: {
23+
color: 'white',
24+
fontSize: 20
25+
}
26+
});

‎src/components/OrderItem.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, TouchableOpacity } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import ProductDetail from './ProductDetail';
5+
import Thumbnail from './Thumbnail';
6+
import QuantityManager from './QuantityManager';
7+
8+
class OrderItem extends Component {
9+
render() {
10+
return (
11+
<TouchableOpacity style={styles.wrapper}>
12+
<Thumbnail img={this.props.img} />
13+
<ProductDetail
14+
title={this.props.title}
15+
desc={this.props.desc}
16+
price={this.props.price}
17+
/>
18+
<QuantityManager
19+
onQuantityUpdate={this.props.onQuantityUpdate}
20+
basePrice={this.props.price}
21+
/>
22+
23+
</TouchableOpacity>
24+
);
25+
}
26+
}
27+
28+
OrderItem.propTypes = {
29+
img: PropTypes.string,
30+
title: PropTypes.string,
31+
desc: PropTypes.string,
32+
price: PropTypes.number,
33+
onQuantityUpdate: PropTypes.func
34+
};
35+
36+
export default OrderItem;
37+
38+
const styles = StyleSheet.create({
39+
wrapper: {
40+
flex: 1,
41+
flexDirection: 'row',
42+
justifyContent: 'flex-start',
43+
borderWidth: 1,
44+
height: 200
45+
}
46+
});

‎src/components/ProductDetail.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { StyleSheet, Text, View } from 'react-native';
4+
5+
class ProductDetail extends Component {
6+
render() {
7+
return (
8+
<View style={styles.wrapper}>
9+
<Text style={styles.title}>{this.props.title}</Text>
10+
<Text style={styles.desc}>{this.props.desc}</Text>
11+
<Text style={styles.price}>{this.props.price}</Text>
12+
</View>
13+
);
14+
}
15+
}
16+
17+
ProductDetail.propTypes = {
18+
title: PropTypes.string,
19+
desc: PropTypes.string,
20+
price: PropTypes.number
21+
};
22+
23+
const styles = StyleSheet.create({
24+
wrapper: {
25+
borderWidth: 1,
26+
flex: 2
27+
},
28+
title: {
29+
fontSize: 16,
30+
fontWeight: '400'
31+
},
32+
desc: {
33+
fontSize: 12
34+
}
35+
});
36+
37+
export default ProductDetail;

‎src/components/QuantityManager.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, Text, View, Button } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
5+
class QuantityManager extends Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = { quantity: 0 };
9+
this.onQuantityChange.bind(this);
10+
}
11+
onQuantityChange(decrease) {
12+
if (decrease && this.state.quantity > 0) {
13+
this.setState({ quantity: this.state.quantity - 1 });
14+
15+
this.props.onQuantityUpdate(-this.props.basePrice);
16+
} else if (!decrease) {
17+
this.setState({ quantity: this.state.quantity + 1 });
18+
19+
this.props.onQuantityUpdate(this.props.basePrice);
20+
}
21+
}
22+
render() {
23+
return (
24+
<View style={styles.wrapper}>
25+
<Text>Quantity: { this.state.quantity }</Text>
26+
<View style={styles.buttons}>
27+
<Button title=" + " onPress={() => this.onQuantityChange(false)} />
28+
<Button title=" - " onPress={() => this.onQuantityChange(true)} />
29+
</View>
30+
31+
</View>
32+
);
33+
}
34+
}
35+
36+
QuantityManager.propTypes = {
37+
onQuantityUpdate: PropTypes.func,
38+
basePrice: PropTypes.number
39+
};
40+
export default QuantityManager;
41+
42+
const styles = StyleSheet.create({
43+
wrapper: {
44+
borderWidth: 1,
45+
flex: 1,
46+
justifyContent: 'center'
47+
},
48+
buttons: {
49+
flexDirection: 'row',
50+
borderWidth: 1,
51+
justifyContent: 'center'
52+
}
53+
});

‎src/components/ShoppingList.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, ScrollView, View } from 'react-native';
3+
import OrderItem from './OrderItem';
4+
import Total from './Total';
5+
6+
class ShoppingList extends Component {
7+
//state = { total: 0 };
8+
constructor(props) {
9+
super(props);
10+
/*this.ds = new ListView.DataSource({
11+
rowHasChanged: (r1, r2) => r1.title !== r2.title
12+
});*/
13+
this.state = { total: 0 };
14+
}
15+
16+
updateTotal(amount) {
17+
this.setState({ total: this.state.total + amount });
18+
}
19+
20+
render() {
21+
return (
22+
<View style={styles.wrapper}>
23+
<Total total={this.state.total} />
24+
<ScrollView>
25+
26+
<OrderItem
27+
img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
28+
title="BUH"
29+
desc="buh"
30+
price={25.36}
31+
onQuantityUpdate={this.updateTotal.bind(this)}
32+
/>
33+
<OrderItem
34+
img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
35+
title="BUH"
36+
desc="buh"
37+
price={25.36}
38+
onQuantityUpdate={this.updateTotal.bind(this)}
39+
/>
40+
<OrderItem
41+
img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
42+
title="BUH"
43+
desc="buh"
44+
price={25.36}
45+
onQuantityUpdate={this.updateTotal.bind(this)}
46+
/>
47+
<OrderItem
48+
img="https://pbs.twimg.com/profile_images/569593540674473984/slHSRznT.jpeg"
49+
title="BUH"
50+
desc="buh"
51+
price={25.36}
52+
onQuantityUpdate={this.updateTotal.bind(this)}
53+
/>
54+
55+
</ScrollView>
56+
</View>
57+
);
58+
}
59+
}
60+
export default ShoppingList;
61+
const styles = StyleSheet.create({
62+
wrapper: {
63+
flex: 1
64+
//justifyContent: 'flex-start'
65+
66+
}
67+
});
68+
69+
/*renderOrderItems() {
70+
this.props.items.map(currentItem =>
71+
<OrderItem
72+
imgsrc={currentItem.thumbnailUrl}
73+
title={currentItem.title}
74+
desc={currentItem.description}
75+
price={currentItem.price}
76+
onQuantityUpdate={this.updateTotal.bind(this)}
77+
78+
/>);
79+
}*/
80+
/*ShoppingList.defaultProps =
81+
{ items:
82+
[{ title: 'Masterining React Native',
83+
thumbnailUrl: 'https://images-na.ssl-images-amazon.com/images/I/51OqHiEyDtL.jpg',
84+
description: 'One of the book used during the LAP2 course for learning React Native development',
85+
price: 30.4,
86+
url: 'https://www.amazon.it/dp/1785885782/ref=cm_sw_r_cp_ep_dp_xxFdzb4HAR9N9'},
87+
{title:"Getting Started With React Native","thumbnailUrl":"https://images-na.ssl-images-amazon.com/images/I/51DkGupUKoL.jpg","description":"One of the book used during the LAP2 course for learning React Native development","price":30.4,"url":"https://www.amazon.it/dp/1785885189/ref=cm_sw_r_cp_ep_dp_XyFdzbBK48PEE"},{"title":"Masterining React Native","thumbnailUrl":"https://images-na.ssl-images-amazon.com/images/I/51OqHiEyDtL.jpg","description":"One of the book used during the LAP2 course for learning React Native development","price":30.4,"url":"https://www.amazon.it/dp/1785885782/ref=cm_sw_r_cp_ep_dp_xxFdzb4HAR9N9"},{"title":"Getting Started With React Native","thumbnailUrl":"https://images-na.ssl-images-amazon.com/images/I/51DkGupUKoL.jpg","description":"One of the book used during the LAP2 course for learning React Native development","price":30.4,"url":"https://www.amazon.it/dp/1785885189/ref=cm_sw_r_cp_ep_dp_XyFdzbBK48PEE"},{"title":"Masterining React Native","thumbnailUrl":"https://images-na.ssl-images-amazon.com/images/I/51OqHiEyDtL.jpg","description":"One of the book used during the LAP2 course for learning React Native development","price":30.4,"url":"https://www.amazon.it/dp/1785885782/ref=cm_sw_r_cp_ep_dp_xxFdzb4HAR9N9"},{"title":"Getting Started With React Native","thumbnailUrl":"https://images-na.ssl-images-amazon.com/images/I/51DkGupUKoL.jpg","description":"One of the book used during the LAP2 course for learning React Native development","price":30.4,"url":"https://www.amazon.it/dp/1785885189/ref=cm_sw_r_cp_ep_dp_XyFdzbBK48PEE"}]}*/

‎src/components/Thumbnail.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { StyleSheet, Image } from 'react-native';
4+
5+
class Thumbnail extends Component {
6+
render() {
7+
return (
8+
<Image
9+
source={{ uri: this.props.img }}
10+
resizeMode="contain"
11+
style={styles.thumbnail}
12+
/>
13+
);
14+
}
15+
}
16+
17+
Thumbnail.propTypes = {
18+
imgsrc: PropTypes.string
19+
};
20+
21+
const styles = StyleSheet.create({
22+
thumbnail: {
23+
width: 100
24+
25+
}
26+
});
27+
28+
export default Thumbnail;

‎src/components/Total.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
5+
class Total extends Component {
6+
7+
render() {
8+
return (
9+
<View style={styles.wrapper}>
10+
<Text style={styles.text}>Total: {this.props.total}</Text>
11+
</View>
12+
);
13+
}
14+
15+
}
16+
17+
Total.propTypes = {
18+
total: PropTypes.number
19+
};
20+
21+
const styles = StyleSheet.create({
22+
wrapper: {
23+
height: 44,
24+
backgroundColor: 'darkorange',
25+
justifyContent: 'center',
26+
//alignSelf: 'stretch',
27+
alignItems: 'center',
28+
shadowOffset: { height: 2 },
29+
shadowColor: 'black',
30+
shadowOpacity: 0.2
31+
},
32+
text: {
33+
fontSize: 18,
34+
color: 'white',
35+
fontWeight: '300'
36+
}
37+
});
38+
export default Total;

‎src/components/slHSRznT.jpeg‎

84.4 KB
Loading

0 commit comments

Comments
 (0)