diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/TimePicker.jsx | 20 | ||||
-rw-r--r-- | src/module/Combobox.jsx | 31 | ||||
-rw-r--r-- | src/module/Header.jsx | 18 | ||||
-rw-r--r-- | src/module/Panel.jsx | 34 | ||||
-rw-r--r-- | src/module/Select.jsx | 10 |
5 files changed, 83 insertions, 30 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 3e331f1..fb855e2 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.array, |
38 | minuteOptions: PropTypes.array, | 38 | disabledMinutes: PropTypes.array, |
39 | secondOptions: PropTypes.array, | 39 | disabledSeconds: PropTypes.array, |
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: null, | ||
59 | disabledMinutes: null, | ||
60 | disabledSeconds: null, | ||
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..27a8226 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.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.array, | ||
35 | disabledMinutes: PropTypes.array, | ||
36 | disabledSeconds: PropTypes.array, | ||
24 | onCurrentSelectPanelChange: PropTypes.func, | 37 | onCurrentSelectPanelChange: PropTypes.func, |
25 | }, | 38 | }, |
26 | 39 | ||
@@ -47,14 +60,14 @@ 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 | } |
54 | return ( | 67 | return ( |
55 | <Select | 68 | <Select |
56 | prefixCls={prefixCls} | 69 | prefixCls={prefixCls} |
57 | options={hourOptions.map(option => formatOption(option))} | 70 | options={hourOptions.map(option => formatOption(option, disabledHours))} |
58 | selectedIndex={hourOptions.indexOf(hour)} | 71 | selectedIndex={hourOptions.indexOf(hour)} |
59 | type="hour" | 72 | type="hour" |
60 | onSelect={this.onItemChange} | 73 | onSelect={this.onItemChange} |
@@ -64,11 +77,11 @@ const Combobox = React.createClass({ | |||
64 | }, | 77 | }, |
65 | 78 | ||
66 | getMinuteSelect(minute) { | 79 | getMinuteSelect(minute) { |
67 | const { prefixCls, minuteOptions } = this.props; | 80 | const { prefixCls, minuteOptions, disabledMinutes } = this.props; |
68 | return ( | 81 | return ( |
69 | <Select | 82 | <Select |
70 | prefixCls={prefixCls} | 83 | prefixCls={prefixCls} |
71 | options={minuteOptions.map(option => formatOption(option))} | 84 | options={minuteOptions.map(option => formatOption(option, disabledMinutes))} |
72 | selectedIndex={minuteOptions.indexOf(minute)} | 85 | selectedIndex={minuteOptions.indexOf(minute)} |
73 | type="minute" | 86 | type="minute" |
74 | onSelect={this.onItemChange} | 87 | onSelect={this.onItemChange} |
@@ -78,14 +91,14 @@ const Combobox = React.createClass({ | |||
78 | }, | 91 | }, |
79 | 92 | ||
80 | getSecondSelect(second) { | 93 | getSecondSelect(second) { |
81 | const { prefixCls, secondOptions, showSecond } = this.props; | 94 | const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props; |
82 | if (!showSecond) { | 95 | if (!showSecond) { |
83 | return null; | 96 | return null; |
84 | } | 97 | } |
85 | return ( | 98 | return ( |
86 | <Select | 99 | <Select |
87 | prefixCls={prefixCls} | 100 | prefixCls={prefixCls} |
88 | options={secondOptions.map(option => formatOption(option))} | 101 | options={secondOptions.map(option => formatOption(option, disabledSeconds))} |
89 | selectedIndex={secondOptions.indexOf(second)} | 102 | selectedIndex={secondOptions.indexOf(second)} |
90 | type="second" | 103 | type="second" |
91 | onSelect={this.onItemChange} | 104 | onSelect={this.onItemChange} |
diff --git a/src/module/Header.jsx b/src/module/Header.jsx index ef88948..c2f8eef 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.array, | ||
17 | disabledMinutes: PropTypes.array, | ||
18 | disabledSeconds: PropTypes.array, | ||
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,18 @@ const Header = React.createClass({ | |||
82 | return; | 86 | return; |
83 | } | 87 | } |
84 | 88 | ||
89 | // if time value is disabled, response warning. | ||
90 | if ( | ||
91 | disabledHours.indexOf(value.getHourOfDay()) >= 0 || | ||
92 | disabledMinutes.indexOf(value.getMinutes()) >= 0 || | ||
93 | disabledSeconds.indexOf(value.getSeconds()) >= 0 | ||
94 | ) { | ||
95 | this.setState({ | ||
96 | invalid: true, | ||
97 | }); | ||
98 | return; | ||
99 | } | ||
100 | |||
85 | if (originalValue && value) { | 101 | if (originalValue && value) { |
86 | if ( | 102 | if ( |
87 | originalValue.getHourOfDay() !== value.getHourOfDay() || | 103 | originalValue.getHourOfDay() !== value.getHourOfDay() || |
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 63823ee..72934e5 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.array, |
26 | minuteOptions: PropTypes.array, | 28 | disabledMinutes: PropTypes.array, |
27 | secondOptions: PropTypes.array, | 29 | disabledSeconds: PropTypes.array, |
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,10 @@ const Panel = React.createClass({ | |||
37 | 40 | ||
38 | getDefaultProps() { | 41 | getDefaultProps() { |
39 | return { | 42 | return { |
40 | hourOptions: generateOptions(24), | 43 | disabledHours: null, |
41 | minuteOptions: generateOptions(60), | 44 | disabledMinutes: null, |
42 | secondOptions: generateOptions(60), | 45 | disabledSeconds: null, |
46 | hideDisabledOptions: false, | ||
43 | onChange: noop, | 47 | onChange: noop, |
44 | onClear: noop, | 48 | onClear: noop, |
45 | }; | 49 | }; |
@@ -75,8 +79,12 @@ const Panel = React.createClass({ | |||
75 | }, | 79 | }, |
76 | 80 | ||
77 | render() { | 81 | render() { |
78 | const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; | 82 | const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; |
79 | const value = this.state.value; | 83 | const value = this.state.value; |
84 | const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions); | ||
85 | const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions); | ||
86 | const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions); | ||
87 | |||
80 | return ( | 88 | return ( |
81 | <div className={`${prefixCls}-inner`}> | 89 | <div className={`${prefixCls}-inner`}> |
82 | <Header | 90 | <Header |
@@ -91,6 +99,9 @@ const Panel = React.createClass({ | |||
91 | hourOptions={hourOptions} | 99 | hourOptions={hourOptions} |
92 | minuteOptions={minuteOptions} | 100 | minuteOptions={minuteOptions} |
93 | secondOptions={secondOptions} | 101 | secondOptions={secondOptions} |
102 | disabledHours={disabledHours} | ||
103 | disabledMinutes={disabledMinutes} | ||
104 | disabledSeconds={disabledSeconds} | ||
94 | onChange={this.onChange} | 105 | onChange={this.onChange} |
95 | onClear={this.onClear} | 106 | onClear={this.onClear} |
96 | allowEmpty={allowEmpty} | 107 | allowEmpty={allowEmpty} |
@@ -106,6 +117,9 @@ const Panel = React.createClass({ | |||
106 | hourOptions={hourOptions} | 117 | hourOptions={hourOptions} |
107 | minuteOptions={minuteOptions} | 118 | minuteOptions={minuteOptions} |
108 | secondOptions={secondOptions} | 119 | secondOptions={secondOptions} |
120 | disabledHours={disabledHours} | ||
121 | disabledMinutes={disabledMinutes} | ||
122 | disabledSeconds={disabledSeconds} | ||
109 | onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} | 123 | onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} |
110 | /> | 124 | /> |
111 | </div> | 125 | </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 | ||