Added: custom style for DropDownPicker, added icons for DropDownPicker, in style.js added new color for placeholder; Edited: Component for button, where you can now define background, border, ... by class
This commit is contained in:
parent
114ab257b2
commit
2d06e0fb12
@ -1,9 +1,12 @@
|
|||||||
import { StyleSheet, TextInput, View, Image } from "react-native";
|
import { StyleSheet, TextInput, View, Image } from "react-native";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import Button from "@components/Button";
|
import Button from "@components/Button";
|
||||||
|
import Text from "@components/Text";
|
||||||
import { colors } from "@components/style";
|
import { colors } from "@components/style";
|
||||||
import * as ImagePicker from "expo-image-picker";
|
import * as ImagePicker from "expo-image-picker";
|
||||||
import DropDownPicker from "react-native-dropdown-picker";
|
import DropDownPicker from "react-native-dropdown-picker";
|
||||||
|
/* import DropdownTheme from "@components/DropdownTheme"; */
|
||||||
|
const DropdownTheme = require("@components/DropdownTheme");
|
||||||
|
|
||||||
export default function BeerAdd() {
|
export default function BeerAdd() {
|
||||||
const [b_name, setBName] = useState("");
|
const [b_name, setBName] = useState("");
|
||||||
@ -16,13 +19,16 @@ export default function BeerAdd() {
|
|||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [value, setValue] = useState(null);
|
const [value, setValue] = useState(null);
|
||||||
const [items, setItems] = useState([
|
const [items, setItems] = useState([
|
||||||
{ label: "Can", value: "can" },
|
{ label: "Tank beer", value: "tank" },
|
||||||
|
{ label: "Cask beer", value: "cask" },
|
||||||
{ label: "Glass bottle", value: "glass" },
|
{ label: "Glass bottle", value: "glass" },
|
||||||
{ label: "Oddel barrel", value: "barrel" },
|
{ label: "Can", value: "can" },
|
||||||
{ label: "Tank", value: "tank" },
|
{ label: "PET bottle", value: "pet" },
|
||||||
{ label: "PET bottle", value: "PET" },
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
DropDownPicker.addTheme("DropdownTheme", DropdownTheme);
|
||||||
|
DropDownPicker.setTheme("DropdownTheme");
|
||||||
|
|
||||||
ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
|
ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
|
||||||
const pickImage = async () => {
|
const pickImage = async () => {
|
||||||
const permissionResult =
|
const permissionResult =
|
||||||
@ -96,6 +102,9 @@ export default function BeerAdd() {
|
|||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.form}>
|
<View style={styles.form}>
|
||||||
|
<Text style={styles.text}>
|
||||||
|
Spill your thoughts about the beer you just sipped!
|
||||||
|
</Text>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={styles.input}
|
style={styles.input}
|
||||||
placeholder="Name"
|
placeholder="Name"
|
||||||
@ -132,20 +141,26 @@ export default function BeerAdd() {
|
|||||||
setValue={setValue}
|
setValue={setValue}
|
||||||
setItems={setItems}
|
setItems={setItems}
|
||||||
placeholder={"What are you drinking from?"}
|
placeholder={"What are you drinking from?"}
|
||||||
theme="DARK"
|
theme="DropdownTheme"
|
||||||
/>
|
/>
|
||||||
<View style={styles.imageContainer}>
|
<View style={styles.imageContainer}>
|
||||||
<Button
|
<Button
|
||||||
style={styles.imageButton}
|
title="Open gallery"
|
||||||
title="Pick an image from gallery"
|
|
||||||
onPress={pickImage}
|
onPress={pickImage}
|
||||||
|
buttonStyle={styles.imageButton}
|
||||||
|
textStyle={styles.imageTextButton}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button onPress={openCamera} title="Open camera" />
|
<Button
|
||||||
|
onPress={openCamera}
|
||||||
|
title="Open camera"
|
||||||
|
buttonStyle={styles.imageButton}
|
||||||
|
textStyle={styles.imageTextButton}
|
||||||
|
/>
|
||||||
|
|
||||||
{image && <Image source={{ uri: image }} style={styles.image} />}
|
{image && <Image source={{ uri: image }} style={styles.image} />}
|
||||||
</View>
|
</View>
|
||||||
<Button title="Add beer" color={colors.green} onPress={addBeer} />
|
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
@ -162,6 +177,7 @@ const styles = StyleSheet.create({
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
paddingTop: "10%",
|
paddingTop: "10%",
|
||||||
gap: 15,
|
gap: 15,
|
||||||
|
width: "80%",
|
||||||
},
|
},
|
||||||
input: {
|
input: {
|
||||||
height: "auto",
|
height: "auto",
|
||||||
@ -172,16 +188,31 @@ const styles = StyleSheet.create({
|
|||||||
padding: 13,
|
padding: 13,
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
imageButton: {
|
|
||||||
width: "100%",
|
|
||||||
backgroundColor: "#FFD700",
|
|
||||||
},
|
|
||||||
imageContainer: {
|
imageContainer: {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 10,
|
||||||
|
},
|
||||||
|
imageButton: {
|
||||||
|
backgroundColor: colors.dark,
|
||||||
|
borderColor: "gray",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
imageTextButton: {
|
||||||
|
color: colors.white,
|
||||||
},
|
},
|
||||||
image: {
|
image: {
|
||||||
width: 150,
|
width: 150,
|
||||||
height: 150,
|
height: 150,
|
||||||
},
|
},
|
||||||
|
text: {
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 24,
|
||||||
|
textAlign: "center",
|
||||||
|
paddingTop: "3%",
|
||||||
|
paddingBottom: "3%",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
BIN
frontend/assets/DropdownIcons/arrow-down.png
Normal file
BIN
frontend/assets/DropdownIcons/arrow-down.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 522 B |
BIN
frontend/assets/DropdownIcons/arrow-up.png
Normal file
BIN
frontend/assets/DropdownIcons/arrow-up.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 807 B |
BIN
frontend/assets/DropdownIcons/close.png
Normal file
BIN
frontend/assets/DropdownIcons/close.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 338 B |
BIN
frontend/assets/DropdownIcons/tick.png
Normal file
BIN
frontend/assets/DropdownIcons/tick.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
@ -7,6 +7,8 @@ export default function Button(props) {
|
|||||||
title = "Button",
|
title = "Button",
|
||||||
color = "black",
|
color = "black",
|
||||||
textColor = "white",
|
textColor = "white",
|
||||||
|
buttonStyle,
|
||||||
|
textStyle,
|
||||||
} = props;
|
} = props;
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
@ -19,10 +21,13 @@ export default function Button(props) {
|
|||||||
: "black",
|
: "black",
|
||||||
},
|
},
|
||||||
styles.button,
|
styles.button,
|
||||||
|
buttonStyle,
|
||||||
]}
|
]}
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
>
|
>
|
||||||
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
|
<Text style={[styles.text, { color: textColor }, textStyle]}>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
170
frontend/components/DropdownTheme.js
Normal file
170
frontend/components/DropdownTheme.js
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
import { StyleSheet } from "react-native";
|
||||||
|
|
||||||
|
import { colors } from "@components/style";
|
||||||
|
|
||||||
|
export const ICONS = {
|
||||||
|
ARROW_DOWN: require("@assets/DropdownIcons/arrow-down.png"),
|
||||||
|
ARROW_UP: require("@assets/DropdownIcons/arrow-up.png"),
|
||||||
|
TICK: require("@assets/DropdownIcons/tick.png"),
|
||||||
|
CLOSE: require("../assets/DropdownIcons/close.png"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
width: "100%",
|
||||||
|
minHeight: 50,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "gray",
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 3,
|
||||||
|
backgroundColor: colors.dark,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
flex: 1,
|
||||||
|
color: colors.placeholder,
|
||||||
|
},
|
||||||
|
labelContainer: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
},
|
||||||
|
arrowIcon: {
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
},
|
||||||
|
tickIcon: {
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
},
|
||||||
|
badgeStyle: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
borderRadius: 15,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 5,
|
||||||
|
},
|
||||||
|
badgeDotStyle: {
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
borderRadius: 10 / 2,
|
||||||
|
marginRight: 8,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
},
|
||||||
|
badgeSeparator: {
|
||||||
|
width: 5,
|
||||||
|
},
|
||||||
|
listBody: {
|
||||||
|
height: "100%",
|
||||||
|
},
|
||||||
|
listBodyContainer: {
|
||||||
|
flexGrow: 1,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
dropDownContainer: {
|
||||||
|
position: "absolute",
|
||||||
|
backgroundColor: colors.darkSecondary,
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: colors.black,
|
||||||
|
borderWidth: 1,
|
||||||
|
width: "100%",
|
||||||
|
overflow: "hidden",
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
|
modalContentContainer: {
|
||||||
|
flexGrow: 1,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
},
|
||||||
|
listItemContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
listItemLabel: {
|
||||||
|
flex: 1,
|
||||||
|
color: colors.placeholder,
|
||||||
|
},
|
||||||
|
iconContainer: {
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
arrowIconContainer: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
tickIconContainer: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
closeIconContainer: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
listParentLabel: {},
|
||||||
|
listChildLabel: {},
|
||||||
|
listParentContainer: {},
|
||||||
|
listChildContainer: {
|
||||||
|
paddingLeft: 40,
|
||||||
|
},
|
||||||
|
searchContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: 10,
|
||||||
|
borderBottomColor: colors.darkSecondary,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
searchTextInput: {
|
||||||
|
flexGrow: 1,
|
||||||
|
flexShrink: 1,
|
||||||
|
margin: 0,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 5,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderColor: colors.darkSecondary,
|
||||||
|
borderWidth: 1,
|
||||||
|
color: colors.white,
|
||||||
|
},
|
||||||
|
itemSeparator: {
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: colors.darkSecondary,
|
||||||
|
},
|
||||||
|
flatListContentContainer: {
|
||||||
|
flexGrow: 1,
|
||||||
|
},
|
||||||
|
customItemContainer: {},
|
||||||
|
customItemLabel: {
|
||||||
|
fontStyle: "italic",
|
||||||
|
},
|
||||||
|
listMessageContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
listMessageText: {
|
||||||
|
color: colors.gold,
|
||||||
|
},
|
||||||
|
selectedItemContainer: {},
|
||||||
|
selectedItemLabel: {},
|
||||||
|
modalTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
color: colors.gold,
|
||||||
|
},
|
||||||
|
extendableBadgeContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
extendableBadgeItemContainer: {
|
||||||
|
marginVertical: 3,
|
||||||
|
marginEnd: 7,
|
||||||
|
},
|
||||||
|
});
|
@ -8,4 +8,5 @@ export const colors = {
|
|||||||
dark: "#010409",
|
dark: "#010409",
|
||||||
darkSecondary: "#0D1117",
|
darkSecondary: "#0D1117",
|
||||||
white: "#FFFFFF",
|
white: "#FFFFFF",
|
||||||
|
placeholder: "#aaaaaa",
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user