Merge pull request mui#1940 from tyfoo/feature/TimePick-autoOk

[TimePicker] autoOk prop to automatically close the dialog
tyfoo · Oct 23, 2015 · a18f08b · a18f08b
2 parents c7f6a82 + bd0eb61
commit a18f08b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 4 deletions.
diff --git 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}  />
+
+          <TimePicker
+            ref="pickerAutoOk"
+            format="24hr"
+            hintText="AutoOk"
+            autoOk={true} />
         </CodeExample>
       </ComponentDoc>
     );

diff --git 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 @@
 <TimePicker
   format="24hr"
   hintText="24hr Format" />
+
+//Auto OK
+<TimePicker
+  hintText="AutoOk"
+  autoOk={true} />
diff --git 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
@@ -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 (
       <Dialog {...other}
         ref="dialogWindow"
@@ -103,7 +107,8 @@ const TimePickerDialog = React.createClass({
         <Clock
           ref="clock"
           format={format}
-          initialTime={initialTime} />
+          initialTime={initialTime}
+          onChangeMinutes={onClockChangeMinutes} />
       </Dialog>
     );
   },

diff --git 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} />
       </div>
     );
   },