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