1 import React, { Component } from 'react';
2 import PropTypes from 'prop-types';
3 import Trigger from 'rc-trigger';
4 import Panel from './Panel';
5 import placements from './placements';
6 import moment from 'moment';
11 function refFn(field, component) {
12 this[field] = component;
15 export default class Picker extends Component {
17 prefixCls: PropTypes.string,
18 clearText: PropTypes.string,
19 value: PropTypes.object,
20 defaultOpenValue: PropTypes.object,
21 disabled: PropTypes.bool,
22 allowEmpty: PropTypes.bool,
23 defaultValue: PropTypes.object,
25 defaultOpen: PropTypes.bool,
26 align: PropTypes.object,
27 placement: PropTypes.any,
28 transitionName: PropTypes.string,
29 getPopupContainer: PropTypes.func,
30 placeholder: PropTypes.string,
31 format: PropTypes.string,
32 showHour: PropTypes.bool,
33 showMinute: PropTypes.bool,
34 showSecond: PropTypes.bool,
35 style: PropTypes.object,
36 className: PropTypes.string,
37 popupClassName: PropTypes.string,
38 disabledHours: PropTypes.func,
39 disabledMinutes: PropTypes.func,
40 disabledSeconds: PropTypes.func,
41 hideDisabledOptions: PropTypes.bool,
42 onChange: PropTypes.func,
43 onOpen: PropTypes.func,
44 onClose: PropTypes.func,
45 onFocus: PropTypes.func,
46 onBlur: PropTypes.func,
47 addon: PropTypes.func,
48 name: PropTypes.string,
49 autoComplete: PropTypes.string,
50 use12Hours: PropTypes.bool,
51 hourStep: PropTypes.number,
52 minuteStep: PropTypes.number,
53 secondStep: PropTypes.number,
54 focusOnOpen: PropTypes.bool,
55 onKeyDown: PropTypes.func,
56 autoFocus: PropTypes.bool,
59 static defaultProps = {
61 prefixCls: 'rc-time-picker',
67 defaultOpenValue: moment(),
73 disabledMinutes: noop,
74 disabledSeconds: noop,
75 hideDisabledOptions: false,
76 placement: 'bottomLeft',
90 this.saveInputRef = refFn.bind(this, 'picker');
91 this.savePanelRef = refFn.bind(this, 'panelInstance');
92 const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props;
99 componentWillReceiveProps(nextProps) {
100 const { value, open } = nextProps;
101 if ('value' in nextProps) {
106 if (open !== undefined) {
107 this.setState({ open });
111 onPanelChange = (value) => {
112 this.setValue(value);
115 onPanelClear = () => {
120 onVisibleChange = (open) => {
130 if (e.keyCode === 40) {
136 if (!('value' in this.props)) {
141 this.props.onChange(value);
145 const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
153 showMinute ? 'mm' : '',
154 showSecond ? 'ss' : '',
155 ].filter(item => !!item).join(':'));
157 return fmtString.concat(' a');
161 showHour ? 'HH' : '',
162 showMinute ? 'mm' : '',
163 showSecond ? 'ss' : '',
164 ].filter(item => !!item).join(':');
169 prefixCls, placeholder, disabledHours,
170 disabledMinutes, disabledSeconds, hideDisabledOptions,
171 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
172 addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
176 clearText={clearText}
177 prefixCls={`${prefixCls}-panel`}
178 ref={this.savePanelRef}
179 value={this.state.value}
180 onChange={this.onPanelChange}
181 onClear={this.onPanelClear}
182 defaultOpenValue={defaultOpenValue}
184 showMinute={showMinute}
185 showSecond={showSecond}
187 allowEmpty={allowEmpty}
188 format={this.getFormat()}
189 placeholder={placeholder}
190 disabledHours={disabledHours}
191 disabledMinutes={disabledMinutes}
192 disabledSeconds={disabledSeconds}
193 hideDisabledOptions={hideDisabledOptions}
194 use12Hours={use12Hours}
196 minuteStep={minuteStep}
197 secondStep={secondStep}
199 focusOnOpen={focusOnOpen}
200 onKeyDown={onKeyDown}
205 getPopupClassName() {
206 const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this.props;
207 let popupClassName = this.props.popupClassName;
208 // Keep it for old compatibility
209 if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
210 popupClassName += ` ${prefixCls}-panel-narrow`;
212 let selectColumnCount = 0;
214 selectColumnCount += 1;
217 selectColumnCount += 1;
220 selectColumnCount += 1;
223 selectColumnCount += 1;
225 popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`;
226 return popupClassName;
230 const { onOpen, onClose } = this.props;
231 if (this.state.open !== open) {
232 if (!('open' in this.props)) {
233 this.setState({ open });
253 prefixCls, placeholder, placement, align,
254 disabled, transitionName, style, className, getPopupContainer, name, autoComplete,
255 onFocus, onBlur, autoFocus,
257 const { open, value } = this.state;
258 const popupClassName = this.getPopupClassName();
261 prefixCls={`${prefixCls}-panel`}
262 popupClassName={popupClassName}
263 popup={this.getPanelElement()}
265 builtinPlacements={placements}
266 popupPlacement={placement}
267 action={disabled ? [] : ['click']}
269 getPopupContainer={getPopupContainer}
270 popupTransitionName={transitionName}
272 onPopupVisibleChange={this.onVisibleChange}
274 <span className={`${prefixCls} ${className}`} style={style}>
276 className={`${prefixCls}-input`}
277 ref={this.saveInputRef}
279 placeholder={placeholder}
281 onKeyDown={this.onKeyDown}
283 value={value && value.format(this.getFormat()) || ''}
284 autoComplete={autoComplete}
287 autoFocus={autoFocus}
289 <span className={`${prefixCls}-icon`}/>