Skip to content

Commit b76d478

Browse files
ashutosh1919ashutosh1919
committed
Course 3 Week 3 Assignment Complete
1 parent 6e61dc7 commit b76d478

File tree

2 files changed

+101
-68
lines changed

2 files changed

+101
-68
lines changed

‎Course3/ReactNative/confusion2/components/DishdetailComponent.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ function RenderDish(props) {
4040
else return false;
4141
};
4242

43+
const recognizeComment = ({ moveX, moveY, dx, dy }) => {
44+
if (dx > 200) return true;
45+
else return false;
46+
};
47+
4348
const panResponder = PanResponder.create({
4449
onStartShouldSetPanResponder: (e, gestureState) => {
4550
return true;
@@ -52,7 +57,7 @@ function RenderDish(props) {
5257
);
5358
},
5459
onPanResponderEnd: (e, gestureState) => {
55-
if (recognizeDrag(gestureState))
60+
if (recognizeDrag(gestureState)) {
5661
Alert.alert(
5762
"Add to Favorites ?",
5863
"Are you sure you wish tto add " + dish.name + " to your favorites?",
@@ -72,6 +77,9 @@ function RenderDish(props) {
7277
],
7378
{ cancelable: false }
7479
);
80+
} else if (recognizeComment(gestureState)) {
81+
props.onPressAddComment();
82+
}
7583

7684
return true;
7785
}

‎Course3/ReactNative/confusion2/components/ReservationComponent.js

+92-67
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import {
77
Picker,
88
Switch,
99
Button,
10-
Modal
10+
Modal,
11+
Alert
1112
} from "react-native";
1213
import { Card } from "react-native-elements";
1314
import DatePicker from "react-native-datepicker";
15+
import * as Animatable from "react-native-animatable";
1416

1517
class Reservation extends Component {
1618
constructor(props) {
@@ -34,7 +36,28 @@ class Reservation extends Component {
3436

3537
handleReservation() {
3638
console.log(JSON.stringify(this.state));
37-
this.toggleModal();
39+
// this.toggleModal();
40+
const { date, guests, smoking } = this.state;
41+
42+
Alert.alert(
43+
"Your Reservation OK?",
44+
`Number of guests: ${guests}\nSmoking? ${
45+
smoking ? "Yes" : "No"
46+
}\nDate and Time:${date}`,
47+
[
48+
{
49+
text: "Cancel",
50+
style: "cancel",
51+
onPress: () => this.resetForm()
52+
},
53+
{
54+
text: "OK",
55+
// eslint-disable-next-line no-confusing-arrow, no-console
56+
onPress: () => this.resetForm()
57+
}
58+
],
59+
{ cancelable: false }
60+
);
3861
}
3962

4063
resetForm() {
@@ -48,70 +71,71 @@ class Reservation extends Component {
4871

4972
render() {
5073
return (
51-
<ScrollView>
52-
<View style={styles.formRow}>
53-
<Text style={styles.formLabel}>Number of Guests</Text>
54-
<Picker
55-
style={styles.formItem}
56-
selectedValue={this.state.guests}
57-
onValueChange={(itemValue, itemIndex) =>
58-
this.setState({ guests: itemValue })
59-
}
60-
>
61-
<Picker.Item label="1" value="1" />
62-
<Picker.Item label="2" value="2" />
63-
<Picker.Item label="3" value="3" />
64-
<Picker.Item label="4" value="4" />
65-
<Picker.Item label="5" value="5" />
66-
<Picker.Item label="6" value="6" />
67-
</Picker>
68-
</View>
69-
<View style={styles.formRow}>
70-
<Text style={styles.formLabel}>Smoking/Non-Smoking?</Text>
71-
<Switch
72-
style={styles.formItem}
73-
value={this.state.smoking}
74-
onTintColor="#512DA8"
75-
onValueChange={value => this.setState({ smoking: value })}
76-
></Switch>
77-
</View>
78-
<View style={styles.formRow}>
79-
<Text style={styles.formLabel}>Date and Time</Text>
80-
<DatePicker
81-
style={{ flex: 2, marginRight: 20 }}
82-
date={this.state.date}
83-
format=""
84-
mode="datetime"
85-
placeholder="select date and Time"
86-
minDate="2017-01-01"
87-
confirmBtnText="Confirm"
88-
cancelBtnText="Cancel"
89-
customStyles={{
90-
dateIcon: {
91-
position: "absolute",
92-
left: 0,
93-
top: 4,
94-
marginLeft: 0
95-
},
96-
dateInput: {
97-
marginLeft: 36
74+
<Animatable.View animation="zoomIn" duration={2000}>
75+
<ScrollView>
76+
<View style={styles.formRow}>
77+
<Text style={styles.formLabel}>Number of Guests</Text>
78+
<Picker
79+
style={styles.formItem}
80+
selectedValue={this.state.guests}
81+
onValueChange={(itemValue, itemIndex) =>
82+
this.setState({ guests: itemValue })
9883
}
99-
// ... You can check the source to find the other keys.
100-
}}
101-
onDateChange={date => {
102-
this.setState({ date: date });
103-
}}
104-
/>
105-
</View>
106-
<View style={styles.formRow}>
107-
<Button
108-
onPress={() => this.handleReservation()}
109-
title="Reserve"
110-
color="#512DA8"
111-
accessibilityLabel="Learn more about this purple button"
112-
/>
113-
</View>
114-
<Modal
84+
>
85+
<Picker.Item label="1" value="1" />
86+
<Picker.Item label="2" value="2" />
87+
<Picker.Item label="3" value="3" />
88+
<Picker.Item label="4" value="4" />
89+
<Picker.Item label="5" value="5" />
90+
<Picker.Item label="6" value="6" />
91+
</Picker>
92+
</View>
93+
<View style={styles.formRow}>
94+
<Text style={styles.formLabel}>Smoking/Non-Smoking?</Text>
95+
<Switch
96+
style={styles.formItem}
97+
value={this.state.smoking}
98+
onTintColor="#512DA8"
99+
onValueChange={value => this.setState({ smoking: value })}
100+
></Switch>
101+
</View>
102+
<View style={styles.formRow}>
103+
<Text style={styles.formLabel}>Date and Time</Text>
104+
<DatePicker
105+
style={{ flex: 2, marginRight: 20 }}
106+
date={this.state.date}
107+
format=""
108+
mode="datetime"
109+
placeholder="select date and Time"
110+
minDate="2017-01-01"
111+
confirmBtnText="Confirm"
112+
cancelBtnText="Cancel"
113+
customStyles={{
114+
dateIcon: {
115+
position: "absolute",
116+
left: 0,
117+
top: 4,
118+
marginLeft: 0
119+
},
120+
dateInput: {
121+
marginLeft: 36
122+
}
123+
// ... You can check the source to find the other keys.
124+
}}
125+
onDateChange={date => {
126+
this.setState({ date: date });
127+
}}
128+
/>
129+
</View>
130+
<View style={styles.formRow}>
131+
<Button
132+
onPress={() => this.handleReservation()}
133+
title="Reserve"
134+
color="#512DA8"
135+
accessibilityLabel="Learn more about this purple button"
136+
/>
137+
</View>
138+
{/* <Modal
115139
animationType={"slide"}
116140
transparent={false}
117141
visible={this.state.showModal}
@@ -144,8 +168,9 @@ class Reservation extends Component {
144168
title="Close"
145169
/>
146170
</View>
147-
</Modal>
148-
</ScrollView>
171+
</Modal> */}
172+
</ScrollView>
173+
</Animatable.View>
149174
);
150175
}
151176
}

0 commit comments

Comments
 (0)