aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module
diff options
context:
space:
mode:
authorMG12 <wuzhao.mail@gmail.com>2015-12-16 12:19:56 +0800
committerMG12 <wuzhao.mail@gmail.com>2015-12-16 12:19:56 +0800
commit700c77e4f32e2ec18f3c63b176bf83bac24cdb74 (patch)
treedd7b0d090e946586dbc3bb5268a0a5b5619f81e4 /src/module
parent182e9fccc90ae709322b7cc314c8775a9d8d46b8 (diff)
parentbec70d57f3ef17ed1ef29c660936be235804061e (diff)
downloadtime-picker-700c77e4f32e2ec18f3c63b176bf83bac24cdb74.tar.gz
time-picker-700c77e4f32e2ec18f3c63b176bf83bac24cdb74.tar.zst
time-picker-700c77e4f32e2ec18f3c63b176bf83bac24cdb74.zip
Merge pull request #10 from react-component/1.0.0-alpha7
1.0.0 alpha7
Diffstat (limited to 'src/module')
-rw-r--r--src/module/Combobox.jsx37
-rw-r--r--src/module/Header.jsx21
-rw-r--r--src/module/Panel.jsx33
-rw-r--r--src/module/Select.jsx10
4 files changed, 78 insertions, 23 deletions
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';
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 && 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.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';
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.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