PliWould/components/MeasurementInput.tsx

import { Length } from "convert";
import { StyleSheet, Text, View } from "react-native";
import { NumberInput, NumberInputProps } from "./NumberInput";

export type t_length_unit = "foot" | "inch"

export type MeasurementInputProps = NumberInputProps & {
    units?: Length,
}

export function MeasurementInput({onValueSet, defaultValue: defaultValue, label, units}: MeasurementInputProps) {

    units = units || "ft";

    return (
        <View style={styles.inputWrapper}>
            <NumberInput
            onValueSet={v => onValueSet && onValueSet(v)}
            defaultValue={defaultValue}
            label={label}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    inputWrapper: {
        alignItems: "flex-start",
        flexDirection: "row",
        verticalAlign: "middle"
    },
    unitHints: {
      padding: 10,
      fontSize: 20,
      verticalAlign: "middle",
    },
    lengthInput: {
      borderWidth: 1,
      borderRadius: 4,
      borderColor: "grey",
      padding: 4,
      margin: 4,
      fontSize: 25,
    },
})