diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx index 12ee74fc5ee55d..29729437f5f1c0 100644 --- a/docs/src/app/components/pages/components/time-picker.jsx +++ b/docs/src/app/components/pages/components/time-picker.jsx @@ -13,6 +13,12 @@ let TimePickerPage = React.createClass({ { name: 'Props', infoArray: [ + { + name: 'autoOk', + type: 'boolean', + header: 'default: false', + desc: 'If true, automatically accept and close the picker on set minutes.', + }, { name: 'defaultTime', type: 'date object', @@ -125,6 +131,12 @@ let TimePickerPage = React.createClass({ format="24hr" hintText="24hr Format" onChange={this._changeTimePicker12} /> + + ); diff --git a/docs/src/app/components/raw-code/time-picker-code.txt b/docs/src/app/components/raw-code/time-picker-code.txt index dc2a5de060396b..3b99da56d9692a 100644 --- a/docs/src/app/components/raw-code/time-picker-code.txt +++ b/docs/src/app/components/raw-code/time-picker-code.txt @@ -7,3 +7,8 @@ + +//Auto OK + diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index 4827e528699bfa..42a69838ac759d 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -11,6 +11,8 @@ const Clock = React.createClass({ mixins: [StylePropable], propTypes: { + onChangeMinutes: React.PropTypes.func, + onChangeHours: React.PropTypes.func, initialTime: React.PropTypes.object, mode: React.PropTypes.oneOf(['hour', 'minute']), format: React.PropTypes.oneOf(['ampm', '24hr']), @@ -152,12 +154,17 @@ const Clock = React.createClass({ this.setState({ selectedTime: time, }); - + + const { onChangeHours } = this.props; + if (finished) { setTimeout(() => { this.setState({ mode: 'minute', }); + if (typeof(onChangeHours) === 'function') { + onChangeHours(time); + } }, 100); } }, @@ -168,6 +175,11 @@ const Clock = React.createClass({ this.setState({ selectedTime: time, }); + + const { onChangeMinutes } = this.props; + if (typeof(onChangeMinutes) === 'function') { + setTimeout(() => { onChangeMinutes(time); }, 0); + } }, getSelectedTime() { diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx index 3a3bd04ed65be9..5c1c33b3bb07a0 100644 --- a/src/time-picker/time-picker-dialog.jsx +++ b/src/time-picker/time-picker-dialog.jsx @@ -17,6 +17,7 @@ const TimePickerDialog = React.createClass({ }, propTypes: { + autoOk: React.PropTypes.bool, initialTime: React.PropTypes.object, onAccept: React.PropTypes.func, onShow: React.PropTypes.func, @@ -61,6 +62,7 @@ const TimePickerDialog = React.createClass({ initialTime, onAccept, format, + autoOk, ...other, } = this.props; @@ -89,7 +91,9 @@ const TimePickerDialog = React.createClass({ secondary={true} onTouchTap={this._handleOKTouchTap} />, ]; - + + const onClockChangeMinutes = (autoOk === true ? this._handleOKTouchTap : undefined); + return ( + initialTime={initialTime} + onChangeMinutes={onClockChangeMinutes} /> ); }, diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index 6b7a0ff83ce97d..9b78a57d4d28ba 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -15,6 +15,7 @@ const TimePicker = React.createClass({ mixins: [StylePropable, WindowListenable], propTypes: { + autoOk: React.PropTypes.bool, defaultTime: React.PropTypes.object, format: React.PropTypes.oneOf(['ampm', '24hr']), pedantic: React.PropTypes.bool, @@ -34,6 +35,7 @@ const TimePicker = React.createClass({ defaultTime: null, format: 'ampm', pedantic: false, + autoOk: false, }; }, @@ -76,6 +78,7 @@ const TimePicker = React.createClass({ render() { let { + autoOk, format, onFocus, onTouchTap, @@ -104,7 +107,8 @@ const TimePicker = React.createClass({ onAccept={this._handleDialogAccept} onShow={onShow} onDismiss={onDismiss} - format={format} /> + format={format} + autoOk={autoOk} /> ); },