From 518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6 Mon Sep 17 00:00:00 2001 From: MG12 Date: Sat, 12 Dec 2015 20:34:00 +0800 Subject: add new options about disabled time --- HISTORY.md | 14 ++++++++++---- README.md | 40 ++++++++++++++++++++-------------------- assets/index/Select.less | 10 +++++++++- examples/pick-time.js | 18 +++++++++++++++++- package.json | 2 +- src/TimePicker.jsx | 20 +++++++++++++------- src/module/Combobox.jsx | 31 ++++++++++++++++++++++--------- src/module/Header.jsx | 18 +++++++++++++++++- src/module/Panel.jsx | 34 ++++++++++++++++++++++++---------- src/module/Select.jsx | 10 +++++++--- 10 files changed, 140 insertions(+), 57 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index ebc3b9e..48c386a 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,16 +2,22 @@ --- +1.0.0-alpha7 / 2015-12-12 +------------------ + +`new` add options `disabledHours`, `disabledMinutes`, `disabledSeconds` and `hideDisabledOptions`. +`remove` remove options `hourOptions`, `minuteOptions` and `secondOptions`. + 1.0.0-alpha2 / 2015-12-03 ------------------ -`fix` IE8 compatible. +`fixed` IE8 compatible. `new` add test users. 0.7.1 / 2015-11-20 ------------------ -`fix` change value to null when clear input content to remove the react warning. +`fixed` change value to null when clear input content to remove the react warning. 0.7.0 / 2015-11-20 ------------------ @@ -21,7 +27,7 @@ 0.5.6 / 2015-11-19 ------------------ -`fix` use another method to change time and fix the bug about value.getTime(). +`fixed` use another method to change time and fix the bug about value.getTime(). 0.5.4 / 2015-11-19 ------------------ @@ -54,7 +60,7 @@ 0.3.3 / 2015-11-17 ------------------ -`fix` fix some bugs. +`fixed` fix some bugs. 0.3.0 / 2015-11-17 ------------------ diff --git a/README.md b/README.md index 60e5ab0..98f913a 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,6 @@ Usage ``` import TimePicker from 'rc-time-picker'; -import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(, container); ``` @@ -49,25 +48,26 @@ API ### TimePicker -| Name | Type | Default | Description | -|----------------|----------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------| -| prefixCls | String | | prefixCls of this component | -| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | -| disabled | Boolean | false | whether picker is disabled | -| open | Boolean | false | current open state of picker. controlled prop | -| defaultValue | GregorianCalendar | null | default initial value | -| value | GregorianCalendar | null | current value | -| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale | -| placeholder | String | '' | time input's placeholder | -| showHour | Boolean | whether show hour | | -| showSecond | Boolean | whether show second | | -| formatter | String|GregorianCalendarFormatter | | | -| hourOptions | Array | hour options | | -| minuteOptions | Array | minute options | | -| secondOptions | Array | second options | | -| onChange | Function | null | called when select a different value | -| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | -| transitionName | String | '' | | +| Name | Type | Default | Description | +|-------------------------|-----------------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------| +| prefixCls | String | | prefixCls of this component | +| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | +| disabled | Boolean | false | whether picker is disabled | +| open | Boolean | false | current open state of picker. controlled prop | +| defaultValue | GregorianCalendar | null | default initial value | +| value | GregorianCalendar | null | current value | +| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale | +| placeholder | String | '' | time input's placeholder | +| showHour | Boolean | whether show hour | | +| showSecond | Boolean | whether show second | | +| formatter | String|GregorianCalendarFormatter | | | +| disabledHours | Array | disabled hour options | | +| disabledMinutes | Array | disabled minute options | | +| disabledSeconds | Array | disabled second options | | +| hideDisabledOptions | Boolean | whether hide disabled options | | +| onChange | Function | null | called when select a different value | +| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | +| transitionName | String | '' | | License ------- diff --git a/assets/index/Select.less b/assets/index/Select.less index 3e94c11..13b5b18 100644 --- a/assets/index/Select.less +++ b/assets/index/Select.less @@ -48,8 +48,16 @@ } } - &-option-selected { + li&-option-selected { background: #edfaff; color: #2db7f5; } + + li&-option-disabled { + color: #bfbfbf; + &:hover { + background: transparent; + cursor: not-allowed; + } + } } diff --git a/examples/pick-time.js b/examples/pick-time.js index dd5a2ce..074e72c 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js @@ -24,11 +24,27 @@ function onChange(value) { console.log(value && formatter.format(value)); } +const options = { + disabledHours() { + return [0, 2, 21]; + }, + disabledMinutes(h) { + return h === 22 ? [0, 3, 31] : []; + }, + disabledSeconds(h, m) { + return []; + }, +}; + ReactDom.render( , + onChange={onChange} + disabledHours={[0, 2, 21]} + disabledMinutes={[0, 2, 21]} + disabledSeconds={[]} + hideDisabledOptions={true} />, document.getElementById('__react-content') ); diff --git a/package.json b/package.json index fa91d86..8bc0ae2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "1.0.0-alpha6", + "version": "1.0.0-alpha7", "description": "React TimePicker", "keywords": [ "react", diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 3e331f1..fb855e2 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.array, + disabledMinutes: PropTypes.array, + disabledSeconds: PropTypes.array, + 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: null, + disabledMinutes: null, + disabledSeconds: null, + 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..27a8226 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.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.array, + disabledMinutes: PropTypes.array, + disabledSeconds: PropTypes.array, onCurrentSelectPanelChange: PropTypes.func, }, @@ -47,14 +60,14 @@ const Combobox = React.createClass({ }, getHourSelect(hour) { - const { prefixCls, hourOptions, showHour } = this.props; + const { prefixCls, hourOptions, disabledHours, showHour } = this.props; if (!showHour) { return null; } return ( formatOption(option))} + options={minuteOptions.map(option => formatOption(option, disabledMinutes))} selectedIndex={minuteOptions.indexOf(minute)} type="minute" onSelect={this.onItemChange} @@ -78,14 +91,14 @@ const Combobox = React.createClass({ }, getSecondSelect(second) { - const { prefixCls, secondOptions, showSecond } = this.props; + const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props; if (!showSecond) { return null; } return ( formatOption(option, disabledHours))} + options={hourOptions.map(option => formatOption(option, disabledOptions))} selectedIndex={hourOptions.indexOf(hour)} type="hour" onSelect={this.onItemChange} @@ -77,11 +79,13 @@ const Combobox = React.createClass({ }, getMinuteSelect(minute) { - const { prefixCls, minuteOptions, disabledMinutes } = this.props; + const { prefixCls, minuteOptions, disabledMinutes, value } = this.props; + const disabledOptions = disabledMinutes(value.getHourOfDay()); + return ( formatOption(option, disabledSeconds))} + 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 fec02af..9a048dc 100644 --- a/src/module/Header.jsx +++ b/src/module/Header.jsx @@ -13,9 +13,9 @@ const Header = React.createClass({ hourOptions: PropTypes.array, minuteOptions: PropTypes.array, secondOptions: PropTypes.array, - disabledHours: PropTypes.array, - disabledMinutes: PropTypes.array, - disabledSeconds: PropTypes.array, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, onChange: PropTypes.func, onClear: PropTypes.func, onEsc: PropTypes.func, @@ -87,10 +87,13 @@ const Header = React.createClass({ } // if time value is disabled, response warning. + const disabledHourOptions = disabledHours(); + const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); + const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); if ( - (disabledHours && disabledHours.indexOf(value.getHourOfDay()) >= 0) || - (disabledMinutes && disabledMinutes.indexOf(value.getMinutes()) >= 0) || - (disabledSeconds && disabledSeconds.indexOf(value.getSeconds()) >= 0) + (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) || + (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) || + (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0) ) { this.setState({ invalid: true, diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 12d23f7..94d3842 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx @@ -24,9 +24,9 @@ const Panel = React.createClass({ placeholder: PropTypes.string, gregorianCalendarLocale: PropTypes.object, formatter: PropTypes.object, - disabledHours: PropTypes.array, - disabledMinutes: PropTypes.array, - disabledSeconds: PropTypes.array, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, hideDisabledOptions: PropTypes.bool, onChange: PropTypes.func, onEsc: PropTypes.func, @@ -40,10 +40,6 @@ const Panel = React.createClass({ getDefaultProps() { return { - disabledHours: null, - disabledMinutes: null, - disabledSeconds: null, - hideDisabledOptions: false, onChange: noop, onClear: noop, }; @@ -81,9 +77,12 @@ const Panel = React.createClass({ render() { const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; const value = this.state.value; - const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions); - const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions); - const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions); + 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 (
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx index 18d61c5..e992279 100644 --- a/tests/Header.spec.jsx +++ b/tests/Header.spec.jsx @@ -123,7 +123,12 @@ describe('Header', () => { it('carry disabled correctly', (done) => { const picker = renderPicker({ - disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22] + disabledMinutes(h) { + return [h]; + }, + disabledSeconds(h, m) { + return [h + m % 60]; + }, }); expect(picker.state.open).not.to.be.ok(); const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; @@ -138,22 +143,39 @@ describe('Header', () => { expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '12:15:78'; + ReactDOM.findDOMNode(header).value = '10:09:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); - expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78'); + expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '12:10:78'; + ReactDOM.findDOMNode(header).value = '10:10:78'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + + ReactDOM.findDOMNode(header).value = '10:09:19'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + + ReactDOM.findDOMNode(header).value = '10:09:20'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18'); - expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18'); + expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20'); next(); }], () => { @@ -163,8 +185,13 @@ describe('Header', () => { it('carry hidden correctly', (done) => { const picker = renderPicker({ - disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22], - hideDisabledOptions: true + disabledMinutes(h) { + return [h]; + }, + disabledSeconds(h, m) { + return [h + m % 60]; + }, + hideDisabledOptions: true, }); expect(picker.state.open).not.to.be.ok(); const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; @@ -179,22 +206,39 @@ describe('Header', () => { expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '12:15:78'; + ReactDOM.findDOMNode(header).value = '10:09:78'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); - expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78'); + expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); - ReactDOM.findDOMNode(header).value = '12:10:78'; + ReactDOM.findDOMNode(header).value = '10:10:78'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + + ReactDOM.findDOMNode(header).value = '10:09:19'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18'); + + ReactDOM.findDOMNode(header).value = '10:09:20'; Simulate.change(header); setTimeout(next, 100); }, (next) => { expect(picker.state.open).to.be(true); - expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18'); - expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18'); + expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20'); next(); }], () => { diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx index 6dd7796..f7717c7 100644 --- a/tests/Select.spec.jsx +++ b/tests/Select.spec.jsx @@ -29,7 +29,7 @@ describe('Select', () => { formatter={formatter} locale={TimePickerLocale} showSecond={showSecond} - defaultValue={formatTime('01:02:03', formatter)} + defaultValue={formatTime('01:02:04', formatter)} {...props} />, container); } @@ -90,8 +90,8 @@ describe('Select', () => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; const option = selector.getElementsByTagName('li')[19]; @@ -100,8 +100,8 @@ describe('Select', () => { }, (next) => { expect(change).to.be.ok(); expect(change.getHourOfDay()).to.be(19); - expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('19:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('19:02:04'); expect(picker.state.open).to.be.ok(); next(); @@ -129,8 +129,8 @@ describe('Select', () => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; const option = selector.getElementsByTagName('li')[19]; @@ -139,8 +139,8 @@ describe('Select', () => { }, (next) => { expect(change).to.be.ok(); expect(change.getMinutes()).to.be(19); - expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:19:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:19:04'); expect(picker.state.open).to.be.ok(); next(); @@ -168,8 +168,8 @@ describe('Select', () => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; const option = selector.getElementsByTagName('li')[19]; @@ -194,7 +194,12 @@ describe('Select', () => { onChange(v) { change = v; }, - disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22] + disabledMinutes(h) { + return [h]; + }, + disabledSeconds(h, m) { + return [h + m % 60]; + }, }); expect(picker.state.open).not.to.be.ok(); const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; @@ -208,17 +213,27 @@ describe('Select', () => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; - const option = selector.getElementsByTagName('li')[6]; + const option = selector.getElementsByTagName('li')[1]; Simulate.click(option); setTimeout(next, 100); }, (next) => { expect(change).not.to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); + expect(picker.state.open).to.be.ok(); + + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; + const option = selector.getElementsByTagName('li')[3]; + Simulate.click(option); + setTimeout(next, 100); + }, (next) => { + expect(change).not.to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); expect(picker.state.open).to.be.ok(); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; @@ -228,8 +243,8 @@ describe('Select', () => { }, (next) => { expect(change).to.be.ok(); expect(change.getMinutes()).to.be(7); - expect(ReactDOM.findDOMNode(header).value).to.be('01:07:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:07:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:07:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:07:04'); expect(picker.state.open).to.be.ok(); next(); @@ -244,8 +259,10 @@ describe('Select', () => { onChange(v) { change = v; }, - disabledHours: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23], - hideDisabledOptions: true + disabledHours() { + return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23]; + }, + hideDisabledOptions: true, }); expect(picker.state.open).not.to.be.ok(); const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; @@ -259,8 +276,8 @@ describe('Select', () => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; expect(header).to.be.ok(); - expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; const option = selector.getElementsByTagName('li')[3]; @@ -269,8 +286,8 @@ describe('Select', () => { }, (next) => { expect(change).to.be.ok(); expect(change.getHourOfDay()).to.be(6); - expect(ReactDOM.findDOMNode(header).value).to.be('06:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('06:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('06:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('06:02:04'); expect(picker.state.open).to.be.ok(); const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; @@ -280,8 +297,8 @@ describe('Select', () => { }, (next) => { expect(change).to.be.ok(); expect(change.getHourOfDay()).to.be(8); - expect(ReactDOM.findDOMNode(header).value).to.be('08:02:03'); - expect(ReactDOM.findDOMNode(input).value).to.be('08:02:03'); + expect(ReactDOM.findDOMNode(header).value).to.be('08:02:04'); + expect(ReactDOM.findDOMNode(input).value).to.be('08:02:04'); expect(picker.state.open).to.be.ok(); next(); -- cgit v1.2.3 From bec70d57f3ef17ed1ef29c660936be235804061e Mon Sep 17 00:00:00 2001 From: MG12 Date: Wed, 16 Dec 2015 11:53:31 +0800 Subject: update readme document --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 98f913a..ea0e034 100644 --- a/README.md +++ b/README.md @@ -61,9 +61,9 @@ API | showHour | Boolean | whether show hour | | | showSecond | Boolean | whether show second | | | formatter | String|GregorianCalendarFormatter | | | -| disabledHours | Array | disabled hour options | | -| disabledMinutes | Array | disabled minute options | | -| disabledSeconds | Array | disabled second options | | +| disabledHours | Function | disabled hour options | | +| disabledMinutes | Function | disabled minute options | | +| disabledSeconds | Function | disabled second options | | | hideDisabledOptions | Boolean | whether hide disabled options | | | onChange | Function | null | called when select a different value | | placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | -- cgit v1.2.3