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
124
125
126
127
|
import React, {PropTypes} from 'react';
const Header = React.createClass({
propTypes: {
formatter: PropTypes.object,
prefixCls: PropTypes.string,
gregorianTimePickerLocale: PropTypes.object,
locale: PropTypes.object,
disabledDate: PropTypes.func,
placeholder: PropTypes.string,
value: PropTypes.object,
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
onChange: PropTypes.func,
onClear: PropTypes.func,
showClear: PropTypes.bool,
},
getInitialState() {
const value = this.props.value;
return {
str: value && this.props.formatter.format(value) || '',
invalid: false,
};
},
componentWillReceiveProps(nextProps) {
const value = nextProps.value;
this.setState({
str: value && nextProps.formatter.format(value) || '',
invalid: false,
});
},
onInputChange(event) {
const str = event.target.value;
this.setState({
str,
});
let value = null;
const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
if (str) {
const originalValue = this.props.value;
try {
value = formatter.parse(str, {
locale: gregorianTimePickerLocale,
obeyCount: true,
});
} catch (ex) {
this.setState({
invalid: true,
});
return;
}
if (value) {
if (
hourOptions.indexOf(value.getHourOfDay()) < 0 ||
minuteOptions.indexOf(value.getMinutes()) < 0 ||
secondOptions.indexOf(value.getSeconds()) < 0
) {
this.setState({
invalid: true,
});
return;
}
if (originalValue && value) {
if (
originalValue.getHourOfDay() !== value.getHourOfDay() ||
originalValue.getMinutes() !== value.getMinutes() ||
originalValue.getSeconds() !== value.getSeconds()
) {
onChange(value);
}
} else if (originalValue !== value) {
onChange(value);
}
} else {
this.setState({
invalid: true,
});
return;
}
} else {
onChange(null);
}
this.setState({
invalid: false,
});
},
onClear() {
this.setState({str: ''});
this.props.onClear();
},
getClearButton() {
const { locale, prefixCls, showClear } = this.props;
if (!showClear) {
return null;
}
return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear} />;
},
getInput() {
const { prefixCls, placeholder } = this.props;
const { invalid, str } = this.state;
const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
return <input className={`${prefixCls}-input ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />;
},
render() {
const { prefixCls } = this.props;
return (
<div className={`${prefixCls}-input-wrap`}>
{this.getInput()}
{this.getClearButton()}
</div>
);
},
});
export default Header;
|
