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 1 year ago
parent 45ab6bd7d3
commit da6c25d296
3 changed files with 150 additions and 105 deletions
Show Stats Download Patch File Download Diff File

127
LeftOvers/components/SelectedIngredient.tsx
Unescape View File

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

6
LeftOvers/components/TopBar.tsx
Unescape View File

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

122
LeftOvers/screens/RecipeSuggestion.tsx
Unescape View File

@ -1,46 +1,92 @@
import React from 'react';
import {StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import TopBar from '../components/TopBar';
import React, { useState } from 'react';
import { View, StyleSheet, Text, Image} from 'react-native';
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 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=[]
return (
<SafeAreaProvider>
<TopBar></TopBar>
<View style={styles.page}>
<SelectedIngredient listeIngredient={props.list} imageList={imageList} style={styles.element}></SelectedIngredient>
<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>
const imageList = [];
const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = {
backgroundColor: 'white',
height: 350,
width: 350,
};
const handleChildEvent = (value) => {
setVisible(!visible)
};
</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>
<FoodElementText title="test"></FoodElementText>
<FoodElementText title="test"></FoodElementText>
<FoodElementText title="test"></FoodElementText>
<FoodElementText title="test"></FoodElementText>
</View>
</Modal>
</Portal>
</PaperProvider>
</View>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
page: {
flex: 1,
backgroundColor: '#59BDCD',
alignItems: 'center',
display: "flex",
flexWrap: "wrap",
padding: 20,
},
element: {
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