]>
Commit | Line | Data |
---|---|---|
1882f74d | 1 | import React, { PropTypes } from 'react'; |
02de449a | 2 | import Trigger from 'rc-trigger'; |
4984ed85 | 3 | import Panel from './Panel'; |
4 | import placements from './placements'; | |
5 | import moment from 'moment'; | |
02de449a | 6 | |
7 | function noop() { | |
8 | } | |
9 | ||
10 | function refFn(field, component) { | |
11 | this[field] = component; | |
12 | } | |
13 | ||
14 | const Picker = React.createClass({ | |
15 | propTypes: { | |
16 | prefixCls: PropTypes.string, | |
4984ed85 | 17 | clearText: PropTypes.string, |
9f9f39e4 | 18 | value: PropTypes.object, |
4984ed85 | 19 | defaultOpenValue: PropTypes.object, |
02de449a | 20 | disabled: PropTypes.bool, |
8133e8cf | 21 | allowEmpty: PropTypes.bool, |
63541ed7 | 22 | defaultValue: PropTypes.object, |
02de449a | 23 | open: PropTypes.bool, |
8133e8cf | 24 | defaultOpen: PropTypes.bool, |
02de449a | 25 | align: PropTypes.object, |
26 | placement: PropTypes.any, | |
27 | transitionName: PropTypes.string, | |
8133e8cf | 28 | getPopupContainer: PropTypes.func, |
4acbf95c | 29 | placeholder: PropTypes.string, |
4984ed85 | 30 | format: PropTypes.string, |
8133e8cf | 31 | showHour: PropTypes.bool, |
3b3350d5 | 32 | showSecond: PropTypes.bool, |
8133e8cf | 33 | style: PropTypes.object, |
96d366af | 34 | className: PropTypes.string, |
71bd9bc1 M |
35 | disabledHours: PropTypes.func, |
36 | disabledMinutes: PropTypes.func, | |
37 | disabledSeconds: PropTypes.func, | |
518b852e | 38 | hideDisabledOptions: PropTypes.bool, |
02de449a | 39 | onChange: PropTypes.func, |
40 | onOpen: PropTypes.func, | |
41 | onClose: PropTypes.func, | |
b86fe1d1 | 42 | addon: PropTypes.func, |
02de449a | 43 | }, |
44 | ||
02de449a | 45 | getDefaultProps() { |
46 | return { | |
4984ed85 | 47 | clearText: 'clear', |
04de55f8 | 48 | prefixCls: 'rc-time-picker', |
8133e8cf | 49 | defaultOpen: false, |
50 | style: {}, | |
96d366af | 51 | className: '', |
02de449a | 52 | align: {}, |
4984ed85 | 53 | defaultOpenValue: moment(), |
8133e8cf | 54 | allowEmpty: true, |
55 | showHour: true, | |
56 | showSecond: true, | |
71bd9bc1 M |
57 | disabledHours: noop, |
58 | disabledMinutes: noop, | |
59 | disabledSeconds: noop, | |
518b852e | 60 | hideDisabledOptions: false, |
02de449a | 61 | placement: 'bottomLeft', |
62 | onChange: noop, | |
63 | onOpen: noop, | |
64 | onClose: noop, | |
b86fe1d1 | 65 | addon: noop, |
02de449a | 66 | }; |
67 | }, | |
68 | ||
69 | getInitialState() { | |
70 | this.savePanelRef = refFn.bind(this, 'panelInstance'); | |
8133e8cf | 71 | const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; |
e75ed0c6 | 72 | return { |
8133e8cf | 73 | open, |
74 | value, | |
e75ed0c6 | 75 | }; |
02de449a | 76 | }, |
77 | ||
02de449a | 78 | componentWillReceiveProps(nextProps) { |
9f9f39e4 | 79 | const { value, open } = nextProps; |
6fc4e0e8 | 80 | if ('value' in nextProps) { |
9f9f39e4 | 81 | this.setState({ |
82 | value, | |
83 | }); | |
02de449a | 84 | } |
85 | if (open !== undefined) { | |
1882f74d | 86 | this.setState({ open }); |
02de449a | 87 | } |
88 | }, | |
89 | ||
02de449a | 90 | onPanelChange(value) { |
9f9f39e4 | 91 | this.setValue(value); |
02de449a | 92 | }, |
93 | ||
94 | onPanelClear() { | |
7702bb67 | 95 | this.setValue(null); |
63541ed7 | 96 | this.setOpen(false); |
02de449a | 97 | }, |
98 | ||
99 | onVisibleChange(open) { | |
8133e8cf | 100 | this.setOpen(open); |
101 | }, | |
102 | ||
103 | onEsc() { | |
104 | this.setOpen(false); | |
105 | this.refs.picker.focus(); | |
106 | }, | |
107 | ||
108 | onKeyDown(e) { | |
109 | if (e.keyCode === 40) { | |
110 | this.setOpen(true); | |
111 | } | |
02de449a | 112 | }, |
113 | ||
9f9f39e4 | 114 | setValue(value) { |
115 | if (!('value' in this.props)) { | |
116 | this.setState({ | |
117 | value, | |
118 | }); | |
119 | } | |
120 | this.props.onChange(value); | |
121 | }, | |
122 | ||
4984ed85 | 123 | getFormat() { |
124 | const format = this.props.format; | |
125 | if (format) { | |
126 | return format; | |
8133e8cf | 127 | } |
128 | if (!this.props.showSecond) { | |
4984ed85 | 129 | return 'HH:mm'; |
8133e8cf | 130 | } |
131 | if (!this.props.showHour) { | |
4984ed85 | 132 | return 'mm:ss'; |
8133e8cf | 133 | } |
4984ed85 | 134 | return 'HH:mm:ss'; |
8133e8cf | 135 | }, |
136 | ||
137 | getPanelElement() { | |
1882f74d | 138 | const { |
4984ed85 | 139 | prefixCls, placeholder, disabledHours, |
1882f74d | 140 | disabledMinutes, disabledSeconds, hideDisabledOptions, |
4984ed85 | 141 | allowEmpty, showHour, showSecond, defaultOpenValue, clearText, |
b86fe1d1 | 142 | addon, |
1882f74d | 143 | } = this.props; |
4acbf95c M |
144 | return ( |
145 | <Panel | |
4984ed85 | 146 | clearText={clearText} |
8133e8cf | 147 | prefixCls={`${prefixCls}-panel`} |
148 | ref={this.savePanelRef} | |
149 | value={this.state.value} | |
150 | onChange={this.onPanelChange} | |
8133e8cf | 151 | onClear={this.onPanelClear} |
4984ed85 | 152 | defaultOpenValue={defaultOpenValue} |
8133e8cf | 153 | showHour={showHour} |
8133e8cf | 154 | showSecond={showSecond} |
3b3350d5 | 155 | onEsc={this.onEsc} |
8133e8cf | 156 | allowEmpty={allowEmpty} |
4984ed85 | 157 | format={this.getFormat()} |
4acbf95c | 158 | placeholder={placeholder} |
518b852e M |
159 | disabledHours={disabledHours} |
160 | disabledMinutes={disabledMinutes} | |
161 | disabledSeconds={disabledSeconds} | |
162 | hideDisabledOptions={hideDisabledOptions} | |
b86fe1d1 | 163 | addon={addon} |
4acbf95c M |
164 | /> |
165 | ); | |
166 | }, | |
167 | ||
02de449a | 168 | setOpen(open, callback) { |
1882f74d | 169 | const { onOpen, onClose } = this.props; |
02de449a | 170 | if (this.state.open !== open) { |
171 | this.setState({ | |
8133e8cf | 172 | open, |
02de449a | 173 | }, callback); |
174 | const event = { | |
8133e8cf | 175 | open, |
02de449a | 176 | }; |
177 | if (open) { | |
178 | onOpen(event); | |
179 | } else { | |
180 | onClose(event); | |
181 | } | |
182 | } | |
183 | }, | |
184 | ||
02de449a | 185 | render() { |
4984ed85 | 186 | const { |
187 | prefixCls, placeholder, placement, align, | |
188 | disabled, transitionName, style, className, showHour, | |
189 | showSecond, getPopupContainer, | |
190 | } = this.props; | |
4acbf95c | 191 | const { open, value } = this.state; |
8133e8cf | 192 | let popupClassName; |
193 | if (!showHour || !showSecond) { | |
5784f914 | 194 | popupClassName = `${prefixCls}-panel-narrow`; |
8133e8cf | 195 | } |
02de449a | 196 | return ( |
197 | <Trigger | |
96a4cefc | 198 | prefixCls={`${prefixCls}-panel`} |
8133e8cf | 199 | popupClassName={popupClassName} |
02de449a | 200 | popup={this.getPanelElement()} |
201 | popupAlign={align} | |
202 | builtinPlacements={placements} | |
203 | popupPlacement={placement} | |
204 | action={disabled ? [] : ['click']} | |
205 | destroyPopupOnHide | |
8133e8cf | 206 | getPopupContainer={getPopupContainer} |
02de449a | 207 | popupTransitionName={transitionName} |
4acbf95c | 208 | popupVisible={open} |
02de449a | 209 | onPopupVisibleChange={this.onVisibleChange} |
210 | > | |
96d366af | 211 | <span className={`${prefixCls} ${className}`} style={style}> |
1882f74d | 212 | <input |
213 | className={`${prefixCls}-input`} | |
214 | ref="picker" type="text" placeholder={placeholder} | |
215 | readOnly | |
216 | onKeyDown={this.onKeyDown} | |
4984ed85 | 217 | disabled={disabled} value={value && value.format(this.getFormat()) || ''} |
1882f74d | 218 | /> |
9f9f39e4 | 219 | <span className={`${prefixCls}-icon`}/> |
02de449a | 220 | </span> |
221 | </Trigger> | |
222 | ); | |
223 | }, | |
224 | }); | |
225 | ||
226 | export default Picker; |