PliWould/components/AreaInput.tsx

import { MeasurementInput } from "./MeasurementInput";
import { area_t, dimensions_t } from "@/lib/product";
import { useState } from "react";
import { View } from "react-native";

export type AreaInputProps = {
    onMeasurementSet?: (area : dimensions_t) => any,
    defaultValue?: area_t,
    lengthLabel?: string,
    widthLabel?: string,
}

export function AreaInput({onMeasurementSet, lengthLabel, widthLabel, defaultValue} : AreaInputProps) {

    defaultValue = defaultValue || {l: 0, w: 0, u: "foot"}

    const [area, setArea] = useState(defaultValue)

    function doOnLengthSet(measurement : dimensions_t) {
        setArea({
            ...area,
            l: measurement.l
        });
        onMeasurementSet && onMeasurementSet({
            ...area,
            l: measurement.l
        });
    }

    function doOnWidthSet(measurement : dimensions_t) {
        setArea({
            ...area,
            w: measurement.l
        });
        onMeasurementSet && onMeasurementSet({
            ...area,
            w: measurement.l
        });
    }

    return (
        <View>
            <MeasurementInput
                units={area.u}
                defaultValue={area.l}
                onValueSet={doOnLengthSet}
                label={lengthLabel}
            />
            <MeasurementInput
                units={area.u}
                defaultValue={area.w}
                onValueSet={doOnWidthSet}
                label={widthLabel}
            />
        </View>
    )
}