Philip Cesar Garay
59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import { Pressable, Text, View } from "react-native";
|
|
|
|
import { Fonts } from "../styles";
|
|
import Style, { defaultItemHeight } from "../styles/Style";
|
|
|
|
const OptionSelector = ({
|
|
optionTypeList = {},
|
|
selected,
|
|
setSelected,
|
|
containerStyle = {},
|
|
colorMap = {},
|
|
}) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
...Style.containerSpaceBetween,
|
|
...Style.containerItem,
|
|
padding: 0,
|
|
...containerStyle,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{Object.entries(optionTypeList).map(([key, value], index) => {
|
|
const isSelected = key === selected;
|
|
|
|
return (
|
|
<Pressable
|
|
key={key}
|
|
onPress={() => setSelected(key)}
|
|
style={{
|
|
...Style.containerItem,
|
|
...Style.containerCenter,
|
|
flex: 1,
|
|
padding: 0,
|
|
height: defaultItemHeight,
|
|
margin: defaultItemHeight * 0.2,
|
|
backgroundColor: isSelected
|
|
? colorMap[key]?.secondary
|
|
: "transparent",
|
|
borderWidth: 1,
|
|
borderColor: isSelected ? colorMap[key]?.primary : "transparent",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...Fonts({ type: "section" }),
|
|
}}
|
|
>
|
|
{value}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default OptionSelector;
|