]>
Commit | Line | Data |
---|---|---|
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 | showHour: true, | |
76 | showSecond: true, | |
77 | ||
78 | render() { | |
79 | const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; | |
80 | const value = this.state.value || defaultValue; | |
81 | const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); | |
82 | ||
83 | return ( | |
84 | <div className={`${prefixCls}-panel ${cls}`}> | |
85 | <Header | |
86 | prefixCls={prefixCls} | |
87 | gregorianTimePickerLocale={value.locale} | |
88 | locale={locale} | |
89 | value={value} | |
90 | formatter={this.getFormatter()} | |
91 | placeholder={placeholder} | |
92 | hourOptions={hourOptions} | |
93 | minuteOptions={minuteOptions} | |
94 | secondOptions={secondOptions} | |
95 | onChange={this.onChange} | |
96 | onClear={this.onClear} | |
97 | showClear | |
98 | /> | |
99 | <Combobox | |
100 | prefixCls={prefixCls} | |
101 | value={value} | |
102 | formatter={this.getFormatter()} | |
103 | onChange={this.onChange} | |
104 | showHour={this.showHour} | |
105 | showSecond={this.showSecond} | |
106 | hourOptions={hourOptions} | |
107 | minuteOptions={minuteOptions} | |
108 | secondOptions={secondOptions} | |
109 | /> | |
110 | </div> | |
111 | ); | |
112 | }, | |
113 | }); | |
114 | ||
115 | export default Panel; |