PliWould/components/AreaInput.tsx

import { MeasurementInput } from "./MeasurementInput";
import { area_t, dimensions_t } from "@/lib/dimensions";
import { Length } from "convert";
import { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import MeasurementUnitInput from "./MeasurementUnitInput";
import { useAppDispatch, useAppSelector } from "@/app/store";
import { selectPlywoodCalc } from "@/features/product/productSlice";

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(l: number) {
        const a : area_t = { ...area, l };
        setArea(a);
        onMeasurementSet && onMeasurementSet(a);
    }

    function doOnLengthUnitSet(u: Length) {
        const a : area_t = { ...area, u };
        setArea(a);
        onMeasurementSet && onMeasurementSet(a);
    }

    function doOnWidthSet(l: number) {
        const a : area_t = { ...area, l };
        setArea(a);
        onMeasurementSet && onMeasurementSet(a);
    }

    function doOnWidthUnitSet(u: Length) {
        const a : area_t = { ...area, u };
        setArea(a);
        onMeasurementSet && onMeasurementSet(a);
    }

    return (
        <View style={styles.areaInputWrapper}>
            <MeasurementUnitInput
                label="Length"
                defaultValue={0}
                defaultUnit={units}
                onValueSet={doOnLengthSet}
                onUnitSet={doOnLengthUnitSet}
                aria-label="length"
                />
            <Text style={{fontSize: 30,}} > x </Text>
            <MeasurementUnitInput
                label="Width"
                defaultValue={0}
                defaultUnit={units}
                onValueSet={doOnWidthSet}
                onUnitSet={doOnWidthUnitSet}
                aria-label="width"
                />
        </View>
    )
}

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