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

Profile Component

Browse Source
pull/9/head
Louison PARANT 1 year ago
parent cffe1126bb
commit 8f79508a11
11 changed files with 250 additions and 23 deletions
Show Stats Download Patch File Download Diff File

32
LeftOvers/App.tsx
Unescape View File

@ -2,17 +2,18 @@ import React from 'react';
import {StyleSheet, View } from 'react-native';
import ProfileModification from './components/ProfileModification';
import ValidateButton from './components/ValidateButton';
import { LinearGradient } from 'expo-linear-gradient';
export default function App() {
const all = [{title: "Mussels"}, {title: "Skimmed Milk"}, {title: "Nuts"}]
const die = [{title: "Dairy free"}, {title: "Gluten free"}, {title: "Porkless"}, {title: "Vegan"}, {title: "Vegetarian"}, {title: "Pescatarian"}]
const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
return (
<View style={styles.container}>
<View style={styles.background}>
<ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
<View style={{marginTop: 10}}/>
<ValidateButton title="Update Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</View>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
<View style={{marginTop: 10}}/>
<ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</LinearGradient>
</View>
);
}
@ -24,11 +25,14 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
background: {
height: 844,
width: 390,
backgroundColor: "linear-gradient(#59BDCD, #59BDCD)",
alignItems: 'center',
justifyContent: 'flex-start',
}
linearGradient: {
//height: 844,
//width: 390,
flex: 1,
padding: 10,
paddingTop: 0,
//backgroundColor: "#59BDCD",
//alignItems: 'center',
//justifyContent: 'flex-start',
},
});

BIN
LeftOvers/assets/images/plus.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
LeftOvers/assets/images/plus_small.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
LeftOvers/assets/images/update.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

102
LeftOvers/components/AllergiesTab.tsx
Unescape View File

@ -0,0 +1,102 @@
import React from 'react';
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
import ValidateButton from './ValidateButton';
import HeaderFlatList from './HeaderFlatList';
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
type AllergiesProps = {
title: string
content : list<string>
}
export default function AllergiesTab(props: AllergiesProps) {
const [selected, setSelected] = React.useState([]);
const data = [
{key:'1', value:'Dairy free'},
{key:'2', value:'Gluten free'},
{key:'3', value:'Porkless'},
{key:'4', value:'Vegan'},
{key:'5', value:'Vegetatian'},
{key:'6', value:'Pescatarian'},
]
return (
<MultipleSelectList
data={props.content}
save="value"
search={false}
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
boxStyles={styles.titleBar}
inputStyles={styles.title}
dropdownStyles={styles.itemList}
dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText}
checkBoxStyles={styles.box}
placeholder={props.title}
label={props.title}/>
);
}
const styles = StyleSheet.create({
titleBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "stretch",
minHeight: 25,
backgroundColor: "#F2F0E4",
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
borderWidth: 2,
borderColor: "#ACA279",
width: 330,
marginBottom: 0,
overflow: "hidden",
},
arrow: {
height: 20,
width: 20,
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.1,
},
title: {
fontSize: 15,
color: '#3F3C42',
alignItems: 'center',
textAlign: "left",
flex: 0.9,
},
itemList: {
//flexDirection: "row",
alignItems: "flex-start",
//justifyContent: "stretch",
borderWidth: 0,
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
backgroundColor: "#E3DEC9",
width: 330,
},
itemCell: {
maxHeight: 30,
flex: 1,
padding: 0,
paddingLeft: 10,
},
itemText: {
fontSize: 13,
textAlign: "left",
flex: 1,
padding: 5,
paddingLeft: 10,
color: "#3F3C42",
},
box: {
borderWidth: 0,
flex: 0,
}
});

97
LeftOvers/components/DietsTab.tsx
Unescape View File

@ -0,0 +1,97 @@
import React from 'react';
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
import ValidateButton from './ValidateButton';
import HeaderFlatList from './HeaderFlatList';
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
type DietsProps = {
title: string
content : list<string>
}
export default function DietsTab(props: DietsProps) {
const [selected, setSelected] = React.useState([]);
const data = [
{key:'1', value:'Dairy free'},
{key:'2', value:'Gluten free'},
{key:'3', value:'Porkless'},
{key:'4', value:'Vegan'},
{key:'5', value:'Vegetatian'},
{key:'6', value:'Pescatarian'},
]
return (
<MultipleSelectList
setSelected={(val) => setSelected(val)}
data={props.content}
save="value"
search={false}
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
boxStyles={styles.titleBar}
inputStyles={styles.title}
dropdownStyles={styles.itemList}
dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText}
placeholder={props.title}
label={props.title}/>
);
}
const styles = StyleSheet.create({
titleBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "stretch",
minHeight: 25,
backgroundColor: "#F2F0E4",
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
borderWidth: 2,
borderColor: "#ACA279",
width: 330,
marginBottom: 0,
overflow: "hidden",
},
arrow: {
height: 20,
width: 20,
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.1,
},
title: {
fontSize: 15,
color: '#3F3C42',
alignItems: 'center',
textAlign: "left",
flex: 0.9,
},
itemList: {
//flexDirection: "row",
alignItems: "flex-start",
//justifyContent: "stretch",
borderWidth: 0,
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
backgroundColor: "#E3DEC9",
width: 330,
},
itemCell: {
maxHeight: 30,
flex: 1,
padding: 0,
paddingLeft: 10,
},
itemText: {
fontSize: 13,
textAlign: "left",
flex: 1,
padding: 5,
paddingLeft: 10,
color: "#3F3C42",
},
});

8
LeftOvers/components/ListTab.tsx
Unescape View File

@ -8,11 +8,11 @@ type ListProps = {
content : list<string>
}
type ItemProps = {title: string}
type ItemProps = {value: string}
const Item = ({title}: ItemProps) => (
const Item = ({value}: ItemProps) => (
<View style={styles.itemList}>
<Text style={styles.itemText}>{title}</Text>
<Text style={styles.itemText}>{value}</Text>
</View>
)
@ -20,7 +20,7 @@ export default function ListTab(props: ListProps) {
return (
<View style={styles.background}>
<View>
<FlatList data={props.content} renderItem={({item}) => <Item title={item.title}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
<FlatList data={props.content} renderItem={({item}) => <Item value={item.value}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
</View>
</View>
);

9
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -2,6 +2,8 @@ import React from 'react';
import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
import ValidateButton from './ValidateButton';
import ListTab from './ListTab';
import DietsTab from './DietsTab';
import AllergiesTab from './AllergiesTab';
type ProfileProps = {
name: string
@ -22,6 +24,10 @@ export default function ProfileModification(props: ProfileProps) {
<Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text>
</View>
<DietsTab title="Diets" content={props.diets}></DietsTab>
<View style={{marginTop: 10}}/>
<AllergiesTab title="Allergies" content={props.allergies}></AllergiesTab>
<View style={{marginTop: 10}}/>
<ListTab title="Diets" content={props.diets}></ListTab>
<ListTab title="Allergies" content={props.allergies}></ListTab>
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
@ -48,8 +54,7 @@ const styles = StyleSheet.create({
marginBottom: 10,
},
avatar: {
height: 45,
width: 45,
padding: 20,
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",

6
LeftOvers/components/ValidateButton.tsx
Unescape View File

@ -25,8 +25,10 @@ export default function ValidateButton(props: ValidateButtonProps) {
padding: 5,
paddingRight: 10,}}>
<Image source={require('../assets/images/'+props.image)} style={{
height: 30,
width: 30,
height: 20,
width: 20,
marginLeft: 5,
marginRight: 10,
resizeMode: "center",
tintColor: props.colour,}}>
</Image>

15
LeftOvers/package-lock.json generated
Unescape View File

@ -11,11 +11,13 @@
"@expo/webpack-config": "^19.0.0",
"@types/react": "~18.2.14",
"expo": "~49.0.15",
"expo-linear-gradient": "~12.3.0",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.6",
"react-native-dropdown-select-list": "^2.0.5",
"react-native-splash-screen": "^3.3.0",
"react-native-web": "~0.19.6",
"typescript": "^5.1.3"
@ -9049,6 +9051,14 @@
"expo": "*"
}
},
"node_modules/expo-linear-gradient": {
"version": "12.3.0",
"resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.3.0.tgz",
"integrity": "sha512-f9e+Oxe5z7fNQarTBZXilMyswlkbYWQHONVfq8MqmiEnW3h9XsxxmVJLG8uVQSQPUsbW+x1UUT/tnU6mkMWeLg==",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-modules-autolinking": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.5.1.tgz",
@ -14790,6 +14800,11 @@
"react": "18.2.0"
}
},
"node_modules/react-native-dropdown-select-list": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
"integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
},
"node_modules/react-native-splash-screen": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",

2
LeftOvers/package.json
Unescape View File

@ -12,11 +12,13 @@
"@expo/webpack-config": "^19.0.0",
"@types/react": "~18.2.14",
"expo": "~49.0.15",
"expo-linear-gradient": "~12.3.0",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.6",
"react-native-dropdown-select-list": "^2.0.5",
"react-native-splash-screen": "^3.3.0",
"react-native-web": "~0.19.6",
"typescript": "^5.1.3"

Write Preview
Loading…
Cancel
Save