diff options
-rw-r--r-- | README.md | 3 | ||||
-rw-r--r-- | src/Panel.jsx | 20 | ||||
-rw-r--r-- | src/TimePicker.jsx | 8 | ||||
-rw-r--r-- | tests/Select.spec.jsx | 34 |
4 files changed, 59 insertions, 6 deletions
@@ -77,6 +77,9 @@ API | |||
77 | | name | String | - | sets the name of the generated input | | 77 | | name | String | - | sets the name of the generated input | |
78 | | onOpen | Function({ open }) | | when TimePicker panel is opened | | 78 | | onOpen | Function({ open }) | | when TimePicker panel is opened | |
79 | | onClose | Function({ open }) | | when TimePicker panel is opened | | 79 | | onClose | Function({ open }) | | when TimePicker panel is opened | |
80 | | hourStep | Number | 1 | interval between hours in picker | | ||
81 | | minuteStep | Number | 1 | interval between minutes in picker | | ||
82 | | secondStep | Number | 1 | interval between seconds in picker | | ||
80 | 83 | ||
81 | ## Test Case | 84 | ## Test Case |
82 | 85 | ||
diff --git a/src/Panel.jsx b/src/Panel.jsx index 8a6c872..4e09b57 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx | |||
@@ -8,9 +8,9 @@ import classNames from 'classnames'; | |||
8 | function noop() { | 8 | function noop() { |
9 | } | 9 | } |
10 | 10 | ||
11 | function generateOptions(length, disabledOptions, hideDisabledOptions) { | 11 | function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) { |
12 | const arr = []; | 12 | const arr = []; |
13 | for (let value = 0; value < length; value++) { | 13 | for (let value = 0; value < length; value += step) { |
14 | if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { | 14 | if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { |
15 | arr.push(value); | 15 | arr.push(value); |
16 | } | 16 | } |
@@ -39,6 +39,9 @@ class Panel extends Component { | |||
39 | showSecond: PropTypes.bool, | 39 | showSecond: PropTypes.bool, |
40 | onClear: PropTypes.func, | 40 | onClear: PropTypes.func, |
41 | use12Hours: PropTypes.bool, | 41 | use12Hours: PropTypes.bool, |
42 | hourStep: PropTypes.number, | ||
43 | minuteStep: PropTypes.number, | ||
44 | secondStep: PropTypes.number, | ||
42 | addon: PropTypes.func, | 45 | addon: PropTypes.func, |
43 | onKeyDown: PropTypes.func, | 46 | onKeyDown: PropTypes.func, |
44 | }; | 47 | }; |
@@ -92,6 +95,7 @@ class Panel extends Component { | |||
92 | prefixCls, className, placeholder, disabledHours, disabledMinutes, | 95 | prefixCls, className, placeholder, disabledHours, disabledMinutes, |
93 | disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, | 96 | disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, |
94 | format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, onKeyDown, | 97 | format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, onKeyDown, |
98 | hourStep, minuteStep, secondStep, | ||
95 | } = this.props; | 99 | } = this.props; |
96 | const { | 100 | const { |
97 | value, currentSelectPanel, | 101 | value, currentSelectPanel, |
@@ -100,9 +104,15 @@ class Panel extends Component { | |||
100 | const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null); | 104 | const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null); |
101 | const disabledSecondOptions = disabledSeconds(value ? value.hour() : null, | 105 | const disabledSecondOptions = disabledSeconds(value ? value.hour() : null, |
102 | value ? value.minute() : null); | 106 | value ? value.minute() : null); |
103 | const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions); | 107 | const hourOptions = generateOptions( |
104 | const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions); | 108 | 24, disabledHourOptions, hideDisabledOptions, hourStep |
105 | const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); | 109 | ); |
110 | const minuteOptions = generateOptions( | ||
111 | 60, disabledMinuteOptions, hideDisabledOptions, minuteStep | ||
112 | ); | ||
113 | const secondOptions = generateOptions( | ||
114 | 60, disabledSecondOptions, hideDisabledOptions, secondStep | ||
115 | ); | ||
106 | 116 | ||
107 | return ( | 117 | return ( |
108 | <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}> | 118 | <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}> |
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 271515d..5f2239a 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -48,6 +48,9 @@ export default class Picker extends Component { | |||
48 | name: PropTypes.string, | 48 | name: PropTypes.string, |
49 | autoComplete: PropTypes.string, | 49 | autoComplete: PropTypes.string, |
50 | use12Hours: PropTypes.bool, | 50 | use12Hours: PropTypes.bool, |
51 | hourStep: PropTypes.number, | ||
52 | minuteStep: PropTypes.number, | ||
53 | secondStep: PropTypes.number, | ||
51 | onKeyDown: PropTypes.func, | 54 | onKeyDown: PropTypes.func, |
52 | }; | 55 | }; |
53 | 56 | ||
@@ -163,7 +166,7 @@ export default class Picker extends Component { | |||
163 | prefixCls, placeholder, disabledHours, | 166 | prefixCls, placeholder, disabledHours, |
164 | disabledMinutes, disabledSeconds, hideDisabledOptions, | 167 | disabledMinutes, disabledSeconds, hideDisabledOptions, |
165 | allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, | 168 | allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, |
166 | addon, use12Hours, onKeyDown, | 169 | addon, use12Hours, onKeyDown, hourStep, minuteStep, secondStep, |
167 | } = this.props; | 170 | } = this.props; |
168 | return ( | 171 | return ( |
169 | <Panel | 172 | <Panel |
@@ -186,6 +189,9 @@ export default class Picker extends Component { | |||
186 | disabledSeconds={disabledSeconds} | 189 | disabledSeconds={disabledSeconds} |
187 | hideDisabledOptions={hideDisabledOptions} | 190 | hideDisabledOptions={hideDisabledOptions} |
188 | use12Hours={use12Hours} | 191 | use12Hours={use12Hours} |
192 | hourStep={hourStep} | ||
193 | minuteStep={minuteStep} | ||
194 | secondStep={secondStep} | ||
189 | addon={addon} | 195 | addon={addon} |
190 | onKeyDown={onKeyDown} | 196 | onKeyDown={onKeyDown} |
191 | /> | 197 | /> |
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'; | |||
7 | import async from 'async'; | 7 | import async from 'async'; |
8 | import moment from 'moment'; | 8 | import moment from 'moment'; |
9 | 9 | ||
10 | const map = (arr, fn) => Array.prototype.map.call(arr, fn); | ||
11 | |||
10 | describe('Select', () => { | 12 | describe('Select', () => { |
11 | let container; | 13 | let container; |
12 | 14 | ||
@@ -59,6 +61,38 @@ describe('Select', () => { | |||
59 | done(); | 61 | done(); |
60 | }); | 62 | }); |
61 | }); | 63 | }); |
64 | |||
65 | it('shows only numbers according to step props', (done) => { | ||
66 | const picker = renderPicker({ | ||
67 | hourStep: 5, | ||
68 | minuteStep: 15, | ||
69 | secondStep: 21, | ||
70 | }); | ||
71 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | ||
72 | 'rc-time-picker-input')[0]; | ||
73 | async.series([(next) => { | ||
74 | Simulate.click(input); | ||
75 | setTimeout(next, 100); | ||
76 | }, (next) => { | ||
77 | const selectors = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | ||
78 | 'rc-time-picker-panel-select'); | ||
79 | |||
80 | const hourSelector = selectors[0]; | ||
81 | const minuteSelector = selectors[1]; | ||
82 | const secondSelector = selectors[2]; | ||
83 | |||
84 | const hours = map(hourSelector.getElementsByTagName('li'), (li) => li.innerHTML); | ||
85 | expect(hours).to.eql(['00', '05', '10', '15', '20']); | ||
86 | |||
87 | const minutes = map(minuteSelector.getElementsByTagName('li'), (li) => li.innerHTML); | ||
88 | expect(minutes).to.eql(['00', '15', '30', '45']); | ||
89 | |||
90 | const seconds = map(secondSelector.getElementsByTagName('li'), (li) => li.innerHTML); | ||
91 | expect(seconds).to.eql(['00', '21', '42']); | ||
92 | |||
93 | next(); | ||
94 | }], done); | ||
95 | }); | ||
62 | }); | 96 | }); |
63 | 97 | ||
64 | describe('select number', () => { | 98 | describe('select number', () => { |