88 lines
No EOL
2.7 KiB
TypeScript
88 lines
No EOL
2.7 KiB
TypeScript
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
|
|
import { useTheme } from "../../app/contexts/ThemeContext";
|
|
import TextInputBar from "../common/TextInputBar";
|
|
|
|
type BudgetHeaderProperties = {
|
|
selectedPage: string,
|
|
handlePageSelection: (page: string) => void,
|
|
}
|
|
|
|
type PageSelectorButtonProperties = {
|
|
isSelected: boolean,
|
|
onPress: () => void,
|
|
label: string,
|
|
}
|
|
|
|
const BudgetHeader = (properties: BudgetHeaderProperties) => {
|
|
const {colors} = useTheme();
|
|
const backgroundColor = colors.backgroundColor;
|
|
|
|
return (<>
|
|
<View style={styles.containerStyle}>
|
|
<PageSelectorButton
|
|
label="Expenses"
|
|
isSelected={properties.selectedPage === "expenses"}
|
|
onPress={() => {
|
|
properties.handlePageSelection("expenses")
|
|
}}
|
|
/>
|
|
<PageSelectorButton
|
|
label="Savings"
|
|
isSelected={properties.selectedPage === "savings"}
|
|
onPress={() => {
|
|
properties.handlePageSelection("savings");
|
|
}}
|
|
/>
|
|
</View>
|
|
<TextInputBar style={styles.searchBarStyle} placeholder='Search...'></TextInputBar>
|
|
</>);
|
|
}
|
|
|
|
const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
|
|
const {colors} = useTheme();
|
|
|
|
const primaryTextColor = colors.primaryText;
|
|
const secondaryTextColor = colors.secondaryText;
|
|
const elementSelectedColor = colors.elementSelectedColor;
|
|
const elementDefaultColor = colors.elementDefaultColor;
|
|
const accentColor = colors.accentColor;
|
|
|
|
return (
|
|
<TouchableHighlight
|
|
underlayColor={elementDefaultColor}
|
|
onPress={properties.onPress}
|
|
style={[styles.headerContainerStyle, properties.isSelected ? {backgroundColor: accentColor} : {backgroundColor: elementDefaultColor}]}>
|
|
<Text
|
|
style={[styles.headerTextStyle, properties.isSelected ? {color: primaryTextColor} : {color: secondaryTextColor}]}>
|
|
{properties.label}
|
|
</Text>
|
|
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
|
|
export default BudgetHeader;
|
|
|
|
const styles = StyleSheet.create({
|
|
headerContainerStyle: {
|
|
width: "50%",
|
|
borderRadius: 10,
|
|
marginHorizontal: 30,
|
|
},
|
|
headerTextStyle: {
|
|
fontSize: 30,
|
|
textAlign: "center",
|
|
textAlignVertical: "center",
|
|
},
|
|
containerStyle: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
marginHorizontal: 20,
|
|
marginBottom: 20,
|
|
marginTop: 10,
|
|
},
|
|
searchBarStyle: {
|
|
marginBottom: 20,
|
|
marginHorizontal: 10,
|
|
}
|
|
}); |