]>
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, |
71bd9bc1 M |
27 | disabledHours: PropTypes.func, |
28 | disabledMinutes: PropTypes.func, | |
29 | disabledSeconds: PropTypes.func, | |
518b852e | 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 { | |
04de55f8 | 43 | prefixCls: 'rc-time-picker-panel', |
02de449a | 44 | onChange: noop, |
45 | onClear: noop, | |
46 | }; | |
47 | }, | |
48 | ||
49 | getInitialState() { | |
50 | return { | |
8133e8cf | 51 | value: this.props.value, |
182e9fcc | 52 | selectionRange: [], |
02de449a | 53 | }; |
54 | }, | |
55 | ||
9f9f39e4 | 56 | componentWillReceiveProps(nextProps) { |
57 | const value = nextProps.value; | |
58 | if (value) { | |
59 | this.setState({ | |
60 | value, | |
61 | }); | |
62 | } | |
63 | }, | |
64 | ||
02de449a | 65 | onChange(newValue) { |
66 | this.setState({ value: newValue }); | |
67 | this.props.onChange(newValue); | |
68 | }, | |
69 | ||
70 | onClear() { | |
71 | this.props.onClear(); | |
72 | }, | |
73 | ||
182e9fcc | 74 | onCurrentSelectPanelChange(currentSelectPanel) { |
75 | this.setState({ currentSelectPanel }); | |
76 | }, | |
77 | ||
02de449a | 78 | render() { |
518b852e | 79 | const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; |
9f9f39e4 | 80 | const value = this.state.value; |
71bd9bc1 | 81 | const disabledHourOptions = disabledHours(); |
aed96fd6 M |
82 | const disabledMinuteOptions = disabledMinutes(value ? value.getHourOfDay() : null); |
83 | const disabledSecondOptions = disabledSeconds(value ? value.getHourOfDay() : null, value ? value.getMinutes() : null); | |
71bd9bc1 M |
84 | const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions); |
85 | const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions); | |
86 | const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); | |
518b852e | 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; |