diff options
author | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
---|---|---|
committer | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
commit | 4984ed85e54f442998a335db70618d6184fa397e (patch) | |
tree | 6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /src/TimePicker.jsx | |
parent | deaa6062ea2e274d50d58c70251c1237c0c03c67 (diff) | |
download | time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.gz time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.zst time-picker-4984ed85e54f442998a335db70618d6184fa397e.zip |
2.x :boom:2.0.0
Diffstat (limited to 'src/TimePicker.jsx')
-rw-r--r-- | src/TimePicker.jsx | 64 |
1 files changed, 26 insertions, 38 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 86faa71..58f6ea1 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -1,9 +1,8 @@ | |||
1 | import React, { PropTypes } from 'react'; | 1 | import React, { PropTypes } from 'react'; |
2 | import Trigger from 'rc-trigger'; | 2 | import Trigger from 'rc-trigger'; |
3 | import Panel from './module/Panel'; | 3 | import Panel from './Panel'; |
4 | import placements from './util/placements'; | 4 | import placements from './placements'; |
5 | import CommonMixin from './mixin/CommonMixin'; | 5 | import moment from 'moment'; |
6 | import { getFormatter } from './util/index'; | ||
7 | 6 | ||
8 | function noop() { | 7 | function noop() { |
9 | } | 8 | } |
@@ -15,8 +14,9 @@ function refFn(field, component) { | |||
15 | const Picker = React.createClass({ | 14 | const Picker = React.createClass({ |
16 | propTypes: { | 15 | propTypes: { |
17 | prefixCls: PropTypes.string, | 16 | prefixCls: PropTypes.string, |
18 | locale: PropTypes.object, | 17 | clearText: PropTypes.string, |
19 | value: PropTypes.object, | 18 | value: PropTypes.object, |
19 | defaultOpenValue: PropTypes.object, | ||
20 | disabled: PropTypes.bool, | 20 | disabled: PropTypes.bool, |
21 | allowEmpty: PropTypes.bool, | 21 | allowEmpty: PropTypes.bool, |
22 | defaultValue: PropTypes.object, | 22 | defaultValue: PropTypes.object, |
@@ -27,7 +27,7 @@ const Picker = React.createClass({ | |||
27 | transitionName: PropTypes.string, | 27 | transitionName: PropTypes.string, |
28 | getPopupContainer: PropTypes.func, | 28 | getPopupContainer: PropTypes.func, |
29 | placeholder: PropTypes.string, | 29 | placeholder: PropTypes.string, |
30 | formatter: PropTypes.any, | 30 | format: PropTypes.string, |
31 | showHour: PropTypes.bool, | 31 | showHour: PropTypes.bool, |
32 | style: PropTypes.object, | 32 | style: PropTypes.object, |
33 | className: PropTypes.string, | 33 | className: PropTypes.string, |
@@ -41,15 +41,15 @@ const Picker = React.createClass({ | |||
41 | onClose: PropTypes.func, | 41 | onClose: PropTypes.func, |
42 | }, | 42 | }, |
43 | 43 | ||
44 | mixins: [CommonMixin], | ||
45 | |||
46 | getDefaultProps() { | 44 | getDefaultProps() { |
47 | return { | 45 | return { |
46 | clearText: 'clear', | ||
48 | prefixCls: 'rc-time-picker', | 47 | prefixCls: 'rc-time-picker', |
49 | defaultOpen: false, | 48 | defaultOpen: false, |
50 | style: {}, | 49 | style: {}, |
51 | className: '', | 50 | className: '', |
52 | align: {}, | 51 | align: {}, |
52 | defaultOpenValue: moment(), | ||
53 | allowEmpty: true, | 53 | allowEmpty: true, |
54 | showHour: true, | 54 | showHour: true, |
55 | showSecond: true, | 55 | showSecond: true, |
@@ -118,56 +118,40 @@ const Picker = React.createClass({ | |||
118 | this.props.onChange(value); | 118 | this.props.onChange(value); |
119 | }, | 119 | }, |
120 | 120 | ||
121 | getFormatter() { | 121 | getFormat() { |
122 | const formatter = this.props.formatter; | 122 | const format = this.props.format; |
123 | const locale = this.props.locale; | 123 | if (format) { |
124 | if (formatter) { | 124 | return format; |
125 | if (formatter === this.lastFormatter) { | ||
126 | return this.normalFormatter; | ||
127 | } | ||
128 | this.normalFormatter = getFormatter(formatter, locale); | ||
129 | this.lastFormatter = formatter; | ||
130 | return this.normalFormatter; | ||
131 | } | 125 | } |
132 | if (!this.props.showSecond) { | 126 | if (!this.props.showSecond) { |
133 | if (!this.notShowSecondFormatter) { | 127 | return 'HH:mm'; |
134 | this.notShowSecondFormatter = getFormatter('HH:mm', locale); | ||
135 | } | ||
136 | return this.notShowSecondFormatter; | ||
137 | } | 128 | } |
138 | if (!this.props.showHour) { | 129 | if (!this.props.showHour) { |
139 | if (!this.notShowHourFormatter) { | 130 | return 'mm:ss'; |
140 | this.notShowHourFormatter = getFormatter('mm:ss', locale); | ||
141 | } | ||
142 | return this.notShowHourFormatter; | ||
143 | } | 131 | } |
144 | if (!this.normalFormatter) { | 132 | return 'HH:mm:ss'; |
145 | this.normalFormatter = getFormatter('HH:mm:ss', locale); | ||
146 | } | ||
147 | return this.normalFormatter; | ||
148 | }, | 133 | }, |
149 | 134 | ||
150 | getPanelElement() { | 135 | getPanelElement() { |
151 | const { | 136 | const { |
152 | prefixCls, defaultValue, locale, placeholder, disabledHours, | 137 | prefixCls, placeholder, disabledHours, |
153 | disabledMinutes, disabledSeconds, hideDisabledOptions, | 138 | disabledMinutes, disabledSeconds, hideDisabledOptions, |
154 | allowEmpty, showHour, showSecond, | 139 | allowEmpty, showHour, showSecond, defaultOpenValue, clearText, |
155 | } = this.props; | 140 | } = this.props; |
156 | return ( | 141 | return ( |
157 | <Panel | 142 | <Panel |
143 | clearText={clearText} | ||
158 | prefixCls={`${prefixCls}-panel`} | 144 | prefixCls={`${prefixCls}-panel`} |
159 | ref={this.savePanelRef} | 145 | ref={this.savePanelRef} |
160 | value={this.state.value} | 146 | value={this.state.value} |
161 | onChange={this.onPanelChange} | 147 | onChange={this.onPanelChange} |
162 | gregorianCalendarLocale={locale.calendar} | ||
163 | onClear={this.onPanelClear} | 148 | onClear={this.onPanelClear} |
164 | defaultValue={defaultValue} | 149 | defaultOpenValue={defaultOpenValue} |
165 | showHour={showHour} | 150 | showHour={showHour} |
166 | onEsc={this.onEsc} | 151 | onEsc={this.onEsc} |
167 | showSecond={showSecond} | 152 | showSecond={showSecond} |
168 | locale={locale} | ||
169 | allowEmpty={allowEmpty} | 153 | allowEmpty={allowEmpty} |
170 | formatter={this.getFormatter()} | 154 | format={this.getFormat()} |
171 | placeholder={placeholder} | 155 | placeholder={placeholder} |
172 | disabledHours={disabledHours} | 156 | disabledHours={disabledHours} |
173 | disabledMinutes={disabledMinutes} | 157 | disabledMinutes={disabledMinutes} |
@@ -195,7 +179,11 @@ const Picker = React.createClass({ | |||
195 | }, | 179 | }, |
196 | 180 | ||
197 | render() { | 181 | render() { |
198 | const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props; | 182 | const { |
183 | prefixCls, placeholder, placement, align, | ||
184 | disabled, transitionName, style, className, showHour, | ||
185 | showSecond, getPopupContainer, | ||
186 | } = this.props; | ||
199 | const { open, value } = this.state; | 187 | const { open, value } = this.state; |
200 | let popupClassName; | 188 | let popupClassName; |
201 | if (!showHour || !showSecond) { | 189 | if (!showHour || !showSecond) { |
@@ -222,7 +210,7 @@ const Picker = React.createClass({ | |||
222 | ref="picker" type="text" placeholder={placeholder} | 210 | ref="picker" type="text" placeholder={placeholder} |
223 | readOnly | 211 | readOnly |
224 | onKeyDown={this.onKeyDown} | 212 | onKeyDown={this.onKeyDown} |
225 | disabled={disabled} value={value && this.getFormatter().format(value) || ''} | 213 | disabled={disabled} value={value && value.format(this.getFormat()) || ''} |
226 | /> | 214 | /> |
227 | <span className={`${prefixCls}-icon`}/> | 215 | <span className={`${prefixCls}-icon`}/> |
228 | </span> | 216 | </span> |