74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { Length } from "convert";
|
|
import { useState } from "react";
|
|
import { Button, StyleSheet, Text, TouchableHighlight, View } from "react-native";
|
|
|
|
export type UnitChooserProps = {
|
|
choices: Length[],
|
|
onChoicePressed: (l: Length) => any,
|
|
activeColor?: string,
|
|
defaultColor?: string,
|
|
defaultValue? : Length,
|
|
}
|
|
|
|
export default function UnitChooser({ choices, onChoicePressed, activeColor, defaultColor, defaultValue }: UnitChooserProps) {
|
|
const [value, setValue] = useState(defaultValue || choices[0] as Length);
|
|
|
|
activeColor = activeColor || "lightblue";
|
|
defaultColor = defaultColor || "lightgrey";
|
|
|
|
function doChoiceClicked(choice: Length) {
|
|
setValue(choice);
|
|
onChoicePressed(choice);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.unitChooser}>
|
|
{choices.map((ci) => {
|
|
return (
|
|
<TouchableHighlight
|
|
onPress={() => doChoiceClicked(ci)}
|
|
style={value === ci ? styles.active : styles.default }
|
|
key={ci}
|
|
>
|
|
<Text style={value === ci ? styles.textActive : styles.textDefault}>{ci}</Text>
|
|
</TouchableHighlight>
|
|
)
|
|
})
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
unitChooser: {
|
|
flexDirection: "row",
|
|
verticalAlign: "middle",
|
|
},
|
|
active: {
|
|
backgroundColor: "skyblue",
|
|
padding: 5,
|
|
borderRadius: 5,
|
|
},
|
|
default: {
|
|
backgroundColor: "lightgray",
|
|
padding: 5,
|
|
borderRadius: 5,
|
|
verticalAlign: "middle",
|
|
},
|
|
textActive: {
|
|
marginTop: 2,
|
|
marginBottom: 2,
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
fontSize: 40,
|
|
},
|
|
textDefault: {
|
|
marginTop: 2,
|
|
marginBottom: 2,
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
fontSize: 40,
|
|
},
|
|
unitButton: {
|
|
},
|
|
}) |