1 import React, { PropTypes } from 'react';
2 import Trigger from 'rc-trigger';
3 import Panel from './Panel';
4 import placements from './placements';
5 import moment from 'moment';
10 function refFn(field, component) {
11 this[field] = component;
14 const Picker = React.createClass({
16 prefixCls: PropTypes.string,
17 clearText: PropTypes.string,
18 value: PropTypes.object,
19 defaultOpenValue: PropTypes.object,
20 disabled: PropTypes.bool,
21 allowEmpty: PropTypes.bool,
22 defaultValue: PropTypes.object,
24 defaultOpen: PropTypes.bool,
25 align: PropTypes.object,
26 placement: PropTypes.any,
27 transitionName: PropTypes.string,
28 getPopupContainer: PropTypes.func,
29 placeholder: PropTypes.string,
30 format: PropTypes.string,
31 showHour: PropTypes.bool,
32 showMinute: PropTypes.bool,
33 showSecond: PropTypes.bool,
34 style: PropTypes.object,
35 className: PropTypes.string,
36 disabledHours: PropTypes.func,
37 disabledMinutes: PropTypes.func,
38 disabledSeconds: PropTypes.func,
39 hideDisabledOptions: PropTypes.bool,
40 onChange: PropTypes.func,
41 onOpen: PropTypes.func,
42 onClose: PropTypes.func,
43 addon: PropTypes.func,
44 name: PropTypes.string,
45 autoComplete: PropTypes.string,
46 use12Hours: PropTypes.bool,
52 prefixCls: 'rc-time-picker',
57 defaultOpenValue: moment(),
63 disabledMinutes: noop,
64 disabledSeconds: noop,
65 hideDisabledOptions: false,
66 placement: 'bottomLeft',
76 this.saveInputRef = refFn.bind(this, 'picker');
77 this.savePanelRef = refFn.bind(this, 'panelInstance');
78 const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
85 componentWillReceiveProps(nextProps) {
86 const { value, open } = nextProps;
87 if ('value' in nextProps) {
92 if (open !== undefined) {
93 this.setState({ open });
97 onPanelChange(value) {
106 onVisibleChange(open) {
116 if (e.keyCode === 40) {
122 if (!('value' in this.props)) {
127 this.props.onChange(value);
131 const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
139 showMinute ? 'mm' : '',
140 showSecond ? 'ss' : '',
141 ].filter(item => !!item).join(':'));
143 return fmtString.concat(' a');
147 showHour ? 'HH' : '',
148 showMinute ? 'mm' : '',
149 showSecond ? 'ss' : '',
150 ].filter(item => !!item).join(':');
155 prefixCls, placeholder, disabledHours,
156 disabledMinutes, disabledSeconds, hideDisabledOptions,
157 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
162 clearText={clearText}
163 prefixCls={`${prefixCls}-panel`}
164 ref={this.savePanelRef}
165 value={this.state.value}
166 onChange={this.onPanelChange}
167 onClear={this.onPanelClear}
168 defaultOpenValue={defaultOpenValue}
170 showMinute={showMinute}
171 showSecond={showSecond}
173 allowEmpty={allowEmpty}
174 format={this.getFormat()}
175 placeholder={placeholder}
176 disabledHours={disabledHours}
177 disabledMinutes={disabledMinutes}
178 disabledSeconds={disabledSeconds}
179 hideDisabledOptions={hideDisabledOptions}
180 use12Hours={use12Hours}
187 const { onOpen, onClose } = this.props;
188 if (this.state.open !== open) {
189 if (!('open' in this.props)) {
190 this.setState({ open });
206 prefixCls, placeholder, placement, align,
207 disabled, transitionName, style, className, showHour,
208 showMinute, showSecond, getPopupContainer, name, autoComplete,
210 const { open, value } = this.state;
212 if (!showHour || !showMinute || !showSecond) {
213 popupClassName = `${prefixCls}-panel-narrow`;
217 prefixCls={`${prefixCls}-panel`}
218 popupClassName={popupClassName}
219 popup={this.getPanelElement()}
221 builtinPlacements={placements}
222 popupPlacement={placement}
223 action={disabled ? [] : ['click']}
225 getPopupContainer={getPopupContainer}
226 popupTransitionName={transitionName}
228 onPopupVisibleChange={this.onVisibleChange}
230 <span className={`${prefixCls} ${className}`} style={style}>
232 className={`${prefixCls}-input`}
233 ref={this.saveInputRef}
235 placeholder={placeholder}
238 onKeyDown={this.onKeyDown}
239 disabled={disabled} value={value && value.format(this.getFormat()) || ''}
240 autoComplete={autoComplete}
242 <span className={`${prefixCls}-icon`}/>
249 export default Picker;