PliWould/components/AreaInput.tsx
2024-07-01 08:05:24 -07:00

57 lines
1.5 KiB
TypeScript

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>
)
}