This repository has been archived by the owner on Jun 16, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 117
/
CurrencyUnitInput.js
123 lines (111 loc) · 3.14 KB
/
CurrencyUnitInput.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// @flow
import React, { Component } from "react";
import type { Unit } from "@ledgerhq/currencies";
import { View, StyleSheet, TextInput } from "react-native";
import { formatCurrencyUnit, parseCurrencyUnit } from "@ledgerhq/currencies";
import LText, { getFontStyle } from "../components/LText";
import { withLocale } from "../context/Locale";
const initialValueStringFromProps = props =>
props.value === 0
? "" // empty string because we want to fallback on displaying the placeholder
: formatCurrencyUnit(props.unit, props.value, {
locale: props.locale,
disableRounding: true
// useGrouping: false // FIXME should we disable grouping?
});
const styles = StyleSheet.create({
root: {
backgroundColor: "white",
position: "relative",
flexDirection: "row",
padding: 8,
height: 60,
flex: 1
},
textInput: {
paddingRight: 48,
color: "#999",
fontSize: 14,
flex: 1
},
unit: {
color: "#999",
position: "absolute",
right: 8,
padding: 8,
fontSize: 14,
alignSelf: "center"
}
});
type Props = {
value: number,
onChange: number => void,
unit: Unit,
locale?: string
};
type State = {
value: number, // Track the last "stable" value coming from props
valueString: string, // Track the TextInput string
editing: boolean // Track the focus state
};
class CurrencyUnitInput extends Component<Props, State> {
state = {
editing: false,
value: 0,
valueString: ""
};
static getDerivedStateFromProps(
nextProps: Props,
prevState: State
): $Shape<State> {
if (!prevState.editing && nextProps.value !== prevState.value) {
return {
value: nextProps.value,
valueString: initialValueStringFromProps(nextProps)
};
}
return null;
}
onChangeText = (valueString: string) => {
const { unit, onChange } = this.props;
const value = parseCurrencyUnit(unit, valueString);
// TODO polish: valueString needs to be cleaned if there are more digits than required
// TODO polish: we need to MAX the field if value is higher than threshold
this.setState({ value, valueString });
if (!isNaN(value)) {
onChange(value);
}
};
onFocus = () => {
this.setState({ editing: true });
};
onBlur = () => {
const { value } = this.props;
const valueString = initialValueStringFromProps(this.props);
this.setState({ editing: false, value, valueString });
};
render() {
const { unit, locale } = this.props;
const { valueString } = this.state;
const placeholder = formatCurrencyUnit(unit, 0, { locale });
return (
<View style={styles.root}>
<TextInput
style={[styles.textInput, getFontStyle({ bold: true })]}
keyboardType="numeric"
autoCorrect={false}
autoCapitalize="none"
value={valueString}
onChangeText={this.onChangeText}
onFocus={this.onFocus}
onBlur={this.onBlur}
placeholder={placeholder}
/>
<LText pointerEvents="none" style={styles.unit}>
{unit.code}
</LText>
</View>
);
}
}
export default withLocale(CurrencyUnitInput);