FilterInput.js
3.2 KB
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
import React,{PropTypes} from 'react';
import cx from 'classnames';
import s from './FilterInput.scss';
import DateTimePicker from './DateTimePicker';
import DateMonthPicker from './DateMonthPicker';
import 'react-month-picker/css/month-picker.css';
import {MonthPicker,DatetimePicker} from './custom';
class FilterInput extends React.Component {
constructor (props) {
super(props);
this.handleChange=this.handleChange.bind(this);
this.handleValueChange=this.handleValueChange.bind(this);
this.handleDateChange=this.handleDateChange.bind(this);
this.handleAMonthChange=this.handleAMonthChange.bind(this);
const iniValue = this.props.iniValue?this.props.iniValue:'';
this.state={
value:iniValue,
hasFilter:false
}
}
static propTypes = {
floatR: PropTypes.bool,
}
static defaultProps={
floatR:true
}
componentWillReceiveProps(nextProps){
const {iniValue}=nextProps;
console.log(iniValue);
if(iniValue&&iniValue.length>0&&iniValue!=this.state.value){
this.setState({value:iniValue, hasFilter:true});
}
}
handleChange(e) {
var input = e.target.value;
const key = this.props.placeholder.key;
if(e.keyCode === 13){
input = input.replace(/[\r\n]/g,"");
if(input.length>0){
this.setState({value: input,hasFilter:true});
this.props.onChange(key, input);
}
}
else if(input.length==0){
const hasFilter = this.state.hasFilter;
if(hasFilter){
this.props.onChange(key, '');
//this.setState({value: input,hasFilter:true});
}
}
}
handleValueChange(e){
const value = e.target.value;
this.setState({value,value});
}
static propTypes = {
onChange: PropTypes.func,
placeholder:PropTypes.object
}
handleDateChange(e) {
var input = e;
const key = this.props.placeholder.key;
this.setState({value: input});
this.props.onChange(key, input);
}
handleAMonthChange(input) {
console.log(input);
const key = this.props.placeholder.key;
this.setState({value: input});
this.props.onChange(key, input);
}
renderMonth(){
return(
<div className={cx(s.filter_input_wrap)}>
<MonthPicker className="form-control" defaultValue={this.state.value} onChange={this.handleAMonthChange}></MonthPicker>
</div>
);
}
render(){
const {placeholder,floatR,width}=this.props;
const dataType = placeholder.dataType;
if(dataType&&dataType=='date'){
const dateTimeConfig={'format':'utc'};
return(
<div className={cx(s.filter_input_wrap,{'fr':floatR})} style={{width:'180px'}}>
<DatetimePicker config={dateTimeConfig} value={this.state.value} onChange={this.handleDateChange}></DatetimePicker>
</div>
);
}
else if(dataType&&dataType=='month'){
return this.renderMonth();
}
else{
console.log(this.state.value);
return(
<div className={cx(s.filter_input_wrap,{'fr':floatR})} style={{'width':width}}>
<i className={cx('kr_icon')}></i>
<input type="text" className="form-control" style={{'width':'100%'}} value={this.state.value} placeholder={placeholder.displayName} onChange={this.handleValueChange} onKeyUp={this.handleChange}/>
</div>
);
}
}
}
export default FilterInput;