PliWould/components/AreaInput.tsx

68 lines
1.8 KiB
TypeScript

import { MeasurementInput } from "./MeasurementInput";
import { area_t, dimensions_t } from "@/lib/dimensions_t";
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",
}
})