54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { dimensions_t, length_t } from "@/lib/product";
|
|
import { Length } from "convert";
|
|
import { StyleSheet, Text, TextInput, View } from "react-native";
|
|
|
|
export type t_length_unit = "foot" | "inch"
|
|
|
|
export type MeasurementInputProps = {
|
|
onValueSet?: (d: dimensions_t) => any,
|
|
defaultValue: length_t;
|
|
label?: string,
|
|
}
|
|
|
|
export function MeasurementInput({onValueSet, defaultValue, label}: MeasurementInputProps) {
|
|
1
|
|
function doOnValueSet(value : string) {
|
|
const iVal = parseFloat(value) || parseInt(value);
|
|
onValueSet && onValueSet({
|
|
...defaultValue,
|
|
l: iVal,
|
|
})
|
|
}
|
|
|
|
const sDefValue = new String(defaultValue.l).valueOf()
|
|
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
clearTextOnFocus={true}
|
|
defaultValue={sDefValue}
|
|
onChangeText={doOnValueSet}
|
|
inputMode='decimal'
|
|
style={styles.lengthInput}
|
|
aria-label={label || "Enter measurement"}
|
|
/>
|
|
<Text style={styles.unitHints}>{defaultValue.u}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
unitHints: {
|
|
fontSize: 30,
|
|
padding: 10,
|
|
},
|
|
lengthInput: {
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
borderColor: "grey",
|
|
padding: 4,
|
|
margin: 4,
|
|
fontSize: 30,
|
|
width: 200,
|
|
},
|
|
}) |