PliWould/components/AreaInput.tsx

import { MeasurementInput } from "./MeasurementInput";
import { area_t, dimensions_t } from "@/lib/product";
import { useState } from "react";
import { StyleSheet, 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: "ft"}

    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 style={styles.areaInputWrapper}>
            <MeasurementInput
                defaultValue={{l: area.l, u: area.u}}
                onValueSet={doOnLengthSet}
                label={lengthLabel}
            />
            <MeasurementInput
                defaultValue={{l: area.w, u: area.u}}
                onValueSet={doOnWidthSet}
                label={widthLabel}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    areaInputWrapper: {
        flexDirection: "row"
    }
})