55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
|
import { StyleSheet, TextInput } from "react-native";
|
||
|
|
|
||
|
|
export type NumberInputProps = {
|
||
|
|
defaultValue: number;
|
||
|
|
onValueSet: (value: number) => any;
|
||
|
|
label?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function NumberInput({
|
||
|
|
defaultValue,
|
||
|
|
onValueSet,
|
||
|
|
label,
|
||
|
|
}: NumberInputProps) {
|
||
|
|
const defValue = Number.isNaN(defaultValue) ? 0 : defaultValue;
|
||
|
|
|
||
|
|
function doOnValueSet(value: string) {
|
||
|
|
const iVal = parseFloat(value) || parseInt(value);
|
||
|
|
onValueSet && onValueSet(iVal);
|
||
|
|
}
|
||
|
|
|
||
|
|
const sDefValue = new String(defValue).valueOf();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TextInput
|
||
|
|
clearTextOnFocus={true}
|
||
|
|
defaultValue={sDefValue}
|
||
|
|
onChangeText={doOnValueSet}
|
||
|
|
inputMode="decimal"
|
||
|
|
style={styles.numberInput}
|
||
|
|
aria-label={label || "Enter measurement"}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
inputWrapper: {
|
||
|
|
alignItems: "flex-start",
|
||
|
|
flexDirection: "row",
|
||
|
|
verticalAlign: "middle",
|
||
|
|
},
|
||
|
|
unitHints: {
|
||
|
|
padding: 10,
|
||
|
|
fontSize: 20,
|
||
|
|
verticalAlign: "middle",
|
||
|
|
},
|
||
|
|
numberInput: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 4,
|
||
|
|
borderColor: "grey",
|
||
|
|
padding: 4,
|
||
|
|
margin: 4,
|
||
|
|
fontSize: 25,
|
||
|
|
},
|
||
|
|
});
|