1 import React, {PropTypes} from 'react';
2 import Trigger from 'rc-trigger';
3 import Panel from './module/Panel';
4 import placements from './util/placements';
5 import CommonMixin from './mixin/CommonMixin';
6 import {getFormatter} from './util/index';
7 import defaultGregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
12 function refFn(field, component) {
13 this[field] = component;
16 const Picker = React.createClass({
18 prefixCls: PropTypes.string,
19 locale: PropTypes.object,
20 value: 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 gregorianCalendarLocale: PropTypes.object,
31 placeholder: PropTypes.string,
32 formatter: PropTypes.any,
33 showHour: PropTypes.bool,
34 style: PropTypes.object,
35 className: PropTypes.string,
36 showSecond: PropTypes.bool,
37 disabledHours: PropTypes.func,
38 disabledMinutes: PropTypes.func,
39 disabledSeconds: PropTypes.func,
40 hideDisabledOptions: PropTypes.bool,
41 onChange: PropTypes.func,
42 onOpen: PropTypes.func,
43 onClose: PropTypes.func,
46 mixins: [CommonMixin],
53 gregorianCalendarLocale: defaultGregorianCalendarLocale,
59 disabledMinutes: noop,
60 disabledSeconds: noop,
61 hideDisabledOptions: false,
62 placement: 'bottomLeft',
70 this.savePanelRef = refFn.bind(this, 'panelInstance');
71 const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
78 componentWillReceiveProps(nextProps) {
79 const { value, open } = nextProps;
80 if (value !== undefined) {
85 if (open !== undefined) {
86 this.setState({open});
90 onPanelChange(value) {
99 onVisibleChange(open) {
105 this.refs.picker.focus();
109 if (e.keyCode === 40) {
115 if (!('value' in this.props)) {
120 this.props.onChange(value);
124 const formatter = this.props.formatter;
125 const locale = this.props.locale;
127 if (formatter === this.lastFormatter) {
128 return this.normalFormatter;
130 this.normalFormatter = getFormatter(formatter, locale);
131 this.lastFormatter = formatter;
132 return this.normalFormatter;
134 if (!this.props.showSecond) {
135 if (!this.notShowSecondFormatter) {
136 this.notShowSecondFormatter = getFormatter('HH:mm', locale);
138 return this.notShowSecondFormatter;
140 if (!this.props.showHour) {
141 if (!this.notShowHourFormatter) {
142 this.notShowHourFormatter = getFormatter('mm:ss', locale);
144 return this.notShowHourFormatter;
146 if (!this.normalFormatter) {
147 this.normalFormatter = getFormatter('HH:mm:ss', locale);
149 return this.normalFormatter;
153 const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
156 calendarLocale = value.locale;
157 } else if (defaultValue) {
158 calendarLocale = defaultValue.locale;
160 calendarLocale = gregorianCalendarLocale;
164 prefixCls={`${prefixCls}-panel`}
165 ref={this.savePanelRef}
166 value={this.state.value}
167 onChange={this.onPanelChange}
168 gregorianCalendarLocale={calendarLocale}
169 onClear={this.onPanelClear}
170 defaultValue={defaultValue}
173 showSecond={showSecond}
175 allowEmpty={allowEmpty}
176 formatter={this.getFormatter()}
177 placeholder={placeholder}
178 disabledHours={disabledHours}
179 disabledMinutes={disabledMinutes}
180 disabledSeconds={disabledSeconds}
181 hideDisabledOptions={hideDisabledOptions}
186 setOpen(open, callback) {
187 const {onOpen, onClose} = this.props;
188 if (this.state.open !== open) {
204 const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
205 const { open, value } = this.state;
207 if (!showHour || !showSecond) {
208 popupClassName = `${prefixCls}-panel-narrow`;
212 prefixCls={`${prefixCls}-panel`}
213 popupClassName={popupClassName}
214 popup={this.getPanelElement()}
216 builtinPlacements={placements}
217 popupPlacement={placement}
218 action={disabled ? [] : ['click']}
220 getPopupContainer={getPopupContainer}
221 popupTransitionName={transitionName}
223 onPopupVisibleChange={this.onVisibleChange}
225 <span className={`${prefixCls} ${className}`} style={style}>
226 <input className={`${prefixCls}-input`}
227 ref="picker" type="text" placeholder={placeholder}
229 onKeyDown={this.onKeyDown}
230 disabled={disabled} value={value && this.getFormatter().format(value)}/>
231 <span className={`${prefixCls}-icon`}/>
238 export default Picker;