Merge pull request #72 from marekpiechut/picker-step

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

4 files changed, 60 insertions, 7 deletions

diff --git a/README.md b/README.md
index 0698d7d..27a1aae 100644
--- 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  |
 | focusOnOpen             | Boolean                           | false | automatically focus the input when the picker opens |
 
 ## Test Case
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 957c021..a1b7c77 100644
--- 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,
     focusOnOpen: PropTypes.bool,
     onKeyDown: PropTypes.func,
@@ -92,7 +95,8 @@ class Panel extends Component {
     const {
       prefixCls, className, placeholder, disabledHours, disabledMinutes,
       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
-      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen, onKeyDown,
+      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
+      focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
     } = this.props;
     const {
       value, currentSelectPanel,
@@ -101,9 +105,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 70327d7..c7ff80a 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -48,6 +48,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,
     focusOnOpen: PropTypes.bool,
     onKeyDown: PropTypes.func,
   };
@@ -165,7 +168,7 @@ export default class Picker extends Component {
       prefixCls, placeholder, disabledHours,
       disabledMinutes, disabledSeconds, hideDisabledOptions,
       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
-      addon, use12Hours, focusOnOpen, onKeyDown,
+      addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
     } = this.props;
     return (
       <Panel
@@ -188,6 +191,9 @@ export default class Picker extends Component {
         disabledSeconds={disabledSeconds}
         hideDisabledOptions={hideDisabledOptions}
         use12Hours={use12Hours}
+        hourStep={hourStep}
+        minuteStep={minuteStep}
+        secondStep={secondStep}
         addon={addon}
         focusOnOpen={focusOnOpen}
         onKeyDown={onKeyDown}
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index b2c111d..2a15e7c 100644
--- 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', () => {