PliWould/components/UnitChooser.tsx

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: {
    },
})