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 { useState } from "react";
|
||||
import Button from "@components/Button";
|
||||
import Text from "@components/Text";
|
||||
import { colors } from "@components/style";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import DropDownPicker from "react-native-dropdown-picker";
|
||||
/* import DropdownTheme from "@components/DropdownTheme"; */
|
||||
const DropdownTheme = require("@components/DropdownTheme");
|
||||
|
||||
export default function BeerAdd() {
|
||||
const [b_name, setBName] = useState("");
|
||||
@ -16,13 +19,16 @@ export default function BeerAdd() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [value, setValue] = useState(null);
|
||||
const [items, setItems] = useState([
|
||||
{ label: "Can", value: "can" },
|
||||
{ label: "Tank beer", value: "tank" },
|
||||
{ label: "Cask beer", value: "cask" },
|
||||
{ label: "Glass bottle", value: "glass" },
|
||||
{ label: "Oddel barrel", value: "barrel" },
|
||||
{ label: "Tank", value: "tank" },
|
||||
{ label: "PET bottle", value: "PET" },
|
||||
{ label: "Can", value: "can" },
|
||||
{ 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
|
||||
const pickImage = async () => {
|
||||
const permissionResult =
|
||||
@ -96,6 +102,9 @@ export default function BeerAdd() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.form}>
|
||||
<Text style={styles.text}>
|
||||
Spill your thoughts about the beer you just sipped!
|
||||
</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Name"
|
||||
@ -132,20 +141,26 @@ export default function BeerAdd() {
|
||||
setValue={setValue}
|
||||
setItems={setItems}
|
||||
placeholder={"What are you drinking from?"}
|
||||
theme="DARK"
|
||||
theme="DropdownTheme"
|
||||
/>
|
||||
<View style={styles.imageContainer}>
|
||||
<Button
|
||||
style={styles.imageButton}
|
||||
title="Pick an image from gallery"
|
||||
title="Open gallery"
|
||||
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} />}
|
||||
</View>
|
||||
<Button title="Add beer" color={colors.green} onPress={addBeer} />
|
||||
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -162,6 +177,7 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
gap: 15,
|
||||
width: "80%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
@ -172,16 +188,31 @@ const styles = StyleSheet.create({
|
||||
padding: 13,
|
||||
color: "#fff",
|
||||
},
|
||||
imageButton: {
|
||||
width: "100%",
|
||||
backgroundColor: "#FFD700",
|
||||
},
|
||||
imageContainer: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
},
|
||||
imageButton: {
|
||||
backgroundColor: colors.dark,
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
},
|
||||
imageTextButton: {
|
||||
color: colors.white,
|
||||
},
|
||||
image: {
|
||||
width: 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",
|
||||
color = "black",
|
||||
textColor = "white",
|
||||
buttonStyle,
|
||||
textStyle,
|
||||
} = props;
|
||||
return (
|
||||
<Pressable
|
||||
@ -19,10 +21,13 @@ export default function Button(props) {
|
||||
: "black",
|
||||
},
|
||||
styles.button,
|
||||
buttonStyle,
|
||||
]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
|
||||
<Text style={[styles.text, { color: textColor }, textStyle]}>
|
||||
{title}
|
||||
</Text>
|
||||
</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",
|
||||
darkSecondary: "#0D1117",
|
||||
white: "#FFFFFF",
|
||||
placeholder: "#aaaaaa",
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user