]>
Commit | Line | Data |
---|---|---|
02de449a | 1 | import React, {PropTypes} from 'react'; |
4acbf95c M |
2 | import CommonMixin from '../mixin/CommonMixin'; |
3 | import Header from './Header'; | |
4 | import Combobox from './Combobox'; | |
02de449a | 5 | |
6 | function noop() { | |
7 | } | |
8 | ||
518b852e | 9 | function generateOptions(length, disabledOptions, hideDisabledOptions) { |
98275fd8 | 10 | const arr = []; |
518b852e | 11 | for (let value = 0; value < length; value++) { |
0e62bf0b | 12 | if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { |
518b852e M |
13 | arr.push(value); |
14 | } | |
98275fd8 | 15 | } |
16 | return arr; | |
02de449a | 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, | |
8133e8cf | 25 | gregorianCalendarLocale: PropTypes.object, |
02de449a | 26 | formatter: PropTypes.object, |
518b852e M |
27 | disabledHours: PropTypes.array, |
28 | disabledMinutes: PropTypes.array, | |
29 | disabledSeconds: PropTypes.array, | |
30 | hideDisabledOptions: PropTypes.bool, | |
02de449a | 31 | onChange: PropTypes.func, |
8133e8cf | 32 | onEsc: PropTypes.func, |
33 | allowEmpty: PropTypes.bool, | |
34 | showHour: PropTypes.bool, | |
35 | showSecond: PropTypes.bool, | |
02de449a | 36 | onClear: PropTypes.func, |
37 | }, | |
38 | ||
39 | mixins: [CommonMixin], | |
40 | ||
41 | getDefaultProps() { | |
42 | return { | |
518b852e M |
43 | disabledHours: null, |
44 | disabledMinutes: null, | |
45 | disabledSeconds: null, | |
46 | hideDisabledOptions: false, | |
02de449a | 47 | onChange: noop, |
48 | onClear: noop, | |
49 | }; | |
50 | }, | |
51 | ||
52 | getInitialState() { | |
53 | return { | |
8133e8cf | 54 | value: this.props.value, |
182e9fcc | 55 | selectionRange: [], |
02de449a | 56 | }; |
57 | }, | |
58 | ||
9f9f39e4 | 59 | componentWillReceiveProps(nextProps) { |
60 | const value = nextProps.value; | |
61 | if (value) { | |
62 | this.setState({ | |
63 | value, | |
64 | }); | |
65 | } | |
66 | }, | |
67 | ||
02de449a | 68 | onChange(newValue) { |
69 | this.setState({ value: newValue }); | |
70 | this.props.onChange(newValue); | |
71 | }, | |
72 | ||
73 | onClear() { | |
74 | this.props.onClear(); | |
75 | }, | |
76 | ||
182e9fcc | 77 | onCurrentSelectPanelChange(currentSelectPanel) { |
78 | this.setState({ currentSelectPanel }); | |
79 | }, | |
80 | ||
02de449a | 81 | render() { |
518b852e | 82 | const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; |
9f9f39e4 | 83 | const value = this.state.value; |
518b852e M |
84 | const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions); |
85 | const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions); | |
86 | const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions); | |
87 | ||
02de449a | 88 | return ( |
8133e8cf | 89 | <div className={`${prefixCls}-inner`}> |
02de449a | 90 | <Header |
91 | prefixCls={prefixCls} | |
8133e8cf | 92 | gregorianCalendarLocale={gregorianCalendarLocale} |
02de449a | 93 | locale={locale} |
94 | value={value} | |
182e9fcc | 95 | currentSelectPanel={this.state.currentSelectPanel} |
8133e8cf | 96 | onEsc={this.props.onEsc} |
97 | formatter={formatter} | |
63541ed7 | 98 | placeholder={placeholder} |
02de449a | 99 | hourOptions={hourOptions} |
100 | minuteOptions={minuteOptions} | |
101 | secondOptions={secondOptions} | |
518b852e M |
102 | disabledHours={disabledHours} |
103 | disabledMinutes={disabledMinutes} | |
104 | disabledSeconds={disabledSeconds} | |
02de449a | 105 | onChange={this.onChange} |
106 | onClear={this.onClear} | |
8133e8cf | 107 | allowEmpty={allowEmpty} |
02de449a | 108 | /> |
109 | <Combobox | |
110 | prefixCls={prefixCls} | |
111 | value={value} | |
8133e8cf | 112 | gregorianCalendarLocale={gregorianCalendarLocale} |
113 | formatter={formatter} | |
02de449a | 114 | onChange={this.onChange} |
8133e8cf | 115 | showHour={showHour} |
116 | showSecond={showSecond} | |
02de449a | 117 | hourOptions={hourOptions} |
118 | minuteOptions={minuteOptions} | |
119 | secondOptions={secondOptions} | |
518b852e M |
120 | disabledHours={disabledHours} |
121 | disabledMinutes={disabledMinutes} | |
122 | disabledSeconds={disabledSeconds} | |
182e9fcc | 123 | onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} |
02de449a | 124 | /> |
125 | </div> | |
126 | ); | |
127 | }, | |
128 | }); | |
129 | ||
4acbf95c | 130 | export default Panel; |