aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module/Panel.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/module/Panel.jsx')
-rw-r--r--src/module/Panel.jsx129
1 files changed, 129 insertions, 0 deletions
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
new file mode 100644
index 0000000..4220da8
--- /dev/null
+++ b/src/module/Panel.jsx
@@ -0,0 +1,129 @@
1import React, {PropTypes} from 'react';
2import classnames from 'classnames';
3import GregorianCalendar from 'gregorian-calendar';
4import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
5
6import CommonMixin from '../mixin/CommonMixin';
7import Header from './Header';
8import Combobox from './Combobox';
9
10function noop() {
11}
12
13function generateOptions(length) {
14 return Array.apply(null, {length: length}).map((item, index) => {
15 return index;
16 });
17}
18
19const Panel = React.createClass({
20 propTypes: {
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,
31 },
32
33 mixins: [CommonMixin],
34
35 getDefaultProps() {
36 return {
37 hourOptions: generateOptions(24),
38 minuteOptions: generateOptions(60),
39 secondOptions: generateOptions(60),
40 onChange: noop,
41 onClear: noop,
42 };
43 },
44
45 getInitialState() {
46 let defaultValue = this.props.defaultValue;
47 if (!defaultValue) {
48 defaultValue = new GregorianCalendar(zhCn);
49 defaultValue.setTime(Date.now());
50 }
51 return {
52 value: defaultValue,
53 };
54 },
55
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;
63 }
64 },
65
66 onChange(newValue) {
67 this.setState({ value: newValue });
68 this.props.onChange(newValue);
69 },
70
71 onClear() {
72 this.props.onClear();
73 },
74
75 getPlaceholder(placeholder) {
76 if (placeholder) {
77 return placeholder;
78 }
79
80 const { locale } = this.props;
81 if (!this.showHour) {
82 return locale.placeholdermmss;
83 } else if (!this.showSecond) {
84 return locale.placeholderHHmm;
85 }
86 return locale.placeholderHHmmss;
87 },
88
89 showHour: true,
90 showSecond: true,
91
92 render() {
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 });
96
97 return (
98 <div className={`${prefixCls}-panel ${cls}`}>
99 <Header
100 prefixCls={prefixCls}
101 gregorianTimePickerLocale={value.locale}
102 locale={locale}
103 value={value}
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}
111 showClear
112 />
113 <Combobox
114 prefixCls={prefixCls}
115 value={value}
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}
123 />
124 </div>
125 );
126 },
127});
128
129export default Panel;