]>
Commit | Line | Data |
---|---|---|
02de449a | 1 | import React, {PropTypes} from 'react'; |
2 | import classnames from 'classnames'; | |
4acbf95c M |
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'; | |
02de449a | 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 | ||
4acbf95c | 19 | const Panel = React.createClass({ |
02de449a | 20 | propTypes: { |
21 | prefixCls: PropTypes.string, | |
9f9f39e4 | 22 | value: PropTypes.object, |
02de449a | 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() { | |
9f9f39e4 | 46 | let value = this.props.value; |
47 | if (!value) { | |
48 | value = new GregorianCalendar(zhCn); | |
49 | value.setTime(Date.now()); | |
4acbf95c | 50 | } |
02de449a | 51 | return { |
9f9f39e4 | 52 | value, |
02de449a | 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 | ||
9f9f39e4 | 66 | componentWillReceiveProps(nextProps) { |
67 | const value = nextProps.value; | |
68 | if (value) { | |
69 | this.setState({ | |
70 | value, | |
71 | }); | |
72 | } | |
73 | }, | |
74 | ||
02de449a | 75 | onChange(newValue) { |
76 | this.setState({ value: newValue }); | |
77 | this.props.onChange(newValue); | |
78 | }, | |
79 | ||
80 | onClear() { | |
81 | this.props.onClear(); | |
82 | }, | |
83 | ||
02de449a | 84 | showHour: true, |
85 | showSecond: true, | |
86 | ||
87 | render() { | |
9f9f39e4 | 88 | const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; |
89 | const value = this.state.value; | |
02de449a | 90 | const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); |
91 | ||
92 | return ( | |
96a4cefc | 93 | <div className={`${prefixCls}-panel-inner ${cls}`}> |
02de449a | 94 | <Header |
95 | prefixCls={prefixCls} | |
4acbf95c | 96 | gregorianTimePickerLocale={value.locale} |
02de449a | 97 | locale={locale} |
98 | value={value} | |
99 | formatter={this.getFormatter()} | |
63541ed7 | 100 | placeholder={placeholder} |
02de449a | 101 | hourOptions={hourOptions} |
102 | minuteOptions={minuteOptions} | |
103 | secondOptions={secondOptions} | |
104 | onChange={this.onChange} | |
105 | onClear={this.onClear} | |
106 | showClear | |
107 | /> | |
108 | <Combobox | |
109 | prefixCls={prefixCls} | |
110 | value={value} | |
111 | formatter={this.getFormatter()} | |
112 | onChange={this.onChange} | |
113 | showHour={this.showHour} | |
114 | showSecond={this.showSecond} | |
115 | hourOptions={hourOptions} | |
116 | minuteOptions={minuteOptions} | |
117 | secondOptions={secondOptions} | |
118 | /> | |
119 | </div> | |
120 | ); | |
121 | }, | |
122 | }); | |
123 | ||
4acbf95c | 124 | export default Panel; |