48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { dimensions_t, length_t } from "@/lib/product";
|
|
import { StyleSheet, Text, TextInput, View } from "react-native";
|
|
|
|
export type t_length_unit = "foot" | "inch"
|
|
|
|
export type MeasurementInputProps = {
|
|
onValueSet?: (d: dimensions_t) => any,
|
|
units: t_length_unit,
|
|
defaultValue: number;
|
|
}
|
|
|
|
export function MeasurementInput({onValueSet, units, defaultValue}: MeasurementInputProps) {
|
|
|
|
function doOnValueSet(value : string) {
|
|
onValueSet && onValueSet({
|
|
l: (parseInt(value) || parseFloat(value)),
|
|
u: units,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
clearTextOnFocus={true}
|
|
defaultValue={new String(defaultValue).valueOf()}
|
|
onChangeText={doOnValueSet}
|
|
inputMode='decimal'
|
|
style={styles.lengthInput} />
|
|
<Text style={styles.unitHints}>{units}</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,
|
|
},
|
|
}) |