PliWould/components/MeasurementInput.tsx

import { dimensions_t, length_t } from "@/lib/product";
import { Length } from "convert";
import { StyleSheet, Text, TextInput, View } from "react-native";

export type t_length_unit = "foot" | "inch"

export type MeasurementInputProps = {
    onValueSet?: (d: dimensions_t) => any,
    defaultValue: length_t;
    label?: string,
}

export function MeasurementInput({onValueSet, defaultValue, label}: MeasurementInputProps) {
1
    function doOnValueSet(value : string) {
        const iVal = parseFloat(value) || parseInt(value);
        onValueSet && onValueSet({
            ...defaultValue,
            l: iVal,
        })
    }

    const sDefValue = new String(defaultValue.l).valueOf()

    return (
        <View>
            <TextInput
                clearTextOnFocus={true}
                defaultValue={sDefValue}
                onChangeText={doOnValueSet}
                inputMode='decimal'
                style={styles.lengthInput}
                aria-label={label || "Enter measurement"}
                />
            <Text style={styles.unitHints}>{defaultValue.u}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    unitHints: {
      fontSize: 30,
      padding: 10,
    },
    lengthInput: {
      borderWidth: 1,
      borderRadius: 4,
      borderColor: "grey",
      padding: 4,
      margin: 4,
      fontSize: 30,
      width: 200,
    },
})