1import React from "react";
2import PropTypes from "prop-types";
3
4class NumberField extends React.Component {
5 constructor(props) {
6 super(props);
7 this.state = { isEditing: false };
8 }
9
10 onChange(event) {
11 this.props.onChange(event.target.value);
12 }
13
14 toCurrency(number) {
15 const formatter = new Intl.NumberFormat("sv-SE", {
16 style: "decimal",
17 currency: "SEK"
18 });
19
20 return formatter.format(number);
21 }
22
23 toggleEditing() {
24 this.setState({ isEditing: !this.state.isEditing });
25 }
26
27 render() {
28 return (
29 <div>
30 <label htmlFor={this.props.name}>Income</label>
31 {this.state.isEditing ? (
32 <input
33 type="number"
34 name={this.props.name}
35 value={this.props.value}
36 onChange={this.onChange.bind(this)}
37 onBlur={this.toggleEditing.bind(this)}
38 />
39 ) : (
40 <input
41 type="text"
42 name={this.props.name}
43 value={this.toCurrency(this.props.value)}
44 onFocus={this.toggleEditing.bind(this)}
45 readOnly
46 />
47 )}
48 </div>
49 );
50 }
51}
52
53NumberField.propTypes = {
54 name: PropTypes.string,
55 value: PropTypes.string,
56 onChange: PropTypes.func
57};
58
59export default NumberField;
60