Skip to content

Commit 709f85b

Browse files
kadikramankadikraman
committed
Forms exercise
1 parent 1850116 commit 709f85b

File tree

2 files changed

+271
-6
lines changed

2 files changed

+271
-6
lines changed

‎screens/AddNewPaletteModal.js

+263-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,270 @@
1-
import React from 'react';
2-
import { View, Text } from 'react-native';
1+
import React, { useState, useCallback } from 'react';
2+
import {
3+
View,
4+
Text,
5+
StyleSheet,
6+
TextInput,
7+
Switch,
8+
FlatList,
9+
TouchableOpacity,
10+
Alert,
11+
} from 'react-native';
12+
13+
const COLORS = [
14+
{ colorName: 'AliceBlue', hexCode: '#F0F8FF' },
15+
{ colorName: 'AntiqueWhite', hexCode: '#FAEBD7' },
16+
{ colorName: 'Aqua', hexCode: '#00FFFF' },
17+
{ colorName: 'Aquamarine', hexCode: '#7FFFD4' },
18+
{ colorName: 'Azure', hexCode: '#F0FFFF' },
19+
{ colorName: 'Beige', hexCode: '#F5F5DC' },
20+
{ colorName: 'Bisque', hexCode: '#FFE4C4' },
21+
{ colorName: 'Black', hexCode: '#000000' },
22+
{ colorName: 'BlanchedAlmond', hexCode: '#FFEBCD' },
23+
{ colorName: 'Blue', hexCode: '#0000FF' },
24+
{ colorName: 'BlueViolet', hexCode: '#8A2BE2' },
25+
{ colorName: 'Brown', hexCode: '#A52A2A' },
26+
{ colorName: 'BurlyWood', hexCode: '#DEB887' },
27+
{ colorName: 'CadetBlue', hexCode: '#5F9EA0' },
28+
{ colorName: 'Chartreuse', hexCode: '#7FFF00' },
29+
{ colorName: 'Chocolate', hexCode: '#D2691E' },
30+
{ colorName: 'Coral', hexCode: '#FF7F50' },
31+
{ colorName: 'CornflowerBlue', hexCode: '#6495ED' },
32+
{ colorName: 'Cornsilk', hexCode: '#FFF8DC' },
33+
{ colorName: 'Crimson', hexCode: '#DC143C' },
34+
{ colorName: 'Cyan', hexCode: '#00FFFF' },
35+
{ colorName: 'DarkBlue', hexCode: '#00008B' },
36+
{ colorName: 'DarkCyan', hexCode: '#008B8B' },
37+
{ colorName: 'DarkGoldenRod', hexCode: '#B8860B' },
38+
{ colorName: 'DarkGray', hexCode: '#A9A9A9' },
39+
{ colorName: 'DarkGrey', hexCode: '#A9A9A9' },
40+
{ colorName: 'DarkGreen', hexCode: '#006400' },
41+
{ colorName: 'DarkKhaki', hexCode: '#BDB76B' },
42+
{ colorName: 'DarkMagenta', hexCode: '#8B008B' },
43+
{ colorName: 'DarkOliveGreen', hexCode: '#556B2F' },
44+
{ colorName: 'Darkorange', hexCode: '#FF8C00' },
45+
{ colorName: 'DarkOrchid', hexCode: '#9932CC' },
46+
{ colorName: 'DarkRed', hexCode: '#8B0000' },
47+
{ colorName: 'DarkSalmon', hexCode: '#E9967A' },
48+
{ colorName: 'DarkSeaGreen', hexCode: '#8FBC8F' },
49+
{ colorName: 'DarkSlateBlue', hexCode: '#483D8B' },
50+
{ colorName: 'DarkSlateGray', hexCode: '#2F4F4F' },
51+
{ colorName: 'DarkSlateGrey', hexCode: '#2F4F4F' },
52+
{ colorName: 'DarkTurquoise', hexCode: '#00CED1' },
53+
{ colorName: 'DarkViolet', hexCode: '#9400D3' },
54+
{ colorName: 'DeepPink', hexCode: '#FF1493' },
55+
{ colorName: 'DeepSkyBlue', hexCode: '#00BFFF' },
56+
{ colorName: 'DimGray', hexCode: '#696969' },
57+
{ colorName: 'DimGrey', hexCode: '#696969' },
58+
{ colorName: 'DodgerBlue', hexCode: '#1E90FF' },
59+
{ colorName: 'FireBrick', hexCode: '#B22222' },
60+
{ colorName: 'FloralWhite', hexCode: '#FFFAF0' },
61+
{ colorName: 'ForestGreen', hexCode: '#228B22' },
62+
{ colorName: 'Fuchsia', hexCode: '#FF00FF' },
63+
{ colorName: 'Gainsboro', hexCode: '#DCDCDC' },
64+
{ colorName: 'GhostWhite', hexCode: '#F8F8FF' },
65+
{ colorName: 'Gold', hexCode: '#FFD700' },
66+
{ colorName: 'GoldenRod', hexCode: '#DAA520' },
67+
{ colorName: 'Gray', hexCode: '#808080' },
68+
{ colorName: 'Grey', hexCode: '#808080' },
69+
{ colorName: 'Green', hexCode: '#008000' },
70+
{ colorName: 'GreenYellow', hexCode: '#ADFF2F' },
71+
{ colorName: 'HoneyDew', hexCode: '#F0FFF0' },
72+
{ colorName: 'HotPink', hexCode: '#FF69B4' },
73+
{ colorName: 'IndianRed', hexCode: '#CD5C5C' },
74+
{ colorName: 'Indigo', hexCode: '#4B0082' },
75+
{ colorName: 'Ivory', hexCode: '#FFFFF0' },
76+
{ colorName: 'Khaki', hexCode: '#F0E68C' },
77+
{ colorName: 'Lavender', hexCode: '#E6E6FA' },
78+
{ colorName: 'LavenderBlush', hexCode: '#FFF0F5' },
79+
{ colorName: 'LawnGreen', hexCode: '#7CFC00' },
80+
{ colorName: 'LemonChiffon', hexCode: '#FFFACD' },
81+
{ colorName: 'LightBlue', hexCode: '#ADD8E6' },
82+
{ colorName: 'LightCoral', hexCode: '#F08080' },
83+
{ colorName: 'LightCyan', hexCode: '#E0FFFF' },
84+
{ colorName: 'LightGoldenRodYellow', hexCode: '#FAFAD2' },
85+
{ colorName: 'LightGray', hexCode: '#D3D3D3' },
86+
{ colorName: 'LightGrey', hexCode: '#D3D3D3' },
87+
{ colorName: 'LightGreen', hexCode: '#90EE90' },
88+
{ colorName: 'LightPink', hexCode: '#FFB6C1' },
89+
{ colorName: 'LightSalmon', hexCode: '#FFA07A' },
90+
{ colorName: 'LightSeaGreen', hexCode: '#20B2AA' },
91+
{ colorName: 'LightSkyBlue', hexCode: '#87CEFA' },
92+
{ colorName: 'LightSlateGray', hexCode: '#778899' },
93+
{ colorName: 'LightSlateGrey', hexCode: '#778899' },
94+
{ colorName: 'LightSteelBlue', hexCode: '#B0C4DE' },
95+
{ colorName: 'LightYellow', hexCode: '#FFFFE0' },
96+
{ colorName: 'Lime', hexCode: '#00FF00' },
97+
{ colorName: 'LimeGreen', hexCode: '#32CD32' },
98+
{ colorName: 'Linen', hexCode: '#FAF0E6' },
99+
{ colorName: 'Magenta', hexCode: '#FF00FF' },
100+
{ colorName: 'Maroon', hexCode: '#800000' },
101+
{ colorName: 'MediumAquaMarine', hexCode: '#66CDAA' },
102+
{ colorName: 'MediumBlue', hexCode: '#0000CD' },
103+
{ colorName: 'MediumOrchid', hexCode: '#BA55D3' },
104+
{ colorName: 'MediumPurple', hexCode: '#9370D8' },
105+
{ colorName: 'MediumSeaGreen', hexCode: '#3CB371' },
106+
{ colorName: 'MediumSlateBlue', hexCode: '#7B68EE' },
107+
{ colorName: 'MediumSpringGreen', hexCode: '#00FA9A' },
108+
{ colorName: 'MediumTurquoise', hexCode: '#48D1CC' },
109+
{ colorName: 'MediumVioletRed', hexCode: '#C71585' },
110+
{ colorName: 'MidnightBlue', hexCode: '#191970' },
111+
{ colorName: 'MintCream', hexCode: '#F5FFFA' },
112+
{ colorName: 'MistyRose', hexCode: '#FFE4E1' },
113+
{ colorName: 'Moccasin', hexCode: '#FFE4B5' },
114+
{ colorName: 'NavajoWhite', hexCode: '#FFDEAD' },
115+
{ colorName: 'Navy', hexCode: '#000080' },
116+
{ colorName: 'OldLace', hexCode: '#FDF5E6' },
117+
{ colorName: 'Olive', hexCode: '#808000' },
118+
{ colorName: 'OliveDrab', hexCode: '#6B8E23' },
119+
{ colorName: 'Orange', hexCode: '#FFA500' },
120+
{ colorName: 'OrangeRed', hexCode: '#FF4500' },
121+
{ colorName: 'Orchid', hexCode: '#DA70D6' },
122+
{ colorName: 'PaleGoldenRod', hexCode: '#EEE8AA' },
123+
{ colorName: 'PaleGreen', hexCode: '#98FB98' },
124+
{ colorName: 'PaleTurquoise', hexCode: '#AFEEEE' },
125+
{ colorName: 'PaleVioletRed', hexCode: '#D87093' },
126+
{ colorName: 'PapayaWhip', hexCode: '#FFEFD5' },
127+
{ colorName: 'PeachPuff', hexCode: '#FFDAB9' },
128+
{ colorName: 'Peru', hexCode: '#CD853F' },
129+
{ colorName: 'Pink', hexCode: '#FFC0CB' },
130+
{ colorName: 'Plum', hexCode: '#DDA0DD' },
131+
{ colorName: 'PowderBlue', hexCode: '#B0E0E6' },
132+
{ colorName: 'Purple', hexCode: '#800080' },
133+
{ colorName: 'Red', hexCode: '#FF0000' },
134+
{ colorName: 'RosyBrown', hexCode: '#BC8F8F' },
135+
{ colorName: 'RoyalBlue', hexCode: '#4169E1' },
136+
{ colorName: 'SaddleBrown', hexCode: '#8B4513' },
137+
{ colorName: 'Salmon', hexCode: '#FA8072' },
138+
{ colorName: 'SandyBrown', hexCode: '#F4A460' },
139+
{ colorName: 'SeaGreen', hexCode: '#2E8B57' },
140+
{ colorName: 'SeaShell', hexCode: '#FFF5EE' },
141+
{ colorName: 'Sienna', hexCode: '#A0522D' },
142+
{ colorName: 'Silver', hexCode: '#C0C0C0' },
143+
{ colorName: 'SkyBlue', hexCode: '#87CEEB' },
144+
{ colorName: 'SlateBlue', hexCode: '#6A5ACD' },
145+
{ colorName: 'SlateGray', hexCode: '#708090' },
146+
{ colorName: 'SlateGrey', hexCode: '#708090' },
147+
{ colorName: 'Snow', hexCode: '#FFFAFA' },
148+
{ colorName: 'SpringGreen', hexCode: '#00FF7F' },
149+
{ colorName: 'SteelBlue', hexCode: '#4682B4' },
150+
{ colorName: 'Tan', hexCode: '#D2B48C' },
151+
{ colorName: 'Teal', hexCode: '#008080' },
152+
{ colorName: 'Thistle', hexCode: '#D8BFD8' },
153+
{ colorName: 'Tomato', hexCode: '#FF6347' },
154+
{ colorName: 'Turquoise', hexCode: '#40E0D0' },
155+
{ colorName: 'Violet', hexCode: '#EE82EE' },
156+
{ colorName: 'Wheat', hexCode: '#F5DEB3' },
157+
{ colorName: 'White', hexCode: '#FFFFFF' },
158+
{ colorName: 'WhiteSmoke', hexCode: '#F5F5F5' },
159+
{ colorName: 'Yellow', hexCode: '#FFFF00' },
160+
{ colorName: 'YellowGreen', hexCode: '#9ACD' },
161+
];
162+
163+
const AddNewPaletteModal = ({ navigation }) => {
164+
const [name, setName] = useState('');
165+
const [selectedColors, setSelectedColors] = useState([]);
166+
167+
const handleUpdate = useCallback(
168+
(color, newValue) => {
169+
if (newValue === true) {
170+
setSelectedColors(current => [...current, color]);
171+
} else {
172+
setSelectedColors(current =>
173+
current.filter(c => c.colorName !== color.colorName),
174+
);
175+
}
176+
},
177+
[selectedColors, setSelectedColors],
178+
);
179+
180+
const handleSubmit = useCallback(() => {
181+
if (!name) {
182+
Alert.alert('Please add a name to your color palette');
183+
} else if (selectedColors.length < 3) {
184+
Alert.alert('Please choose at least 3 colors');
185+
} else {
186+
navigation.navigate('Home', {
187+
newPalette: { paletteName: name, colors: selectedColors },
188+
});
189+
}
190+
}, [name, selectedColors]);
3191

4-
const AddNewPaletteModal = () => {
5192
return (
6-
<View>
7-
<Text>Hello, world!</Text>
193+
<View style={styles.container}>
194+
<View style={styles.heading}>
195+
<Text>Name of your color palette</Text>
196+
<TextInput style={styles.input} value={name} onChangeText={setName} />
197+
</View>
198+
<FlatList
199+
style={styles.list}
200+
data={COLORS}
201+
keyExtractor={item => item.colorName}
202+
renderItem={({ item }) => (
203+
<View style={styles.switch}>
204+
<Text>{item.colorName}</Text>
205+
<Switch
206+
value={
207+
!!selectedColors.find(
208+
color => color.colorName === item.colorName,
209+
)
210+
}
211+
onValueChange={newValue => handleUpdate(item, newValue)}
212+
/>
213+
</View>
214+
)}
215+
/>
216+
<TouchableOpacity style={styles.buttonWrapper} onPress={handleSubmit}>
217+
<View style={styles.button}>
218+
<Text style={styles.buttonText}>Submit!</Text>
219+
</View>
220+
</TouchableOpacity>
8221
</View>
9222
);
10223
};
11224

225+
const styles = StyleSheet.create({
226+
container: {
227+
backgroundColor: 'white',
228+
flex: 1,
229+
},
230+
input: {
231+
borderWidth: 1,
232+
borderColor: 'grey',
233+
padding: 10,
234+
marginVertical: 10,
235+
borderRadius: 5,
236+
fontSize: 18,
237+
},
238+
switch: {
239+
flexDirection: 'row',
240+
justifyContent: 'space-between',
241+
alignItems: 'center',
242+
padding: 10,
243+
borderBottomColor: 'grey',
244+
borderBottomWidth: 1,
245+
},
246+
list: {
247+
paddingHorizontal: 10,
248+
marginVertical: 10,
249+
},
250+
heading: {
251+
padding: 10,
252+
},
253+
buttonWrapper: {
254+
height: 100,
255+
marginHorizontal: 10,
256+
},
257+
button: {
258+
height: 40,
259+
backgroundColor: 'teal',
260+
borderRadius: 5,
261+
justifyContent: 'center',
262+
alignItems: 'center',
263+
},
264+
buttonText: {
265+
color: 'white',
266+
fontWeight: 'bold',
267+
},
268+
});
269+
12270
export default AddNewPaletteModal;

‎screens/Home.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import PalettePreview from '../components/PalettePreview';
1010

1111
const URL = 'https://color-palette-api.kadikraman.now.sh/palettes';
1212

13-
const Home = ({ navigation }) => {
13+
const Home = ({ navigation, route }) => {
14+
const newPalette = route.params ? route.params.newPalette : null;
1415
const [palettes, setPalettes] = useState([]);
1516
const [isRefreshing, setIsRefreshing] = useState(false);
1617

@@ -34,6 +35,12 @@ const Home = ({ navigation }) => {
3435
}, 1000);
3536
});
3637

38+
useEffect(() => {
39+
if (newPalette) {
40+
setPalettes(current => [newPalette, ...current]);
41+
}
42+
}, [newPalette]);
43+
3744
return (
3845
<>
3946
<TouchableOpacity

0 commit comments

Comments
 (0)