1 import React, {PropTypes} from 'react';
2 import classnames from 'classnames';
3 import GregorianCalendar from 'gregorian-calendar';
4 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
6 import CommonMixin from '../mixin/CommonMixin';
7 import Header from './Header';
8 import Combobox from './Combobox';
13 function generateOptions(length) {
14 return Array.apply(null, {length: length}).map((item, index) => {
19 const Panel = React.createClass({
21 prefixCls: PropTypes.string,
22 defaultValue: PropTypes.object,
23 locale: PropTypes.object,
24 placeholder: PropTypes.string,
25 formatter: PropTypes.object,
26 hourOptions: PropTypes.array,
27 minuteOptions: PropTypes.array,
28 secondOptions: PropTypes.array,
29 onChange: PropTypes.func,
30 onClear: PropTypes.func,
33 mixins: [CommonMixin],
37 hourOptions: generateOptions(24),
38 minuteOptions: generateOptions(60),
39 secondOptions: generateOptions(60),
46 let defaultValue = this.props.defaultValue;
48 defaultValue = new GregorianCalendar(zhCn);
49 defaultValue.setTime(Date.now());
56 componentWillMount() {
57 const formatter = this.props.formatter;
58 const pattern = formatter.originalPattern;
59 if (pattern === 'HH:mm') {
60 this.showSecond = false;
61 } else if (pattern === 'mm:ss') {
62 this.showHour = false;
67 this.setState({ value: newValue });
68 this.props.onChange(newValue);
75 getPlaceholder(placeholder) {
80 const { locale } = this.props;
82 return locale.placeholdermmss;
83 } else if (!this.showSecond) {
84 return locale.placeholderHHmm;
86 return locale.placeholderHHmmss;
93 const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
94 const value = this.state.value || defaultValue;
95 const cls = classnames({ 'narrow': !this.showHour || !this.showSecond });
98 <div className={`${prefixCls}-panel ${cls}`}>
100 prefixCls={prefixCls}
101 gregorianTimePickerLocale={value.locale}
104 formatter={this.getFormatter()}
105 placeholder={this.getPlaceholder(placeholder)}
106 hourOptions={hourOptions}
107 minuteOptions={minuteOptions}
108 secondOptions={secondOptions}
109 onChange={this.onChange}
110 onClear={this.onClear}
114 prefixCls={prefixCls}
116 formatter={this.getFormatter()}
117 onChange={this.onChange}
118 showHour={this.showHour}
119 showSecond={this.showSecond}
120 hourOptions={hourOptions}
121 minuteOptions={minuteOptions}
122 secondOptions={secondOptions}
129 export default Panel;