diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/TimePicker.jsx | 20 | ||||
-rw-r--r-- | src/module/Combobox.jsx | 37 | ||||
-rw-r--r-- | src/module/Header.jsx | 21 | ||||
-rw-r--r-- | src/module/Panel.jsx | 33 | ||||
-rw-r--r-- | src/module/Select.jsx | 10 |
5 files changed, 91 insertions, 30 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 3e331f1..ad4e834 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -34,9 +34,10 @@ const Picker = React.createClass({ | |||
34 | style: PropTypes.object, | 34 | style: PropTypes.object, |
35 | className: PropTypes.string, | 35 | className: PropTypes.string, |
36 | showSecond: PropTypes.bool, | 36 | showSecond: PropTypes.bool, |
37 | hourOptions: PropTypes.array, | 37 | disabledHours: PropTypes.func, |
38 | minuteOptions: PropTypes.array, | 38 | disabledMinutes: PropTypes.func, |
39 | secondOptions: PropTypes.array, | 39 | disabledSeconds: PropTypes.func, |
40 | hideDisabledOptions: PropTypes.bool, | ||
40 | onChange: PropTypes.func, | 41 | onChange: PropTypes.func, |
41 | onOpen: PropTypes.func, | 42 | onOpen: PropTypes.func, |
42 | onClose: PropTypes.func, | 43 | onClose: PropTypes.func, |
@@ -54,6 +55,10 @@ const Picker = React.createClass({ | |||
54 | allowEmpty: true, | 55 | allowEmpty: true, |
55 | showHour: true, | 56 | showHour: true, |
56 | showSecond: true, | 57 | showSecond: true, |
58 | disabledHours: noop, | ||
59 | disabledMinutes: noop, | ||
60 | disabledSeconds: noop, | ||
61 | hideDisabledOptions: false, | ||
57 | placement: 'bottomLeft', | 62 | placement: 'bottomLeft', |
58 | onChange: noop, | 63 | onChange: noop, |
59 | onOpen: noop, | 64 | onOpen: noop, |
@@ -145,7 +150,7 @@ const Picker = React.createClass({ | |||
145 | }, | 150 | }, |
146 | 151 | ||
147 | getPanelElement() { | 152 | getPanelElement() { |
148 | const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props; | 153 | const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props; |
149 | let calendarLocale; | 154 | let calendarLocale; |
150 | if (value) { | 155 | if (value) { |
151 | calendarLocale = value.locale; | 156 | calendarLocale = value.locale; |
@@ -170,9 +175,10 @@ const Picker = React.createClass({ | |||
170 | allowEmpty={allowEmpty} | 175 | allowEmpty={allowEmpty} |
171 | formatter={this.getFormatter()} | 176 | formatter={this.getFormatter()} |
172 | placeholder={placeholder} | 177 | placeholder={placeholder} |
173 | hourOptions={hourOptions} | 178 | disabledHours={disabledHours} |
174 | minuteOptions={minuteOptions} | 179 | disabledMinutes={disabledMinutes} |
175 | secondOptions={secondOptions} | 180 | disabledSeconds={disabledSeconds} |
181 | hideDisabledOptions={hideDisabledOptions} | ||
176 | /> | 182 | /> |
177 | ); | 183 | ); |
178 | }, | 184 | }, |
diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx index a017ec9..7374b39 100644 --- a/src/module/Combobox.jsx +++ b/src/module/Combobox.jsx | |||
@@ -2,11 +2,21 @@ import React, {PropTypes} from 'react'; | |||
2 | import Select from './Select'; | 2 | import Select from './Select'; |
3 | import GregorianCalendar from 'gregorian-calendar'; | 3 | import GregorianCalendar from 'gregorian-calendar'; |
4 | 4 | ||
5 | const formatOption = (option) => { | 5 | const formatOption = (option, disabledOptions) => { |
6 | let value = `${option}`; | ||
6 | if (option < 10) { | 7 | if (option < 10) { |
7 | return `0${option}`; | 8 | value = `0${option}`; |
8 | } | 9 | } |
9 | return `${option}`; | 10 | |
11 | let disabled = false; | ||
12 | if (disabledOptions && disabledOptions.indexOf(option) >= 0) { | ||
13 | disabled = true; | ||
14 | } | ||
15 | |||
16 | return { | ||
17 | value, | ||
18 | disabled, | ||
19 | }; | ||
10 | }; | 20 | }; |
11 | 21 | ||
12 | const Combobox = React.createClass({ | 22 | const Combobox = React.createClass({ |
@@ -21,6 +31,9 @@ const Combobox = React.createClass({ | |||
21 | hourOptions: PropTypes.array, | 31 | hourOptions: PropTypes.array, |
22 | minuteOptions: PropTypes.array, | 32 | minuteOptions: PropTypes.array, |
23 | secondOptions: PropTypes.array, | 33 | secondOptions: PropTypes.array, |
34 | disabledHours: PropTypes.func, | ||
35 | disabledMinutes: PropTypes.func, | ||
36 | disabledSeconds: PropTypes.func, | ||
24 | onCurrentSelectPanelChange: PropTypes.func, | 37 | onCurrentSelectPanelChange: PropTypes.func, |
25 | }, | 38 | }, |
26 | 39 | ||
@@ -47,14 +60,16 @@ const Combobox = React.createClass({ | |||
47 | }, | 60 | }, |
48 | 61 | ||
49 | getHourSelect(hour) { | 62 | getHourSelect(hour) { |
50 | const { prefixCls, hourOptions, showHour } = this.props; | 63 | const { prefixCls, hourOptions, disabledHours, showHour } = this.props; |
51 | if (!showHour) { | 64 | if (!showHour) { |
52 | return null; | 65 | return null; |
53 | } | 66 | } |
67 | const disabledOptions = disabledHours(); | ||
68 | |||
54 | return ( | 69 | return ( |
55 | <Select | 70 | <Select |
56 | prefixCls={prefixCls} | 71 | prefixCls={prefixCls} |
57 | options={hourOptions.map(option => formatOption(option))} | 72 | options={hourOptions.map(option => formatOption(option, disabledOptions))} |
58 | selectedIndex={hourOptions.indexOf(hour)} | 73 | selectedIndex={hourOptions.indexOf(hour)} |
59 | type="hour" | 74 | type="hour" |
60 | onSelect={this.onItemChange} | 75 | onSelect={this.onItemChange} |
@@ -64,11 +79,13 @@ const Combobox = React.createClass({ | |||
64 | }, | 79 | }, |
65 | 80 | ||
66 | getMinuteSelect(minute) { | 81 | getMinuteSelect(minute) { |
67 | const { prefixCls, minuteOptions } = this.props; | 82 | const { prefixCls, minuteOptions, disabledMinutes, value } = this.props; |
83 | const disabledOptions = disabledMinutes(value.getHourOfDay()); | ||
84 | |||
68 | return ( | 85 | return ( |
69 | <Select | 86 | <Select |
70 | prefixCls={prefixCls} | 87 | prefixCls={prefixCls} |
71 | options={minuteOptions.map(option => formatOption(option))} | 88 | options={minuteOptions.map(option => formatOption(option, disabledOptions))} |
72 | selectedIndex={minuteOptions.indexOf(minute)} | 89 | selectedIndex={minuteOptions.indexOf(minute)} |
73 | type="minute" | 90 | type="minute" |
74 | onSelect={this.onItemChange} | 91 | onSelect={this.onItemChange} |
@@ -78,14 +95,16 @@ const Combobox = React.createClass({ | |||
78 | }, | 95 | }, |
79 | 96 | ||
80 | getSecondSelect(second) { | 97 | getSecondSelect(second) { |
81 | const { prefixCls, secondOptions, showSecond } = this.props; | 98 | const { prefixCls, secondOptions, disabledSeconds, showSecond, value } = this.props; |
82 | if (!showSecond) { | 99 | if (!showSecond) { |
83 | return null; | 100 | return null; |
84 | } | 101 | } |
102 | const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); | ||
103 | |||
85 | return ( | 104 | return ( |
86 | <Select | 105 | <Select |
87 | prefixCls={prefixCls} | 106 | prefixCls={prefixCls} |
88 | options={secondOptions.map(option => formatOption(option))} | 107 | options={secondOptions.map(option => formatOption(option, disabledOptions))} |
89 | selectedIndex={secondOptions.indexOf(second)} | 108 | selectedIndex={secondOptions.indexOf(second)} |
90 | type="second" | 109 | type="second" |
91 | onSelect={this.onItemChange} | 110 | onSelect={this.onItemChange} |
diff --git a/src/module/Header.jsx b/src/module/Header.jsx index ef88948..9a048dc 100644 --- a/src/module/Header.jsx +++ b/src/module/Header.jsx | |||
@@ -13,6 +13,9 @@ const Header = React.createClass({ | |||
13 | hourOptions: PropTypes.array, | 13 | hourOptions: PropTypes.array, |
14 | minuteOptions: PropTypes.array, | 14 | minuteOptions: PropTypes.array, |
15 | secondOptions: PropTypes.array, | 15 | secondOptions: PropTypes.array, |
16 | disabledHours: PropTypes.func, | ||
17 | disabledMinutes: PropTypes.func, | ||
18 | disabledSeconds: PropTypes.func, | ||
16 | onChange: PropTypes.func, | 19 | onChange: PropTypes.func, |
17 | onClear: PropTypes.func, | 20 | onClear: PropTypes.func, |
18 | onEsc: PropTypes.func, | 21 | onEsc: PropTypes.func, |
@@ -54,7 +57,7 @@ const Header = React.createClass({ | |||
54 | str, | 57 | str, |
55 | }); | 58 | }); |
56 | let value = null; | 59 | let value = null; |
57 | const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props; | 60 | const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty} = this.props; |
58 | 61 | ||
59 | if (str) { | 62 | if (str) { |
60 | const originalValue = this.props.value; | 63 | const originalValue = this.props.value; |
@@ -71,6 +74,7 @@ const Header = React.createClass({ | |||
71 | } | 74 | } |
72 | 75 | ||
73 | if (value) { | 76 | if (value) { |
77 | // if time value not allowed, response warning. | ||
74 | if ( | 78 | if ( |
75 | hourOptions.indexOf(value.getHourOfDay()) < 0 || | 79 | hourOptions.indexOf(value.getHourOfDay()) < 0 || |
76 | minuteOptions.indexOf(value.getMinutes()) < 0 || | 80 | minuteOptions.indexOf(value.getMinutes()) < 0 || |
@@ -82,6 +86,21 @@ const Header = React.createClass({ | |||
82 | return; | 86 | return; |
83 | } | 87 | } |
84 | 88 | ||
89 | // if time value is disabled, response warning. | ||
90 | const disabledHourOptions = disabledHours(); | ||
91 | const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); | ||
92 | const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); | ||
93 | if ( | ||
94 | (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) || | ||
95 | (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) || | ||
96 | (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0) | ||
97 | ) { | ||
98 | this.setState({ | ||
99 | invalid: true, | ||
100 | }); | ||
101 | return; | ||
102 | } | ||
103 | |||
85 | if (originalValue && value) { | 104 | if (originalValue && value) { |
86 | if ( | 105 | if ( |
87 | originalValue.getHourOfDay() !== value.getHourOfDay() || | 106 | originalValue.getHourOfDay() !== value.getHourOfDay() || |
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 63823ee..94d3842 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx | |||
@@ -6,10 +6,12 @@ import Combobox from './Combobox'; | |||
6 | function noop() { | 6 | function noop() { |
7 | } | 7 | } |
8 | 8 | ||
9 | function generateOptions(length) { | 9 | function generateOptions(length, disabledOptions, hideDisabledOptions) { |
10 | const arr = []; | 10 | const arr = []; |
11 | for (let i = 0; i < length; i++) { | 11 | for (let value = 0; value < length; value++) { |
12 | arr.push(i); | 12 | if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { |
13 | arr.push(value); | ||
14 | } | ||
13 | } | 15 | } |
14 | return arr; | 16 | return arr; |
15 | } | 17 | } |
@@ -22,9 +24,10 @@ const Panel = React.createClass({ | |||
22 | placeholder: PropTypes.string, | 24 | placeholder: PropTypes.string, |
23 | gregorianCalendarLocale: PropTypes.object, | 25 | gregorianCalendarLocale: PropTypes.object, |
24 | formatter: PropTypes.object, | 26 | formatter: PropTypes.object, |
25 | hourOptions: PropTypes.array, | 27 | disabledHours: PropTypes.func, |
26 | minuteOptions: PropTypes.array, | 28 | disabledMinutes: PropTypes.func, |
27 | secondOptions: PropTypes.array, | 29 | disabledSeconds: PropTypes.func, |
30 | hideDisabledOptions: PropTypes.bool, | ||
28 | onChange: PropTypes.func, | 31 | onChange: PropTypes.func, |
29 | onEsc: PropTypes.func, | 32 | onEsc: PropTypes.func, |
30 | allowEmpty: PropTypes.bool, | 33 | allowEmpty: PropTypes.bool, |
@@ -37,9 +40,6 @@ const Panel = React.createClass({ | |||
37 | 40 | ||
38 | getDefaultProps() { | 41 | getDefaultProps() { |
39 | return { | 42 | return { |
40 | hourOptions: generateOptions(24), | ||
41 | minuteOptions: generateOptions(60), | ||
42 | secondOptions: generateOptions(60), | ||
43 | onChange: noop, | 43 | onChange: noop, |
44 | onClear: noop, | 44 | onClear: noop, |
45 | }; | 45 | }; |
@@ -75,8 +75,15 @@ const Panel = React.createClass({ | |||
75 | }, | 75 | }, |
76 | 76 | ||
77 | render() { | 77 | render() { |
78 | const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; | 78 | const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; |
79 | const value = this.state.value; | 79 | const value = this.state.value; |
80 | const disabledHourOptions = disabledHours(); | ||
81 | const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); | ||
82 | const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); | ||
83 | const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions); | ||
84 | const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions); | ||
85 | const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); | ||
86 | |||
80 | return ( | 87 | return ( |
81 | <div className={`${prefixCls}-inner`}> | 88 | <div className={`${prefixCls}-inner`}> |
82 | <Header | 89 | <Header |
@@ -91,6 +98,9 @@ const Panel = React.createClass({ | |||
91 | hourOptions={hourOptions} | 98 | hourOptions={hourOptions} |
92 | minuteOptions={minuteOptions} | 99 | minuteOptions={minuteOptions} |
93 | secondOptions={secondOptions} | 100 | secondOptions={secondOptions} |
101 | disabledHours={disabledHours} | ||
102 | disabledMinutes={disabledMinutes} | ||
103 | disabledSeconds={disabledSeconds} | ||
94 | onChange={this.onChange} | 104 | onChange={this.onChange} |
95 | onClear={this.onClear} | 105 | onClear={this.onClear} |
96 | allowEmpty={allowEmpty} | 106 | allowEmpty={allowEmpty} |
@@ -106,6 +116,9 @@ const Panel = React.createClass({ | |||
106 | hourOptions={hourOptions} | 116 | hourOptions={hourOptions} |
107 | minuteOptions={minuteOptions} | 117 | minuteOptions={minuteOptions} |
108 | secondOptions={secondOptions} | 118 | secondOptions={secondOptions} |
119 | disabledHours={disabledHours} | ||
120 | disabledMinutes={disabledMinutes} | ||
121 | disabledSeconds={disabledSeconds} | ||
109 | onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} | 122 | onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} |
110 | /> | 123 | /> |
111 | </div> | 124 | </div> |
diff --git a/src/module/Select.jsx b/src/module/Select.jsx index 3659692..ab10789 100644 --- a/src/module/Select.jsx +++ b/src/module/Select.jsx | |||
@@ -51,11 +51,15 @@ const Select = React.createClass({ | |||
51 | getOptions() { | 51 | getOptions() { |
52 | const { options, selectedIndex, prefixCls } = this.props; | 52 | const { options, selectedIndex, prefixCls } = this.props; |
53 | return options.map((item, index) => { | 53 | return options.map((item, index) => { |
54 | const selected = selectedIndex === index; | ||
55 | const cls = classnames({ | 54 | const cls = classnames({ |
56 | [`${prefixCls}-select-option-selected`]: selected, | 55 | [`${prefixCls}-select-option-selected`]: selectedIndex === index, |
56 | [`${prefixCls}-select-option-disabled`]: item.disabled, | ||
57 | }); | 57 | }); |
58 | return <li className={cls} key={index} onClick={this.onSelect.bind(this, +item)}>{item}</li>; | 58 | let onclick = null; |
59 | if (!item.disabled) { | ||
60 | onclick = this.onSelect.bind(this, +item.value); | ||
61 | } | ||
62 | return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>; | ||
59 | }); | 63 | }); |
60 | }, | 64 | }, |
61 | 65 | ||