Add hourStep, minuteStep and secondStep props to control intervals in picker

diff --git a/README.md b/README.md
index a2758b9faec55ea530b2692da26b0a9ae0e38201..26e05fc4a992d145a3a25a8e380d4dfd0ef80e8c 100644 (file)
--- a/README.md
+++ b/README.md
@@ -77,6 +77,9 @@ API
 | name                    | String                            | - | sets the name of the generated input |
 | onOpen                  | Function({ open })                |   | when TimePicker panel is opened      |
 | onClose                 | Function({ open })                |   | when TimePicker panel is opened      |
+| hourStep                | Number                            | 1 | interval between hours in picker  |
+| minuteStep              | Number                            | 1 | interval between minutes in picker  |
+| secondStep              | Number                            | 1 | interval between seconds in picker  |
 
 ## Test Case
 

diff --git a/src/Panel.jsx b/src/Panel.jsx
index 1953ad497a0a69309251846e3c25980bd8b57741..468eb37a15082f29c39178970360a4823b3467b2 100644 (file)
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -8,9 +8,9 @@ import classNames from 'classnames';
 function noop() {
 }
 
-function generateOptions(length, disabledOptions, hideDisabledOptions) {
+function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
   const arr = [];
-  for (let value = 0; value < length; value++) {
+  for (let value = 0; value < length; value += step) {
     if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
       arr.push(value);
     }
@@ -39,6 +39,9 @@ class Panel extends Component {
     showSecond: PropTypes.bool,
     onClear: PropTypes.func,
     use12Hours: PropTypes.bool,
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
     addon: PropTypes.func,
   };
 
@@ -90,6 +93,7 @@ class Panel extends Component {
       prefixCls, className, placeholder, disabledHours, disabledMinutes,
       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
       format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
+      hourStep, minuteStep, secondStep,
     } = this.props;
     const {
       value, currentSelectPanel,
@@ -98,9 +102,15 @@ class Panel extends Component {
     const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
     const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
       value ? value.minute() : null);
-    const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
-    const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
-    const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
+    const hourOptions = generateOptions(
+      24, disabledHourOptions, hideDisabledOptions, hourStep
+    );
+    const minuteOptions = generateOptions(
+      60, disabledMinuteOptions, hideDisabledOptions, minuteStep
+    );
+    const secondOptions = generateOptions(
+      60, disabledSecondOptions, hideDisabledOptions, secondStep
+    );
 
     return (
       <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>

diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 2c6a1f16ea69f5825fd7b7f30963ea308a3528ca..85dc3e2a9caf40643f639b0ba80c8cacc9d55fac 100644 (file)
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -46,6 +46,9 @@ export default class Picker extends Component {
     name: PropTypes.string,
     autoComplete: PropTypes.string,
     use12Hours: PropTypes.bool,
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
   };
 
   static defaultProps = {
@@ -157,7 +160,7 @@ export default class Picker extends Component {
       prefixCls, placeholder, disabledHours,
       disabledMinutes, disabledSeconds, hideDisabledOptions,
       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
-      addon, use12Hours,
+      addon, use12Hours, hourStep, minuteStep, secondStep,
     } = this.props;
     return (
       <Panel
@@ -180,6 +183,9 @@ export default class Picker extends Component {
         disabledSeconds={disabledSeconds}
         hideDisabledOptions={hideDisabledOptions}
         use12Hours={use12Hours}
+        hourStep={hourStep}
+        minuteStep={minuteStep}
+        secondStep={secondStep}
         addon={addon}
       />
     );

diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index b2c111d842f7468ca8dcb7f621021eb7c310da5f..2a15e7c0174892e44d1f6d67ee593e66b286b52e 100644 (file)
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -7,6 +7,8 @@ import expect from 'expect.js';
 import async from 'async';
 import moment from 'moment';
 
+const map = (arr, fn) => Array.prototype.map.call(arr, fn);
+
 describe('Select', () => {
   let container;
 
@@ -59,6 +61,38 @@ describe('Select', () => {
         done();
       });
     });
+
+    it('shows only numbers according to step props', (done) => {
+      const picker = renderPicker({
+        hourStep: 5,
+        minuteStep: 15,
+        secondStep: 21,
+      });
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
+        'rc-time-picker-input')[0];
+      async.series([(next) => {
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        const selectors = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
+          'rc-time-picker-panel-select');
+
+        const hourSelector = selectors[0];
+        const minuteSelector = selectors[1];
+        const secondSelector = selectors[2];
+
+        const hours = map(hourSelector.getElementsByTagName('li'), (li) => li.innerHTML);
+        expect(hours).to.eql(['00', '05', '10', '15', '20']);
+
+        const minutes = map(minuteSelector.getElementsByTagName('li'), (li) => li.innerHTML);
+        expect(minutes).to.eql(['00', '15', '30', '45']);
+
+        const seconds = map(secondSelector.getElementsByTagName('li'), (li) => li.innerHTML);
+        expect(seconds).to.eql(['00', '21', '42']);
+
+        next();
+      }], done);
+    });
   });
 
   describe('select number', () => {