]>
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, |
37c36c09 | 32 | showMinute: PropTypes.bool, |
3b3350d5 | 33 | showSecond: PropTypes.bool, |
8133e8cf | 34 | style: PropTypes.object, |
96d366af | 35 | className: PropTypes.string, |
71bd9bc1 M |
36 | disabledHours: PropTypes.func, |
37 | disabledMinutes: PropTypes.func, | |
38 | disabledSeconds: PropTypes.func, | |
518b852e | 39 | hideDisabledOptions: PropTypes.bool, |
02de449a | 40 | onChange: PropTypes.func, |
41 | onOpen: PropTypes.func, | |
42 | onClose: PropTypes.func, | |
b86fe1d1 | 43 | addon: PropTypes.func, |
6d1ad104 | 44 | name: PropTypes.string, |
73e6cf78 | 45 | autoComplete: PropTypes.string, |
dd275f7d | 46 | use12Hours: PropTypes.bool, |
02de449a | 47 | }, |
48 | ||
02de449a | 49 | getDefaultProps() { |
50 | return { | |
4984ed85 | 51 | clearText: 'clear', |
04de55f8 | 52 | prefixCls: 'rc-time-picker', |
8133e8cf | 53 | defaultOpen: false, |
54 | style: {}, | |
96d366af | 55 | className: '', |
02de449a | 56 | align: {}, |
4984ed85 | 57 | defaultOpenValue: moment(), |
8133e8cf | 58 | allowEmpty: true, |
59 | showHour: true, | |
37c36c09 | 60 | showMinute: true, |
8133e8cf | 61 | showSecond: true, |
71bd9bc1 M |
62 | disabledHours: noop, |
63 | disabledMinutes: noop, | |
64 | disabledSeconds: noop, | |
518b852e | 65 | hideDisabledOptions: false, |
02de449a | 66 | placement: 'bottomLeft', |
67 | onChange: noop, | |
68 | onOpen: noop, | |
69 | onClose: noop, | |
b86fe1d1 | 70 | addon: noop, |
dd275f7d | 71 | use12Hours: false, |
02de449a | 72 | }; |
73 | }, | |
74 | ||
75 | getInitialState() { | |
fa912931 | 76 | this.saveInputRef = refFn.bind(this, 'picker'); |
02de449a | 77 | this.savePanelRef = refFn.bind(this, 'panelInstance'); |
8133e8cf | 78 | const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; |
e75ed0c6 | 79 | return { |
8133e8cf | 80 | open, |
81 | value, | |
e75ed0c6 | 82 | }; |
02de449a | 83 | }, |
84 | ||
02de449a | 85 | componentWillReceiveProps(nextProps) { |
9f9f39e4 | 86 | const { value, open } = nextProps; |
6fc4e0e8 | 87 | if ('value' in nextProps) { |
9f9f39e4 | 88 | this.setState({ |
89 | value, | |
90 | }); | |
02de449a | 91 | } |
92 | if (open !== undefined) { | |
1882f74d | 93 | this.setState({ open }); |
02de449a | 94 | } |
95 | }, | |
96 | ||
02de449a | 97 | onPanelChange(value) { |
9f9f39e4 | 98 | this.setValue(value); |
02de449a | 99 | }, |
100 | ||
101 | onPanelClear() { | |
7702bb67 | 102 | this.setValue(null); |
63541ed7 | 103 | this.setOpen(false); |
02de449a | 104 | }, |
105 | ||
106 | onVisibleChange(open) { | |
8133e8cf | 107 | this.setOpen(open); |
108 | }, | |
109 | ||
110 | onEsc() { | |
111 | this.setOpen(false); | |
ed849606 | 112 | this.focus(); |
8133e8cf | 113 | }, |
114 | ||
115 | onKeyDown(e) { | |
116 | if (e.keyCode === 40) { | |
117 | this.setOpen(true); | |
118 | } | |
02de449a | 119 | }, |
120 | ||
9f9f39e4 | 121 | setValue(value) { |
122 | if (!('value' in this.props)) { | |
123 | this.setState({ | |
124 | value, | |
125 | }); | |
126 | } | |
127 | this.props.onChange(value); | |
128 | }, | |
129 | ||
4984ed85 | 130 | getFormat() { |
dd2f6abd | 131 | const { format, showHour, showMinute, showSecond, use12Hours } = this.props; |
4984ed85 | 132 | if (format) { |
133 | return format; | |
8133e8cf | 134 | } |
dd2f6abd AS |
135 | |
136 | if (use12Hours) { | |
137 | const fmtString = ([ | |
138 | showHour ? 'h' : '', | |
139 | showMinute ? 'mm' : '', | |
140 | showSecond ? 'ss' : '', | |
141 | ].filter(item => !!item).join(':')); | |
142 | ||
143 | return fmtString.concat(' a'); | |
144 | } | |
145 | ||
37c36c09 | 146 | return [ |
147 | showHour ? 'HH' : '', | |
148 | showMinute ? 'mm' : '', | |
149 | showSecond ? 'ss' : '', | |
150 | ].filter(item => !!item).join(':'); | |
8133e8cf | 151 | }, |
152 | ||
153 | getPanelElement() { | |
1882f74d | 154 | const { |
4984ed85 | 155 | prefixCls, placeholder, disabledHours, |
1882f74d | 156 | disabledMinutes, disabledSeconds, hideDisabledOptions, |
37c36c09 | 157 | allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, |
dd275f7d | 158 | addon, use12Hours, |
1882f74d | 159 | } = this.props; |
4acbf95c M |
160 | return ( |
161 | <Panel | |
4984ed85 | 162 | clearText={clearText} |
8133e8cf | 163 | prefixCls={`${prefixCls}-panel`} |
164 | ref={this.savePanelRef} | |
165 | value={this.state.value} | |
166 | onChange={this.onPanelChange} | |
8133e8cf | 167 | onClear={this.onPanelClear} |
4984ed85 | 168 | defaultOpenValue={defaultOpenValue} |
8133e8cf | 169 | showHour={showHour} |
37c36c09 | 170 | showMinute={showMinute} |
8133e8cf | 171 | showSecond={showSecond} |
3b3350d5 | 172 | onEsc={this.onEsc} |
8133e8cf | 173 | allowEmpty={allowEmpty} |
4984ed85 | 174 | format={this.getFormat()} |
4acbf95c | 175 | placeholder={placeholder} |
518b852e M |
176 | disabledHours={disabledHours} |
177 | disabledMinutes={disabledMinutes} | |
178 | disabledSeconds={disabledSeconds} | |
179 | hideDisabledOptions={hideDisabledOptions} | |
dd275f7d | 180 | use12Hours={use12Hours} |
b86fe1d1 | 181 | addon={addon} |
4acbf95c M |
182 | /> |
183 | ); | |
184 | }, | |
185 | ||
71c3a196 | 186 | setOpen(open) { |
1882f74d | 187 | const { onOpen, onClose } = this.props; |
02de449a | 188 | if (this.state.open !== open) { |
71c3a196 | 189 | if (!('open' in this.props)) { |
190 | this.setState({ open }); | |
191 | } | |
02de449a | 192 | if (open) { |
71c3a196 | 193 | onOpen({ open }); |
02de449a | 194 | } else { |
71c3a196 | 195 | onClose({ open }); |
02de449a | 196 | } |
197 | } | |
198 | }, | |
199 | ||
ed849606 | 200 | focus() { |
dd63e6e7 | 201 | this.picker.focus(); |
ed849606 BC |
202 | }, |
203 | ||
02de449a | 204 | render() { |
4984ed85 | 205 | const { |
206 | prefixCls, placeholder, placement, align, | |
207 | disabled, transitionName, style, className, showHour, | |
672a1850 | 208 | showMinute, showSecond, getPopupContainer, name, autoComplete, |
4984ed85 | 209 | } = this.props; |
4acbf95c | 210 | const { open, value } = this.state; |
8133e8cf | 211 | let popupClassName; |
0c382382 | 212 | if (!showHour || !showMinute || !showSecond) { |
5784f914 | 213 | popupClassName = `${prefixCls}-panel-narrow`; |
8133e8cf | 214 | } |
02de449a | 215 | return ( |
216 | <Trigger | |
96a4cefc | 217 | prefixCls={`${prefixCls}-panel`} |
8133e8cf | 218 | popupClassName={popupClassName} |
02de449a | 219 | popup={this.getPanelElement()} |
220 | popupAlign={align} | |
221 | builtinPlacements={placements} | |
222 | popupPlacement={placement} | |
223 | action={disabled ? [] : ['click']} | |
224 | destroyPopupOnHide | |
8133e8cf | 225 | getPopupContainer={getPopupContainer} |
02de449a | 226 | popupTransitionName={transitionName} |
4acbf95c | 227 | popupVisible={open} |
02de449a | 228 | onPopupVisibleChange={this.onVisibleChange} |
229 | > | |
96d366af | 230 | <span className={`${prefixCls} ${className}`} style={style}> |
1882f74d | 231 | <input |
232 | className={`${prefixCls}-input`} | |
66c7bc36 | 233 | ref={this.saveInputRef} |
234 | type="text" | |
235 | placeholder={placeholder} | |
6d1ad104 | 236 | name={name} |
1882f74d | 237 | readOnly |
238 | onKeyDown={this.onKeyDown} | |
4984ed85 | 239 | disabled={disabled} value={value && value.format(this.getFormat()) || ''} |
73e6cf78 | 240 | autoComplete={autoComplete} |
1882f74d | 241 | /> |
9f9f39e4 | 242 | <span className={`${prefixCls}-icon`}/> |
02de449a | 243 | </span> |
244 | </Trigger> | |
245 | ); | |
246 | }, | |
247 | }); | |
248 | ||
249 | export default Picker; |