commit
1141d4576a
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 410 B |
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Appbar } from 'react-native-paper';
|
||||||
|
|
||||||
|
interface TopBarProps{
|
||||||
|
source : string
|
||||||
|
firstImage : string
|
||||||
|
lastImage : string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function ParameterTopBar(props : any) {
|
||||||
|
|
||||||
|
const goFilter = () =>{
|
||||||
|
props.onEventFilter('Hello');
|
||||||
|
}
|
||||||
|
|
||||||
|
const goIngredients = () =>{
|
||||||
|
props.onEventIngredient('Hello');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Appbar.Header style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} >
|
||||||
|
<Appbar.Action icon="magnify" onPress={goIngredients} />
|
||||||
|
<Appbar.Action icon="dots-vertical" onPress={goFilter} />
|
||||||
|
</Appbar.Header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
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[];
|
||||||
|
onEvent: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const increaseCounter = () => {
|
||||||
|
if (cpt < props.listeIngredient.length - 1) {
|
||||||
|
setCpt(cpt + 1);
|
||||||
|
} else {
|
||||||
|
setCpt(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePress = () => {
|
||||||
|
props.onEvent('Hello');
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
<View id="IngredientList" style={styles.horizontalAlignement}>
|
||||||
|
<Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
|
||||||
|
<Image source={bracketLeft} style={{ width: 40, height: 40 }} />
|
||||||
|
</Pressable>
|
||||||
|
|
||||||
|
<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: 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',
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Appbar } from 'react-native-paper';
|
||||||
|
|
||||||
|
interface TopBarProps{
|
||||||
|
source : string
|
||||||
|
firstImage : string
|
||||||
|
lastImage : string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function TopBar(props : any) {
|
||||||
|
|
||||||
|
const _goBack = () => console.log('Went back');
|
||||||
|
|
||||||
|
const _handleSearch = () => console.log('Searching');
|
||||||
|
|
||||||
|
const _handleMore = () => console.log('Shown more');
|
||||||
|
return (
|
||||||
|
<Appbar.Header style={{backgroundColor: '#F2F0E4'}} >
|
||||||
|
<Appbar.BackAction onPress={_goBack} />
|
||||||
|
<Appbar.Content title="Recipes" />
|
||||||
|
<Appbar.Action icon="magnify" onPress={_handleSearch} />
|
||||||
|
<Appbar.Action icon="dots-vertical" onPress={_handleMore} />
|
||||||
|
</Appbar.Header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 410 B |
@ -0,0 +1,156 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, StyleSheet, Text, Image, Pressable} from 'react-native';
|
||||||
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||||
|
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';
|
||||||
|
import ParameterTopBar from '../components/ParameterTopBar';
|
||||||
|
import bracketLeft from '../assets/images/angle_bracket_left.png';
|
||||||
|
import bracketRight from '../assets/images/angle_bracket_right.png';
|
||||||
|
|
||||||
|
|
||||||
|
export default function RecipeSuggestion(props) {
|
||||||
|
|
||||||
|
const imageList = [];
|
||||||
|
const [visible, setVisible] = React.useState(false);
|
||||||
|
const [visibleFilters, setVisibleFilters] = React.useState(false);
|
||||||
|
const [visibleIngredients, setVisibleIngredients] = React.useState(true);
|
||||||
|
const [minCpt, setMinCpt] = useState(0);
|
||||||
|
const [maxCpt, setMaxCpt] = useState(4);
|
||||||
|
const listeIngredient = props.list;
|
||||||
|
const limitedList = listeIngredient.slice(minCpt, maxCpt);
|
||||||
|
const showModal = () => setVisible(true);
|
||||||
|
const hideModal = () => setVisible(false);
|
||||||
|
const containerStyle = {
|
||||||
|
backgroundColor: 'white',
|
||||||
|
height: 400,
|
||||||
|
width: 380,
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChildEvent = (value) => {
|
||||||
|
setVisible(!visible)
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChildEventGoFilters = (value) => {
|
||||||
|
setVisibleIngredients(false);
|
||||||
|
setVisibleFilters(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChildEventGoIngredients = (value) => {
|
||||||
|
setVisibleFilters(false);
|
||||||
|
setVisibleIngredients(true);
|
||||||
|
console.log("jai change pour iingredient");
|
||||||
|
}
|
||||||
|
|
||||||
|
const decreaseCounter = () => {
|
||||||
|
if (minCpt > 0) {
|
||||||
|
setMinCpt(minCpt - 4);
|
||||||
|
setMaxCpt(maxCpt - 4)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const increaseCounter = () => {
|
||||||
|
if (maxCpt < listeIngredient.length) {
|
||||||
|
setMinCpt(minCpt + 4);
|
||||||
|
setMaxCpt(maxCpt + 4)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageElements = limitedList.map((source, index) => (
|
||||||
|
<View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
|
||||||
|
<FoodElementText key={index} title={source} />
|
||||||
|
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
||||||
|
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
||||||
|
</View>
|
||||||
|
));
|
||||||
|
|
||||||
|
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}>
|
||||||
|
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
|
||||||
|
|
||||||
|
{visibleIngredients && (
|
||||||
|
<View style={[styles.page, { justifyContent: 'space-between' }]}>
|
||||||
|
{imageElements}
|
||||||
|
<View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
|
||||||
|
<Pressable onPress={decreaseCounter} id="GoLeft" >
|
||||||
|
<Image source={bracketLeft} style={{ width: 20, height: 20 }} />
|
||||||
|
</Pressable>
|
||||||
|
|
||||||
|
<Pressable onPress={increaseCounter} id="GoRight">
|
||||||
|
<Image source={bracketRight} style={{ width: 20, height: 20 }} />
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{visibleFilters &&(
|
||||||
|
<View style={[styles.page, { justifyContent: 'space-between'}]}>
|
||||||
|
<Text>HEHEHEHEHEHEHE</Text>
|
||||||
|
</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,
|
||||||
|
},
|
||||||
|
backdrop: {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
modal :{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%', // Centre verticalement
|
||||||
|
left: '50%', // Centre horizontalement
|
||||||
|
transform: [{ translateX: -185 }, { translateY: -120 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
|
||||||
|
},
|
||||||
|
horizontalAlignement: {
|
||||||
|
display: 'flex',
|
||||||
|
height: 30,
|
||||||
|
width: 350,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-around',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginTop: 10,
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in new issue