-
Notifications
You must be signed in to change notification settings - Fork 1
/
ValueInput.js
86 lines (76 loc) · 1.77 KB
/
ValueInput.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
import React, { Component } from 'react';
import moment from 'moment';
import TextField from 'calcite-react/TextField';
import DatePicker from 'calcite-react/DatePicker';
class ValueInput extends Component {
constructor(props) {
super(props);
this.state = {
datePickerFocused: false
};
}
onFocusChange = ({ focused }) => {
this.setState({
datePickerFocused: focused
});
};
handleOnChange = e => {
this.props.onChange({
name: e.target.value,
code: e.target.value
});
};
handleOnDateChange = e => {
this.props.onChange({
name: e,
code: e
});
};
getMomentDate = date => {
if (date && date !== '') {
return moment(date);
}
return moment();
};
getElement = type => {
switch (type) {
case 'string':
return (
<TextField value={this.props.value} onChange={this.handleOnChange} />
);
case 'number':
return (
<TextField
value={this.props.value}
onChange={this.handleOnChange}
type="number"
/>
);
case 'date':
case 'epoch':
return (
<DatePicker
date={this.getMomentDate(this.props.value)}
isOutsideRange={() => false}
numberOfMonths={1}
anchorDirection="right"
onDateChange={this.handleOnDateChange}
focused={this.state.datePickerFocused}
onFocusChange={this.onFocusChange}
/>
);
default:
return (
<TextField
disabled
value={this.props.value}
onChange={this.handleOnChange}
/>
);
}
};
render() {
return this.getElement(this.props.type);
}
}
export default ValueInput;