PliWould/components/MeasurementInput.tsx

45 lines
1.0 KiB
TypeScript

import { Length } from "convert";
import { StyleSheet, Text, View } from "react-native";
import { NumberInput, NumberInputProps } from "./NumberInput";
export type t_length_unit = "foot" | "inch"
export type MeasurementInputProps = NumberInputProps & {
units?: Length,
}
export function MeasurementInput({onValueSet, defaultValue: defaultValue, label, units}: MeasurementInputProps) {
units = units || "ft";
return (
<View style={styles.inputWrapper}>
<NumberInput
onValueSet={v => onValueSet && onValueSet(v)}
defaultValue={defaultValue}
label={label}
/>
</View>
)
}
const styles = StyleSheet.create({
inputWrapper: {
alignItems: "flex-start",
flexDirection: "row",
verticalAlign: "middle"
},
unitHints: {
padding: 10,
fontSize: 20,
verticalAlign: "middle",
},
lengthInput: {
borderWidth: 1,
borderRadius: 4,
borderColor: "grey",
padding: 4,
margin: 4,
fontSize: 25,
},
})