PliWould/components/UnitChooser.tsx

49 lines
1.1 KiB
TypeScript
Raw Normal View History

2024-07-01 04:49:41 +02:00
import { Length } from "convert";
import { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
export type UnitChooserProps = {
choices: Length[],
onChoicePressed: (l: Length) => any,
activeColor?: string,
defaultColor?: string,
}
export default function UnitChooser({ choices, onChoicePressed, activeColor, defaultColor }: UnitChooserProps) {
const [value, setValue] = useState(choices[0] as Length);
activeColor = activeColor || "lightblue";
defaultColor = activeColor || "lightgrey";
function doChoiceClicked(choice: Length) {
setValue(choice);
onChoicePressed(choice);
}
return (
<View style={styles.unitChooser}>
{choices.map((ci) => {
return (
<Button
title={ci}
onPress={() => doChoiceClicked(ci)}
color={value === ci ? activeColor : defaultColor}
/>
)
})
}
</View>
)
}
const styles = StyleSheet.create({
unitChooser: {
},
active: {
},
default: {
}
})