]>
Commit | Line | Data |
---|---|---|
02de449a | 1 | import React, {PropTypes} from 'react'; |
2 | ||
3 | const Header = React.createClass({ | |
4 | propTypes: { | |
5 | formatter: PropTypes.object, | |
6 | prefixCls: PropTypes.string, | |
78637ac0 | 7 | gregorianTimePickerLocale: PropTypes.object, |
02de449a | 8 | locale: PropTypes.object, |
9 | disabledDate: PropTypes.func, | |
10 | placeholder: PropTypes.string, | |
11 | value: PropTypes.object, | |
12 | hourOptions: PropTypes.array, | |
13 | minuteOptions: PropTypes.array, | |
14 | secondOptions: PropTypes.array, | |
15 | onChange: PropTypes.func, | |
16 | onClear: PropTypes.func, | |
17 | showClear: PropTypes.bool, | |
18 | }, | |
19 | ||
20 | getInitialState() { | |
21 | const value = this.props.value; | |
22 | return { | |
23 | str: value && this.props.formatter.format(value) || '', | |
24 | invalid: false, | |
25 | }; | |
26 | }, | |
27 | ||
28 | componentWillReceiveProps(nextProps) { | |
78637ac0 | 29 | const value = nextProps.value; |
02de449a | 30 | this.setState({ |
31 | str: value && nextProps.formatter.format(value) || '', | |
32 | invalid: false, | |
33 | }); | |
34 | }, | |
35 | ||
36 | onInputChange(event) { | |
37 | const str = event.target.value; | |
38 | this.setState({ | |
39 | str, | |
40 | }); | |
41 | let value = null; | |
78637ac0 | 42 | const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; |
02de449a | 43 | |
44 | if (str) { | |
45 | const originalValue = this.props.value; | |
46 | try { | |
47 | value = formatter.parse(str, { | |
78637ac0 | 48 | locale: gregorianTimePickerLocale, |
02de449a | 49 | obeyCount: true, |
50 | }); | |
02de449a | 51 | } catch (ex) { |
52 | this.setState({ | |
53 | invalid: true, | |
54 | }); | |
55 | return; | |
56 | } | |
57 | ||
58 | if (value) { | |
59 | if ( | |
11b97949 M |
60 | hourOptions.indexOf(value.getHourOfDay()) < 0 || |
61 | minuteOptions.indexOf(value.getMinutes()) < 0 || | |
62 | secondOptions.indexOf(value.getSeconds()) < 0 | |
02de449a | 63 | ) { |
64 | this.setState({ | |
65 | invalid: true, | |
66 | }); | |
67 | return; | |
68 | } | |
69 | ||
70 | if (originalValue && value) { | |
71 | if ( | |
11b97949 M |
72 | originalValue.getHourOfDay() !== value.getHourOfDay() || |
73 | originalValue.getMinutes() !== value.getMinutes() || | |
74 | originalValue.getSeconds() !== value.getSeconds() | |
02de449a | 75 | ) { |
76 | onChange(value); | |
77 | } | |
78 | } else if (originalValue !== value) { | |
79 | onChange(value); | |
80 | } | |
81 | } else { | |
82 | this.setState({ | |
83 | invalid: true, | |
84 | }); | |
85 | return; | |
86 | } | |
87 | } else { | |
88 | onChange(null); | |
89 | } | |
90 | ||
91 | this.setState({ | |
92 | invalid: false, | |
93 | }); | |
94 | }, | |
95 | ||
96 | onClear() { | |
97 | this.setState({str: ''}); | |
98 | this.props.onClear(); | |
99 | }, | |
100 | ||
101 | getClearButton() { | |
102 | const { locale, prefixCls, showClear } = this.props; | |
103 | if (!showClear) { | |
104 | return null; | |
105 | } | |
106 | return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear} />; | |
107 | }, | |
108 | ||
109 | getInput() { | |
110 | const { prefixCls, placeholder } = this.props; | |
111 | const { invalid, str } = this.state; | |
112 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; | |
113 | return <input className={`${prefixCls}-input ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />; | |
114 | }, | |
115 | ||
02de449a | 116 | render() { |
117 | const { prefixCls } = this.props; | |
118 | return ( | |
119 | <div className={`${prefixCls}-input-wrap`}> | |
120 | {this.getInput()} | |
121 | {this.getClearButton()} | |
122 | </div> | |
123 | ); | |
124 | }, | |
125 | }); | |
126 | ||
127 | export default Header; |