49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
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: {
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|