diff options
author | yiminghe <yiminghe@gmail.com> | 2015-11-27 16:15:05 +0800 |
---|---|---|
committer | yiminghe <yiminghe@gmail.com> | 2015-11-27 16:15:05 +0800 |
commit | 8133e8cf3b37b2be764616493ade7c7a7678fce1 (patch) | |
tree | 4321352889ab62f18ff8703adac8756ddb506dc0 /src/module/Header.jsx | |
parent | 7702bb67968104a64fa85ba7e893bf2393eeb3c5 (diff) | |
download | time-picker-8133e8cf3b37b2be764616493ade7c7a7678fce1.tar.gz time-picker-8133e8cf3b37b2be764616493ade7c7a7678fce1.tar.zst time-picker-8133e8cf3b37b2be764616493ade7c7a7678fce1.zip |
add gregorianCalendarLocale prop1.0.0-alpha1
Diffstat (limited to 'src/module/Header.jsx')
-rw-r--r-- | src/module/Header.jsx | 44 |
1 files changed, 35 insertions, 9 deletions
diff --git a/src/module/Header.jsx b/src/module/Header.jsx index b65fd25..962328c 100644 --- a/src/module/Header.jsx +++ b/src/module/Header.jsx | |||
@@ -4,7 +4,7 @@ const Header = React.createClass({ | |||
4 | propTypes: { | 4 | propTypes: { |
5 | formatter: PropTypes.object, | 5 | formatter: PropTypes.object, |
6 | prefixCls: PropTypes.string, | 6 | prefixCls: PropTypes.string, |
7 | gregorianTimePickerLocale: PropTypes.object, | 7 | gregorianCalendarLocale: PropTypes.object, |
8 | locale: PropTypes.object, | 8 | locale: PropTypes.object, |
9 | disabledDate: PropTypes.func, | 9 | disabledDate: PropTypes.func, |
10 | placeholder: PropTypes.string, | 10 | placeholder: PropTypes.string, |
@@ -14,7 +14,8 @@ const Header = React.createClass({ | |||
14 | secondOptions: PropTypes.array, | 14 | secondOptions: PropTypes.array, |
15 | onChange: PropTypes.func, | 15 | onChange: PropTypes.func, |
16 | onClear: PropTypes.func, | 16 | onClear: PropTypes.func, |
17 | showClear: PropTypes.bool, | 17 | onEsc: PropTypes.func, |
18 | allowEmpty: PropTypes.bool, | ||
18 | }, | 19 | }, |
19 | 20 | ||
20 | getInitialState() { | 21 | getInitialState() { |
@@ -25,6 +26,12 @@ const Header = React.createClass({ | |||
25 | }; | 26 | }; |
26 | }, | 27 | }, |
27 | 28 | ||
29 | componentDidMount() { | ||
30 | this.timer = setTimeout(() => { | ||
31 | this.refs.input.focus(); | ||
32 | }, 0); | ||
33 | }, | ||
34 | |||
28 | componentWillReceiveProps(nextProps) { | 35 | componentWillReceiveProps(nextProps) { |
29 | const value = nextProps.value; | 36 | const value = nextProps.value; |
30 | this.setState({ | 37 | this.setState({ |
@@ -33,19 +40,23 @@ const Header = React.createClass({ | |||
33 | }); | 40 | }); |
34 | }, | 41 | }, |
35 | 42 | ||
43 | componentWillUnmount() { | ||
44 | clearTimeout(this.timer); | ||
45 | }, | ||
46 | |||
36 | onInputChange(event) { | 47 | onInputChange(event) { |
37 | const str = event.target.value; | 48 | const str = event.target.value; |
38 | this.setState({ | 49 | this.setState({ |
39 | str, | 50 | str, |
40 | }); | 51 | }); |
41 | let value = null; | 52 | let value = null; |
42 | const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; | 53 | const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props; |
43 | 54 | ||
44 | if (str) { | 55 | if (str) { |
45 | const originalValue = this.props.value; | 56 | const originalValue = this.props.value; |
46 | try { | 57 | try { |
47 | value = formatter.parse(str, { | 58 | value = formatter.parse(str, { |
48 | locale: gregorianTimePickerLocale, | 59 | locale: gregorianCalendarLocale, |
49 | obeyCount: true, | 60 | obeyCount: true, |
50 | }); | 61 | }); |
51 | } catch (ex) { | 62 | } catch (ex) { |
@@ -84,8 +95,13 @@ const Header = React.createClass({ | |||
84 | }); | 95 | }); |
85 | return; | 96 | return; |
86 | } | 97 | } |
87 | } else { | 98 | } else if (allowEmpty) { |
88 | onChange(null); | 99 | onChange(null); |
100 | } else { | ||
101 | this.setState({ | ||
102 | invalid: true, | ||
103 | }); | ||
104 | return; | ||
89 | } | 105 | } |
90 | 106 | ||
91 | this.setState({ | 107 | this.setState({ |
@@ -93,24 +109,34 @@ const Header = React.createClass({ | |||
93 | }); | 109 | }); |
94 | }, | 110 | }, |
95 | 111 | ||
112 | onKeyDown(e) { | ||
113 | if (e.keyCode === 27) { | ||
114 | this.props.onEsc(); | ||
115 | } | ||
116 | }, | ||
117 | |||
96 | onClear() { | 118 | onClear() { |
97 | this.setState({str: ''}); | 119 | this.setState({str: ''}); |
98 | this.props.onClear(); | 120 | this.props.onClear(); |
99 | }, | 121 | }, |
100 | 122 | ||
101 | getClearButton() { | 123 | getClearButton() { |
102 | const { locale, prefixCls, showClear } = this.props; | 124 | const { locale, prefixCls, allowEmpty } = this.props; |
103 | if (!showClear) { | 125 | if (!allowEmpty) { |
104 | return null; | 126 | return null; |
105 | } | 127 | } |
106 | return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear} />; | 128 | return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>; |
107 | }, | 129 | }, |
108 | 130 | ||
109 | getInput() { | 131 | getInput() { |
110 | const { prefixCls, placeholder } = this.props; | 132 | const { prefixCls, placeholder } = this.props; |
111 | const { invalid, str } = this.state; | 133 | const { invalid, str } = this.state; |
112 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; | 134 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; |
113 | return <input className={`${prefixCls}-input ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />; | 135 | return (<input className={`${prefixCls}-input ${invalidClass}`} |
136 | ref="input" | ||
137 | onKeyDown={this.onKeyDown} | ||
138 | value={str} | ||
139 | placeholder={placeholder} onChange={this.onInputChange}/>); | ||
114 | }, | 140 | }, |
115 | 141 | ||
116 | render() { | 142 | render() { |