PliWould/components/AreaInput.tsx

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

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

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

    defaultValue = defaultValue || {l: 0, w: 0, u: "ft"}
    units = units || "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}
                units={units}
            />
            <Text style={{fontSize: 30,}} > x </Text>
            <MeasurementInput
                defaultValue={{l: area.w, u: area.u}}
                onValueSet={doOnWidthSet}
                label={widthLabel}
                units={units}
            />
        </View>
    )
}

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