diff options
author | MG12 <wuzhao.mail@gmail.com> | 2015-11-17 22:16:15 +0800 |
---|---|---|
committer | MG12 <wuzhao.mail@gmail.com> | 2015-11-17 22:16:15 +0800 |
commit | 4acbf95c7d2693d73b0c8c021ad892b6529d4c06 (patch) | |
tree | 1e1780ba90895d8f5901472a7c67a77186741a4f /src/module/Panel.jsx | |
parent | 78637ac02ce6a469d2021736d3cb12e98c5edbe7 (diff) | |
download | time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.tar.gz time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.tar.zst time-picker-4acbf95c7d2693d73b0c8c021ad892b6529d4c06.zip |
Diffstat (limited to 'src/module/Panel.jsx')
-rw-r--r-- | src/module/Panel.jsx | 129 |
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 @@ | |||
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'; | ||
5 | |||
6 | import CommonMixin from '../mixin/CommonMixin'; | ||
7 | import Header from './Header'; | ||
8 | import Combobox from './Combobox'; | ||
9 | |||
10 | function noop() { | ||
11 | } | ||
12 | |||
13 | function generateOptions(length) { | ||
14 | return Array.apply(null, {length: length}).map((item, index) => { | ||
15 | return index; | ||
16 | }); | ||
17 | } | ||
18 | |||
19 | const 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 | |||
129 | export default Panel; | ||