aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
authorMG12 <wuzhao.mail@gmail.com>2015-12-12 20:34:00 +0800
committerMG12 <wuzhao.mail@gmail.com>2015-12-12 20:34:00 +0800
commit518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6 (patch)
tree664ef5377589dc3c4def7e732dfaa76e89da1fb1 /src
parent182e9fccc90ae709322b7cc314c8775a9d8d46b8 (diff)
downloadtime-picker-518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6.tar.gz
time-picker-518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6.tar.zst
time-picker-518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6.zip
add new options about disabled time
Diffstat (limited to 'src')
-rw-r--r--src/TimePicker.jsx20
-rw-r--r--src/module/Combobox.jsx31
-rw-r--r--src/module/Header.jsx18
-rw-r--r--src/module/Panel.jsx34
-rw-r--r--src/module/Select.jsx10
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';
2import Select from './Select'; 2import Select from './Select';
3import GregorianCalendar from 'gregorian-calendar'; 3import GregorianCalendar from 'gregorian-calendar';
4 4
5const formatOption = (option) => { 5const 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
12const Combobox = React.createClass({ 22const 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';
6function noop() { 6function noop() {
7} 7}
8 8
9function generateOptions(length) { 9function 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