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

add modal

Browse Source
pull/8/head
Rayhân HASSOU 2 years ago
parent 45ab6bd7d3
commit da6c25d296
3 changed files with 150 additions and 105 deletions
Show Stats Download Patch File Download Diff File

125
LeftOvers/components/SelectedIngredient.tsx
Unescape View File

@ -1,89 +1,90 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; import { View, StyleSheet, Pressable, Image, Text } from 'react-native';
import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketLeft from '../assets/images/angle_bracket_left.png';
import bracketRight from '../assets/images/angle_bracket_right.png'; import bracketRight from '../assets/images/angle_bracket_right.png';
import parameter from '../assets/images/parameter.png'; import parameter from '../assets/images/parameter.png';
import FoodElementText from './FoodElementText'; import FoodElementText from './FoodElementText';
interface selectedIngredientProps { interface SelectedIngredientProps {
listeIngredient : string[] listeIngredient: string[];
listeImage : string[] listeImage: string[];
onEvent: (value: string) => void;
} }
export default function SelectedIngredient(props : any) { export default function SelectedIngredient(props: SelectedIngredientProps) {
const [cpt, setCpt] = useState(0);
const [cpt, setCpt] = useState(0);
const decreaseCounter = () => { const decreaseCounter = () => {
if (cpt > 0) { if (cpt > 0) {
setCpt(cpt - 1); setCpt(cpt - 1);
} } else {
else{ setCpt(props.listeIngredient.length - 1);
setCpt( props.listeIngredient.length - 1);
} }
}; };
const increaseCounter = () => { const increaseCounter = () => {
if (cpt < props.listeIngredient.length - 1) { if (cpt < props.listeIngredient.length - 1) {
setCpt(cpt + 1); setCpt(cpt + 1);
}else{ } else {
setCpt(0); setCpt(0);
} }
}; };
return ( const handlePress = () => {
<View style={styles.view}> // Supposons que vous voulez envoyer la valeur 'Hello' au parent
<View id="Top" style={styles.horizontalAlignement}> props.onEvent('Hello');
<Text style={styles.text}>Selected ingredients</Text> };
<Pressable>
<Image source={parameter} style={{ width: 15, height: 15 }} /> return (
</Pressable> <View style={styles.view}>
</View> <View id="Top" style={styles.horizontalAlignement}>
<Text style={styles.text}>Selected ingredients</Text>
<Pressable onPress={handlePress}>
<Image source={parameter} style={{ width: 15, height: 15 }} />
</Pressable>
</View>
<View id="IngredientList" style={styles.horizontalAlignement}> <View id="IngredientList" style={styles.horizontalAlignement}>
<Pressable onPress={decreaseCounter} id="GoLeft" style={{}}> <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
<Image source={bracketLeft} style={{ width: 40, height: 40 }} /> <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
</Pressable> </Pressable>
<FoodElementText title={props.listeIngredient[cpt]} /> <FoodElementText title={props.listeIngredient[cpt]} />
<Pressable onPress={increaseCounter} id="GoRight" style={{}}> <Pressable onPress={increaseCounter} id="GoRight" style={{}}>
<Image source={bracketRight} style={{ width: 40, height: 40 }} /> <Image source={bracketRight} style={{ width: 40, height: 40 }} />
</Pressable> </Pressable>
</View>
</View> </View>
); </View>
);
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
view: { view: {
width : 350, width: 350,
height: 110, height: 110,
borderRadius: 15, borderRadius: 15,
elevation: 3, elevation: 3,
borderWidth: 2, borderWidth: 1,
borderColor: 'black', borderColor: 'black',
display: "flex", display: 'flex',
flexWrap: "wrap", flexWrap: 'wrap',
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',
}, },
horizontalAlignement: { horizontalAlignement: {
display: "flex", display: 'flex',
height : 30, height: 30,
width: 350, width: 350,
flexDirection : 'row', flexDirection: 'row',
justifyContent : 'space-around', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
marginTop: 10, marginTop: 10,
}, },
text: { text: {
fontSize: 14, fontSize: 14,
lineHeight: 21, lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25, letterSpacing: 0.25,
color: 'black', color: 'black',
} },
}); });

6
LeftOvers/components/TopBar.tsx
Unescape View File

@ -1,7 +1,5 @@
import React, { startTransition } from 'react'; import React from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
import { Appbar } from 'react-native-paper'; import { Appbar } from 'react-native-paper';
import backward from '../assets/images/backward_arrows.png';
interface TopBarProps{ interface TopBarProps{
source : string source : string
@ -20,7 +18,7 @@ interface TopBarProps{
return ( return (
<Appbar.Header style={{backgroundColor: '#F2F0E4'}} > <Appbar.Header style={{backgroundColor: '#F2F0E4'}} >
<Appbar.BackAction onPress={_goBack} /> <Appbar.BackAction onPress={_goBack} />
<Appbar.Content title="Title" /> <Appbar.Content title="Recipes" />
<Appbar.Action icon="magnify" onPress={_handleSearch} /> <Appbar.Action icon="magnify" onPress={_handleSearch} />
<Appbar.Action icon="dots-vertical" onPress={_handleMore} /> <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
</Appbar.Header> </Appbar.Header>

120
LeftOvers/screens/RecipeSuggestion.tsx
Unescape View File

@ -1,46 +1,92 @@
import React from 'react'; import React, { useState } from 'react';
import {StyleSheet, View} from 'react-native'; import { View, StyleSheet, Text, Image} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import TopBar from '../components/TopBar';
import { SafeAreaProvider } from 'react-native-safe-area-context'; import { SafeAreaProvider } from 'react-native-safe-area-context';
import SelectedIngredient from '../components/SelectedIngredient'; import { Modal, Portal, PaperProvider } from 'react-native-paper';
import TopBar from '../components/TopBar';
import RecipeElement from '../components/RecipeElement'; import RecipeElement from '../components/RecipeElement';
import SelectedIngredient from '../components/SelectedIngredient';
import FoodElementText from '../components/FoodElementText';
import brochette from '../assets/images/brochette.png';
interface RecipeSuggestionProps{
source : string
firstImage : string
lastImage : string
}
export default function RecipeSuggestion(props : any) { export default function RecipeSuggestion(props) {
const imageList=[] const imageList = [];
return ( const [visible, setVisible] = React.useState(false);
<SafeAreaProvider> const showModal = () => setVisible(true);
<TopBar></TopBar> const hideModal = () => setVisible(false);
const containerStyle = {
backgroundColor: 'white',
height: 350,
width: 350,
};
<View style={styles.page}> const handleChildEvent = (value) => {
<SelectedIngredient listeIngredient={props.list} imageList={imageList} style={styles.element}></SelectedIngredient> setVisible(!visible)
<View style={{marginTop: 100}}> };
<RecipeElement number="13" title="Pizza with Pineaples" imageList={imageList} textList={props.list} description="delicious plate that will please you" style={styles.element}></RecipeElement>
</View>
</View>
</SafeAreaProvider> return (
); <SafeAreaProvider>
} <TopBar />
<View style={styles.page}>
<SelectedIngredient
listeIngredient={props.list}
listeImage={imageList}
onEvent={handleChildEvent}
/>
<View style={{ marginTop: 100 }}>
<RecipeElement
number="13"
title="Pizza with Pineapples"
imageList={imageList}
textList={props.list}
description="delicious plate that will please you"
style={styles.element}
/>
</View>
</View>
<View style={styles.modal}>
<PaperProvider>
<Portal>
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
<View style={styles.page}>
<View>
<FoodElementText title="test"></FoodElementText>
<Image source={brochette} style={{ width: 10, height: 10 }}/>
</View>
const styles = StyleSheet.create({ <FoodElementText title="test"></FoodElementText>
page: { <FoodElementText title="test"></FoodElementText>
flex: 1, <FoodElementText title="test"></FoodElementText>
backgroundColor: '#59BDCD', <FoodElementText title="test"></FoodElementText>
alignItems: 'center', </View>
display: "flex", </Modal>
flexWrap: "wrap", </Portal>
padding: 20, </PaperProvider>
}, </View>
element: { </SafeAreaProvider>
marginTop: 20, );
} }
});
const styles = StyleSheet.create({
page: {
flex: 1,
backgroundColor: '#59BDCD',
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
padding: 20,
},
element: {
marginTop: 20,
},
backdrop: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modal :{
position: 'absolute',
top: '50%', // Centre verticalement
left: '50%', // Centre horizontalement
transform: [{ translateX: -150 }, { translateY: -150 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
}
});

Write Preview
Loading…
Cancel
Save