Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Ingredients selection page
continuous-integration/drone/push Build is passing Details

Browse Source
pull/23/head
Rémi REGNAULT 2 years ago
parent 510aaf525e
commit 989f2c2813
1 changed files with 101 additions and 98 deletions
Show Stats Download Patch File Download Diff File

199
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -14,114 +14,117 @@ import fruit from '../assets/images/fruit_icon.png';
export default function IngredientSelection(props) { export default function IngredientSelection(props) {
const [searchQuery, setSearchQuery] = React.useState('');
const [searchQuery, setSearchQuery] = React.useState(''); const onChangeSearch = query => setSearchQuery(query);
const onChangeSearch = query => setSearchQuery(query); type ItemProps = {value: string}
type ItemProps = {value: string} const AvailaibleItem = ({value}: ItemProps) => (
<>
const AvailaibleItem = ({value}: ItemProps) => ( <View style={styles.horizontalAlignement}>
<><View style={styles.horizontalAlignement}> <FoodElementText title={value} />
<FoodElementText title={value} />
<Pressable>
<Image source={plus} style={{ width: 20, height: 20 }} />
</Pressable>
</View><View style={{ height: 30 }}></View></>
)
const ChooseItem = ({value}: ItemProps) => (
<><View style={styles.horizontalAlignement}>
<FoodElementText title={value} />
<Pressable>
<Image source={moins} style={{ width: 20, height: 20 }} />
</Pressable>
</View><View style={{ height: 30 }}></View></>
)
return (
<SafeAreaProvider>
<View style={styles.page}>
<View style={styles.element}>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
<Pressable>
<Image source={meat} style={{ width: 30, height: 30 }} />
</Pressable>
<Pressable> <Pressable>
<Image source={vegetable} style={{ width: 30, height: 30 }} /> <Image source={plus} style={{ width: 20, height: 20 }} />
</Pressable> </Pressable>
</View><View style={{ height: 30 }}></View>
</>
)
const ChooseItem = ({value}: ItemProps) => (
<>
<View style={styles.horizontalAlignement}>
<FoodElementText title={value} />
<Pressable> <Pressable>
<Image source={fruit} style={{ width: 30, height: 30 }} /> <Image source={moins} style={{ width: 20, height: 20 }} />
</Pressable> </Pressable>
</View> </View><View style={{ height: 30 }}></View>
<View> </>
<Searchbar )
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery} const styles = StyleSheet.create({
style={{margin: 10, page: {
backgroundColor: '#F2F0E4', flex: 1,
borderWidth : 1, backgroundColor: '#59BDCD',
borderColor: "#ACA279", alignItems: 'center',
borderRadius: 15, display: 'flex',
height: 50, flexWrap: 'wrap',
}}/> padding: 20,
</View> },
<View style={{ flex: 1}} > element: {
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}> backgroundColor:'#F2F0E4',
{props.listIngredient.map((source, index) => ( borderRadius: 30,
<AvailaibleItem key={index} value={source}></AvailaibleItem> },
))} horizontalAlignement: {
</ScrollView> display: 'flex',
</View> height: 30,
<View style={{ height: 20 }}></View> width: 350,
</View> flexDirection: 'row',
justifyContent: 'space-around',
<View style={[styles.element, {marginTop: 40}]}> alignItems: 'center',
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}> marginTop: 15,
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text> }
});
return (
<SafeAreaProvider>
<View style={styles.page}>
<View style={styles.element}>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
<Pressable>
<Image source={meat} style={{ width: 30, height: 30 }} />
</Pressable>
<Pressable>
<Image source={vegetable} style={{ width: 30, height: 30 }} />
</Pressable>
<Pressable>
<Image source={fruit} style={{ width: 30, height: 30 }} />
</Pressable>
</View>
<View>
<Searchbar
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery}
style={{margin: 10,
backgroundColor: '#F2F0E4',
borderWidth : 1,
borderColor: "#ACA279",
borderRadius: 15,
height: 50,
}}/>
</View>
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
{props.listIngredient.map((source, index) => (
<AvailaibleItem key={index} value={source}></AvailaibleItem>
))}
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View> </View>
<View style={{ height: 5 }}></View> <View style={[styles.element, {marginTop: 40}]}>
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
</View>
<View style={{ height: 5 }}></View>
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
{props.listIngredient.map((source, index) => (
<ChooseItem key={index} value={source}></ChooseItem>
))}
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View>
<View style={{ flex: 1}} > <View style={{ height: 15 }}></View>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}> <CustomButton title="Find a recipe" />
{props.listIngredient.map((source, index) => (
<ChooseItem key={index} value={source}></ChooseItem>
))}
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View> </View>
<View style={{ height: 15 }}></View>
<CustomButton title="Find a recipe"/>
</View>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
const styles = StyleSheet.create({
page: {
flex: 1,
backgroundColor: '#59BDCD',
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
padding: 20,
},
element: {
backgroundColor:'#F2F0E4',
borderRadius: 30,
},
horizontalAlignement: {
display: 'flex',
height: 30,
width: 350,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
marginTop: 15,
}
});

Write Preview
Loading…
Cancel
Save