aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/TimePanel.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/TimePanel.jsx')
-rw-r--r--src/TimePanel.jsx121
1 files changed, 121 insertions, 0 deletions
diff --git a/src/TimePanel.jsx b/src/TimePanel.jsx
new file mode 100644
index 0000000..dad8036
--- /dev/null
+++ b/src/TimePanel.jsx
@@ -0,0 +1,121 @@
1import React, {PropTypes} from 'react';
2import classnames from 'classnames';
3import CommonMixin from './mixin/CommonMixin';
4import Header from './module/Header';
5import Combobox from './module/Combobox';
6
7function noop() {
8}
9
10function generateOptions(length) {
11 return Array.apply(null, {length: length}).map((item, index) => {
12 return index;
13 });
14}
15
16const TimePanel = React.createClass({
17 propTypes: {
18 prefixCls: PropTypes.string,
19 defaultValue: PropTypes.object,
20 locale: PropTypes.object,
21 placeholder: PropTypes.string,
22 formatter: PropTypes.object,
23 hourOptions: PropTypes.array,
24 minuteOptions: PropTypes.array,
25 secondOptions: PropTypes.array,
26 onChange: PropTypes.func,
27 onClear: PropTypes.func,
28 },
29
30 mixins: [CommonMixin],
31
32 getDefaultProps() {
33 return {
34 hourOptions: generateOptions(24),
35 minuteOptions: generateOptions(60),
36 secondOptions: generateOptions(60),
37 onChange: noop,
38 onClear: noop,
39 };
40 },
41
42 getInitialState() {
43 return {
44 value: this.props.defaultValue,
45 };
46 },
47
48 componentWillMount() {
49 const formatter = this.props.formatter;
50 const pattern = formatter.originalPattern;
51 if (pattern === 'HH:mm') {
52 this.showSecond = false;
53 } else if (pattern === 'mm:ss') {
54 this.showHour = false;
55 }
56 },
57
58 onChange(newValue) {
59 this.setState({ value: newValue });
60 this.props.onChange(newValue);
61 },
62
63 onClear() {
64 this.props.onClear();
65 },
66
67 getPlaceholder(placeholder) {
68 if (placeholder) {
69 return placeholder;
70 }
71
72 const { locale } = this.props;
73 if (!this.showHour) {
74 return locale.placeholdermmss;
75 } else if (!this.showSecond) {
76 return locale.placeholderHHmm;
77 }
78 return locale.placeholderHHmmss;
79 },
80
81 showHour: true,
82 showSecond: true,
83
84 render() {
85 const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
86 const value = this.state.value || defaultValue;
87 const cls = classnames({ 'narrow': !this.showHour || !this.showSecond });
88
89 return (
90 <div className={`${prefixCls}-panel ${cls}`}>
91 <Header
92 prefixCls={prefixCls}
93 gregorianTimepickerLocale={defaultValue.locale}
94 locale={locale}
95 value={value}
96 formatter={this.getFormatter()}
97 placeholder={this.getPlaceholder(placeholder)}
98 hourOptions={hourOptions}
99 minuteOptions={minuteOptions}
100 secondOptions={secondOptions}
101 onChange={this.onChange}
102 onClear={this.onClear}
103 showClear
104 />
105 <Combobox
106 prefixCls={prefixCls}
107 value={value}
108 formatter={this.getFormatter()}
109 onChange={this.onChange}
110 showHour={this.showHour}
111 showSecond={this.showSecond}
112 hourOptions={hourOptions}
113 minuteOptions={minuteOptions}
114 secondOptions={secondOptions}
115 />
116 </div>
117 );
118 },
119});
120
121export default TimePanel;