60 lines
No EOL
1.5 KiB
TypeScript
60 lines
No EOL
1.5 KiB
TypeScript
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
|
|
import React, { useState } from 'react'
|
|
import { useTheme } from '../../../app/contexts/ThemeContext'
|
|
import { SIZES } from '../../../constants/theme';
|
|
import { Category } from '../../../types/dbItems';
|
|
import CategorySelectorModal from './CategorySelectorModal';
|
|
|
|
interface CategorySelectorProps {
|
|
onPress? : () => void | undefined;
|
|
selectedCategory? : Category;
|
|
}
|
|
|
|
const CategorySelector: React.FC<CategorySelectorProps> = (props : CategorySelectorProps) => {
|
|
const {colors} = useTheme();
|
|
|
|
|
|
return (
|
|
<>
|
|
<TouchableOpacity style={[styles.tile, {backgroundColor: colors.backgroundColor}]} onPress={props.onPress}>
|
|
<View style={[styles.colorTip, {backgroundColor: props.selectedCategory?.color}]}>
|
|
|
|
</View>
|
|
<View style={[styles.textWrapper]}>
|
|
<Text style={[styles.text, {color: colors.primaryText}]}>{props.selectedCategory?.name ?? "Tap to select Categroy"}</Text>
|
|
</View>
|
|
<View style={styles.tileTail}></View>
|
|
</TouchableOpacity>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CategorySelector
|
|
|
|
const styles = StyleSheet.create({
|
|
tile: {
|
|
height: 60,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
borderRadius: 20
|
|
},
|
|
colorTip:{
|
|
height: "100%",
|
|
width: 30,
|
|
borderTopLeftRadius:20,
|
|
borderBottomLeftRadius: 20
|
|
},
|
|
textWrapper: {
|
|
|
|
},
|
|
tileTail:{
|
|
height: "100%",
|
|
width: 30,
|
|
borderTopRightRadius:20,
|
|
borderBottomRightRadius: 20
|
|
},
|
|
text: {
|
|
fontSize: SIZES.large,
|
|
}
|
|
}) |