Merge pull request #10 from react-component/1.0.0-alpha7

1.0.0 alpha7

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({
     style: PropTypes.object,
     className: PropTypes.string,
     showSecond: PropTypes.bool,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
@@ -54,6 +55,10 @@ const Picker = React.createClass({
       allowEmpty: true,
       showHour: true,
       showSecond: true,
+      disabledHours: noop,
+      disabledMinutes: noop,
+      disabledSeconds: noop,
+      hideDisabledOptions: false,
       placement: 'bottomLeft',
       onChange: noop,
       onOpen: noop,
@@ -145,7 +150,7 @@ const Picker = React.createClass({
   },
 
   getPanelElement() {
-    const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
+    const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
     let calendarLocale;
     if (value) {
       calendarLocale = value.locale;
@@ -170,9 +175,10 @@ const Picker = React.createClass({
         allowEmpty={allowEmpty}
         formatter={this.getFormatter()}
         placeholder={placeholder}
-        hourOptions={hourOptions}
-        minuteOptions={minuteOptions}
-        secondOptions={secondOptions}
+        disabledHours={disabledHours}
+        disabledMinutes={disabledMinutes}
+        disabledSeconds={disabledSeconds}
+        hideDisabledOptions={hideDisabledOptions}
       />
     );
   },
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';
 import Select from './Select';
 import GregorianCalendar from 'gregorian-calendar';
 
-const formatOption = (option) => {
+const formatOption = (option, disabledOptions) => {
+  let value = `${option}`;
   if (option < 10) {
-    return `0${option}`;
+    value = `0${option}`;
   }
-  return `${option}`;
+
+  let disabled = false;
+  if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
+    disabled = true;
+  }
+
+  return {
+    value,
+    disabled,
+  };
 };
 
 const Combobox = React.createClass({
@@ -21,6 +31,9 @@ const Combobox = React.createClass({
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
     onCurrentSelectPanelChange: PropTypes.func,
   },
 
@@ -47,14 +60,16 @@ const Combobox = React.createClass({
   },
 
   getHourSelect(hour) {
-    const { prefixCls, hourOptions, showHour } = this.props;
+    const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
     if (!showHour) {
       return null;
     }
+    const disabledOptions = disabledHours();
+
     return (
       <Select
         prefixCls={prefixCls}
-        options={hourOptions.map(option => formatOption(option))}
+        options={hourOptions.map(option => formatOption(option, disabledOptions))}
         selectedIndex={hourOptions.indexOf(hour)}
         type="hour"
         onSelect={this.onItemChange}
@@ -64,11 +79,13 @@ const Combobox = React.createClass({
   },
 
   getMinuteSelect(minute) {
-    const { prefixCls, minuteOptions } = this.props;
+    const { prefixCls, minuteOptions, disabledMinutes, value } = this.props;
+    const disabledOptions = disabledMinutes(value.getHourOfDay());
+
     return (
       <Select
         prefixCls={prefixCls}
-        options={minuteOptions.map(option => formatOption(option))}
+        options={minuteOptions.map(option => formatOption(option, disabledOptions))}
         selectedIndex={minuteOptions.indexOf(minute)}
         type="minute"
         onSelect={this.onItemChange}
@@ -78,14 +95,16 @@ const Combobox = React.createClass({
   },
 
   getSecondSelect(second) {
-    const { prefixCls, secondOptions, showSecond } = this.props;
+    const { prefixCls, secondOptions, disabledSeconds, showSecond, value } = this.props;
     if (!showSecond) {
       return null;
     }
+    const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+
     return (
       <Select
         prefixCls={prefixCls}
-        options={secondOptions.map(option => formatOption(option))}
+        options={secondOptions.map(option => formatOption(option, disabledOptions))}
         selectedIndex={secondOptions.indexOf(second)}
         type="second"
         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({
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
     onChange: PropTypes.func,
     onClear: PropTypes.func,
     onEsc: PropTypes.func,
@@ -54,7 +57,7 @@ const Header = React.createClass({
       str,
     });
     let value = null;
-    const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props;
+    const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty} = this.props;
 
     if (str) {
       const originalValue = this.props.value;
@@ -71,6 +74,7 @@ const Header = React.createClass({
       }
 
       if (value) {
+        // if time value not allowed, response warning.
         if (
           hourOptions.indexOf(value.getHourOfDay()) < 0 ||
           minuteOptions.indexOf(value.getMinutes()) < 0 ||
@@ -82,6 +86,21 @@ const Header = React.createClass({
           return;
         }
 
+        // if time value is disabled, response warning.
+        const disabledHourOptions = disabledHours();
+        const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+        const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+        if (
+          (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) ||
+          (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) ||
+          (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0)
+        ) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+
         if (originalValue && value) {
           if (
             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';
 function noop() {
 }
 
-function generateOptions(length) {
+function generateOptions(length, disabledOptions, hideDisabledOptions) {
   const arr = [];
-  for (let i = 0; i < length; i++) {
-    arr.push(i);
+  for (let value = 0; value < length; value++) {
+    if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
+      arr.push(value);
+    }
   }
   return arr;
 }
@@ -22,9 +24,10 @@ const Panel = React.createClass({
     placeholder: PropTypes.string,
     gregorianCalendarLocale: PropTypes.object,
     formatter: PropTypes.object,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
@@ -37,9 +40,6 @@ const Panel = React.createClass({
 
   getDefaultProps() {
     return {
-      hourOptions: generateOptions(24),
-      minuteOptions: generateOptions(60),
-      secondOptions: generateOptions(60),
       onChange: noop,
       onClear: noop,
     };
@@ -75,8 +75,15 @@ const Panel = React.createClass({
   },
 
   render() {
-    const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
+    const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
     const value = this.state.value;
+    const disabledHourOptions = disabledHours();
+    const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+    const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+    const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
+    const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
+    const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
+
     return (
       <div className={`${prefixCls}-inner`}>
         <Header
@@ -91,6 +98,9 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
           onChange={this.onChange}
           onClear={this.onClear}
           allowEmpty={allowEmpty}
@@ -106,6 +116,9 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
         />
       </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({
   getOptions() {
     const { options, selectedIndex, prefixCls } = this.props;
     return options.map((item, index) => {
-      const selected = selectedIndex === index;
       const cls = classnames({
-        [`${prefixCls}-select-option-selected`]: selected,
+        [`${prefixCls}-select-option-selected`]: selectedIndex === index,
+        [`${prefixCls}-select-option-disabled`]: item.disabled,
       });
-      return <li className={cls} key={index} onClick={this.onSelect.bind(this, +item)}>{item}</li>;
+      let onclick = null;
+      if (!item.disabled) {
+        onclick = this.onSelect.bind(this, +item.value);
+      }
+      return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>;
     });
   },