From be91fd6cd4c3df9ac7b7ded94af9f92b4fae1fd1 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 13:49:42 +0200
Subject: [PATCH 01/15] Added minutesSteps, cancelOnClose and calling onChange
 when time changes

---
 src/Clock.js      |  7 +++++--
 src/TimeInput.js  | 45 +++++++++++++++++++++++++++++++++------------
 src/TimePicker.js | 13 +++++++++----
 3 files changed, 47 insertions(+), 18 deletions(-)
 mode change 100644 => 100755 src/Clock.js
 mode change 100644 => 100755 src/TimeInput.js
 mode change 100644 => 100755 src/TimePicker.js

diff --git a/src/Clock.js b/src/Clock.js
old mode 100644
new mode 100755
index 2229092..4bb8e71
--- a/src/Clock.js
+++ b/src/Clock.js
@@ -193,7 +193,8 @@ class Clock extends React.PureComponent {
               key={digit.display}
               className={classNames(classes.number, { selected: value === digit.display || (digit.display === 60 && value === 0) })}
               style={{
-                transform: `translate(${digit.translateX}px, ${digit.translateY}px)`
+                transform: `translate(${digit.translateX}px, ${digit.translateY}px)`,
+                color: digit.display % this.props.minutesStep ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.87)"
               }}
             >
               {digit.display === 60 ? '00' : digit.display}
@@ -211,7 +212,9 @@ Clock.propTypes = {
   /** Callback that is called with the new hours/minutes (as a number) when the value is changed. */
   onChange: PropTypes.func,
   /** The value of the clock. */
-  value: PropTypes.number.isRequired
+  value: PropTypes.number.isRequired,
+  /** Steps between minutes. */
+  minutesStep: PropTypes.number
 }
 
 export default withStyles(styles)(Clock)
diff --git a/src/TimeInput.js b/src/TimeInput.js
old mode 100644
new mode 100755
index a934575..83e48fa
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -21,10 +21,7 @@ const styles = {
 class TimeInput extends React.Component {
   constructor (props) {
     super(props)
-    const defaultValue = new Date()
-    defaultValue.setSeconds(0)
-    defaultValue.setMilliseconds(0)
-    this.state = { open: false, value: props.value || props.defaultValue || defaultValue }
+    this.state = { open: false, value: this.getInitValue() }
   }
 
   componentWillReceiveProps (nextProps) {
@@ -33,20 +30,35 @@ class TimeInput extends React.Component {
     }
   }
 
-  showDialog = () => this.setState({ open: true, newValue: this.state.value })
+  showDialog = () => {
+    this.initValue = this.getInitValue();
+    this.setState({ open: true, value: this.initValue, newValue: this.state.value });
+  }
+
+  getInitValue = () => {
+    const defaultValue = new Date()
+    defaultValue.setSeconds(0)
+    defaultValue.setMilliseconds(0)
+    return this.props.value || this.props.defaultValue || this.defaultValue;
+  }
 
   handleChange = (newValue) => {
+    if (this.props.onChange != null) {
+      this.props.onChange(newValue)
+    }
     this.setState({ newValue })
   }
 
   handleOk = () => {
-    if (this.props.onChange != null) {
-      this.props.onChange(this.state.newValue)
-    }
     this.setState({ open: false, value: this.state.newValue, newValue: null })
   }
 
-  handleCancel = () => this.setState({ open: false, newValue: null })
+  handleCancel = () => {
+    if (this.props.onChange != null) {
+      this.props.onChange(this.initValue)
+    }
+    this.setState({ open: false, newValue: null });
+  }
 
   render () {
     const {
@@ -59,6 +71,8 @@ class TimeInput extends React.Component {
       okLabel,
       onChange, // eslint-disable-line
       value: valueProp, // eslint-disable-line
+      minutesStep,
+      cancelOnClose,
       ...other
     } = this.props
 
@@ -85,7 +99,7 @@ class TimeInput extends React.Component {
         maxWidth='xs'
         open={this.state.open}
         key='TimeInput-dialog'
-        onClose={this.handleCancel}
+        onClose={cancelOnClose ? this.handleCancel : this.handleOk }
       >
         <TimePicker
           mode={mode}
@@ -93,6 +107,7 @@ class TimeInput extends React.Component {
           onChange={this.handleChange}
           onMinutesSelected={autoOk ? this.handleOk : null}
           classes={{ header: classes.header, body: classes.body }}
+          minutesStep={minutesStep}
         />
         <DialogActions>
           <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
@@ -117,14 +132,20 @@ TimeInput.propTypes = {
   /** Callback that is called with the new date (as Date instance) when the value is changed. */
   onChange: PropTypes.func,
   /** The value of the time picker, for use in controlled mode. */
-  value: PropTypes.instanceOf(Date)
+  value: PropTypes.instanceOf(Date),
+  /** Steps between minutes. */
+  minutesStep: PropTypes.number,
+  /** Returns init date when dialog is closed (clicking background). */
+  cancelOnClose: PropTypes.bool
 }
 
 TimeInput.defaultProps = {
   autoOk: false,
   cancelLabel: 'Cancel',
   mode: '12h',
-  okLabel: 'Ok'
+  okLabel: 'Ok',
+  minutesStep: 1,
+  cancelOnClose: true
 }
 
 TimeInput.contextTypes = {
diff --git a/src/TimePicker.js b/src/TimePicker.js
old mode 100644
new mode 100755
index 8e85cb9..0b8d19c
--- a/src/TimePicker.js
+++ b/src/TimePicker.js
@@ -84,9 +84,11 @@ class TimePicker extends React.Component {
         this.setState({ hours: value }, this.propagateChange)
       }
     } else {
-      this.setState({ minutes: value }, () => {
-        this.propagateChange()
-      })
+      if(value % this.props.minutesStep === 0) {
+        this.setState({ minutes: value }, () => {
+          this.propagateChange()
+        });
+      }
     }
   }
 
@@ -186,6 +188,7 @@ class TimePicker extends React.Component {
             value={clockMode === 'minutes' ? minutes : hours}
             onMouseUp={this.handleClockChangeDone}
             onTouchEnd={this.handleClockChangeDone}
+            minutesStep={this.props.minutesStep}
           />
         </div>
       </div>
@@ -203,7 +206,9 @@ TimePicker.propTypes = {
   /** Callback that is called when the minutes are changed. Can be used to automatically hide the picker after selecting a time. */
   onMinutesSelected: PropTypes.func,
   /** The value of the time picker, for use in controlled mode. */
-  value: PropTypes.instanceOf(Date)
+  value: PropTypes.instanceOf(Date),
+  /** Steps between minutes. */
+  minutesStep: PropTypes.number
 }
 
 TimePicker.defaultProps = {

From 9683c744025652670876f160b3ccdf9a3cfabeee Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 14:23:25 +0200
Subject: [PATCH 02/15] Fixed code style

---
 src/Clock.js      |  4 ++--
 src/TimeInput.js  | 10 +++++-----
 src/TimePicker.js |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Clock.js b/src/Clock.js
index 4bb8e71..d0991e4 100755
--- a/src/Clock.js
+++ b/src/Clock.js
@@ -134,7 +134,7 @@ class Clock extends React.PureComponent {
   }
 
   render () {
-    const { classes, mode, value, ...other } = this.props
+    const { classes, mode, value, minutesStep, ...other } = this.props
     const { touching } = this.state
 
     return (
@@ -194,7 +194,7 @@ class Clock extends React.PureComponent {
               className={classNames(classes.number, { selected: value === digit.display || (digit.display === 60 && value === 0) })}
               style={{
                 transform: `translate(${digit.translateX}px, ${digit.translateY}px)`,
-                color: digit.display % this.props.minutesStep ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.87)"
+                color: digit.display % this.props.minutesStep ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.87)'
               }}
             >
               {digit.display === 60 ? '00' : digit.display}
diff --git a/src/TimeInput.js b/src/TimeInput.js
index 83e48fa..e5a38f9 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -31,15 +31,15 @@ class TimeInput extends React.Component {
   }
 
   showDialog = () => {
-    this.initValue = this.getInitValue();
-    this.setState({ open: true, value: this.initValue, newValue: this.state.value });
+    this.initValue = this.getInitValue()
+    this.setState({ open: true, value: this.initValue, newValue: this.state.value })
   }
 
   getInitValue = () => {
     const defaultValue = new Date()
     defaultValue.setSeconds(0)
     defaultValue.setMilliseconds(0)
-    return this.props.value || this.props.defaultValue || this.defaultValue;
+    return this.props.value || this.props.defaultValue || this.defaultValue
   }
 
   handleChange = (newValue) => {
@@ -57,7 +57,7 @@ class TimeInput extends React.Component {
     if (this.props.onChange != null) {
       this.props.onChange(this.initValue)
     }
-    this.setState({ open: false, newValue: null });
+    this.setState({ open: false, newValue: null })
   }
 
   render () {
@@ -99,7 +99,7 @@ class TimeInput extends React.Component {
         maxWidth='xs'
         open={this.state.open}
         key='TimeInput-dialog'
-        onClose={cancelOnClose ? this.handleCancel : this.handleOk }
+        onClose={cancelOnClose ? this.handleCancel : this.handleOk}
       >
         <TimePicker
           mode={mode}
diff --git a/src/TimePicker.js b/src/TimePicker.js
index 0b8d19c..eb9a1cf 100755
--- a/src/TimePicker.js
+++ b/src/TimePicker.js
@@ -84,10 +84,10 @@ class TimePicker extends React.Component {
         this.setState({ hours: value }, this.propagateChange)
       }
     } else {
-      if(value % this.props.minutesStep === 0) {
+      if (value % this.props.minutesStep === 0) {
         this.setState({ minutes: value }, () => {
           this.propagateChange()
-        });
+        })
       }
     }
   }

From 49cb3ffa35bf5badf8caa7fd7baeb580ca62f730 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 16:32:49 +0200
Subject: [PATCH 03/15] Bugs in uncontrolled mode fixed

---
 src/Clock.js      |  2 +-
 src/TimeInput.js  | 36 +++++++++++++++---------------------
 src/TimePicker.js | 10 +++-------
 3 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/Clock.js b/src/Clock.js
index d0991e4..6ddcc63 100755
--- a/src/Clock.js
+++ b/src/Clock.js
@@ -194,7 +194,7 @@ class Clock extends React.PureComponent {
               className={classNames(classes.number, { selected: value === digit.display || (digit.display === 60 && value === 0) })}
               style={{
                 transform: `translate(${digit.translateX}px, ${digit.translateY}px)`,
-                color: digit.display % this.props.minutesStep ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.87)'
+                color: digit.display % (this.props.minutesStep || 1) ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.87)'
               }}
             >
               {digit.display === 60 ? '00' : digit.display}
diff --git a/src/TimeInput.js b/src/TimeInput.js
index e5a38f9..a49b03e 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -21,7 +21,11 @@ const styles = {
 class TimeInput extends React.Component {
   constructor (props) {
     super(props)
-    this.state = { open: false, value: this.getInitValue() }
+    const defaultValue = new Date()
+    defaultValue.setSeconds(0)
+    defaultValue.setMilliseconds(0)
+    const initValue = props.value || props.defaultValue || defaultValue
+    this.state = { open: false, initValue, value: initValue }
   }
 
   componentWillReceiveProps (nextProps) {
@@ -30,34 +34,24 @@ class TimeInput extends React.Component {
     }
   }
 
-  showDialog = () => {
-    this.initValue = this.getInitValue()
-    this.setState({ open: true, value: this.initValue, newValue: this.state.value })
-  }
-
-  getInitValue = () => {
-    const defaultValue = new Date()
-    defaultValue.setSeconds(0)
-    defaultValue.setMilliseconds(0)
-    return this.props.value || this.props.defaultValue || this.defaultValue
-  }
+  showDialog = () => this.setState({ open: true })
 
-  handleChange = (newValue) => {
+  handleChange = (value) => {
     if (this.props.onChange != null) {
-      this.props.onChange(newValue)
+      this.props.onChange(value)
     }
-    this.setState({ newValue })
+    this.setState({ value })
   }
 
   handleOk = () => {
-    this.setState({ open: false, value: this.state.newValue, newValue: null })
+    this.setState({ open: false, initValue: this.state.value })
   }
 
   handleCancel = () => {
     if (this.props.onChange != null) {
-      this.props.onChange(this.initValue)
+      this.props.onChange(this.state.initValue)
     }
-    this.setState({ open: false, newValue: null })
+    this.setState({ open: false, value: this.state.initValue })
   }
 
   render () {
@@ -76,7 +70,7 @@ class TimeInput extends React.Component {
       ...other
     } = this.props
 
-    const { value, newValue } = this.state
+    const { value } = this.state
 
     const { hours, isPm } = formatHours(value.getHours(), mode)
     const formattedValue = mode === '12h'
@@ -103,11 +97,11 @@ class TimeInput extends React.Component {
       >
         <TimePicker
           mode={mode}
-          value={newValue}
+          value={value}
           onChange={this.handleChange}
           onMinutesSelected={autoOk ? this.handleOk : null}
           classes={{ header: classes.header, body: classes.body }}
-          minutesStep={minutesStep}
+          minutesStep={minutesStep || 1}
         />
         <DialogActions>
           <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
diff --git a/src/TimePicker.js b/src/TimePicker.js
index eb9a1cf..c6c37a1 100755
--- a/src/TimePicker.js
+++ b/src/TimePicker.js
@@ -83,12 +83,8 @@ class TimePicker extends React.Component {
       } else {
         this.setState({ hours: value }, this.propagateChange)
       }
-    } else {
-      if (value % this.props.minutesStep === 0) {
-        this.setState({ minutes: value }, () => {
-          this.propagateChange()
-        })
-      }
+    } else if (value % (this.props.minutesStep || 1) === 0) {
+      this.setState({ minutes: value }, this.propagateChange)
     }
   }
 
@@ -188,7 +184,7 @@ class TimePicker extends React.Component {
             value={clockMode === 'minutes' ? minutes : hours}
             onMouseUp={this.handleClockChangeDone}
             onTouchEnd={this.handleClockChangeDone}
-            minutesStep={this.props.minutesStep}
+            minutesStep={this.props.minutesStep || 1}
           />
         </div>
       </div>

From aabcbafe2ac66704c63f15e55425362bc3ac2d54 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 16:33:58 +0200
Subject: [PATCH 04/15] Updated snapshots and test specs

---
 src/TimeInput.spec.js                     |  1 -
 src/TimePicker.spec.js                    |  2 -
 src/__snapshots__/Clock.spec.js.snap      | 12 +++++
 src/__snapshots__/TimeInput.spec.js.snap  | 56 +++++++++++++++--------
 src/__snapshots__/TimePicker.spec.js.snap |  4 ++
 5 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/TimeInput.spec.js b/src/TimeInput.spec.js
index ea6bfe0..cde08c9 100644
--- a/src/TimeInput.spec.js
+++ b/src/TimeInput.spec.js
@@ -141,7 +141,6 @@ describe('<TimeInput />', () => {
       tree.find(Button).at(0).simulate('click')
 
       expect(getValue(tree)).toBe('13:37') // unchanged
-      expect(changeHandler).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/src/TimePicker.spec.js b/src/TimePicker.spec.js
index 8ed0fe0..efdabb9 100644
--- a/src/TimePicker.spec.js
+++ b/src/TimePicker.spec.js
@@ -78,7 +78,6 @@ describe('<TimePicker />', () => {
         .simulate('click', testUtils.stubClickEvent(190, 230)) // click on 25
         .simulate('mouseup', testUtils.stubClickEvent(190, 230)) // click on 25
 
-      expect(changeHandler).toBeCalled()
       expect(changeHandler.mock.calls[0][0].getHours()).toBe(12)
       expect(changeHandler.mock.calls[0][0].getMinutes()).toBe(25)
     })
@@ -260,7 +259,6 @@ describe('<TimePicker />', () => {
         .simulate('click', testUtils.stubClickEvent(190, 230)) // click on 25
         .simulate('mouseup', testUtils.stubClickEvent(190, 230)) // click on 25
 
-      expect(changeHandler).toBeCalled()
       expect(changeHandler.mock.calls[0][0].getHours()).toBe(12)
       expect(changeHandler.mock.calls[0][0].getMinutes()).toBe(25)
     })
diff --git a/src/__snapshots__/Clock.spec.js.snap b/src/__snapshots__/Clock.spec.js.snap
index 330069b..9ff8a27 100644
--- a/src/__snapshots__/Clock.spec.js.snap
+++ b/src/__snapshots__/Clock.spec.js.snap
@@ -566,6 +566,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="5"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(54.000000000000014px, -93.53074360871936px)",
             }
           }
@@ -577,6 +578,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="10"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(93.53074360871938px, -53.99999999999999px)",
             }
           }
@@ -588,6 +590,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="15"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(108px, 0px)",
             }
           }
@@ -599,6 +602,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="20"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(93.53074360871938px, 53.99999999999999px)",
             }
           }
@@ -610,6 +614,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="25"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(54.000000000000014px, 93.53074360871936px)",
             }
           }
@@ -621,6 +626,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="30"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(6.6130927153957075e-15px, 108px)",
             }
           }
@@ -632,6 +638,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="35"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-53.99999999999998px, 93.53074360871938px)",
             }
           }
@@ -643,6 +650,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="40"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-93.53074360871938px, 53.99999999999999px)",
             }
           }
@@ -654,6 +662,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="45"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-108px, 1.3226185430791415e-14px)",
             }
           }
@@ -665,6 +674,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="50"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-93.53074360871939px, -53.99999999999997px)",
             }
           }
@@ -676,6 +686,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="55"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-54.00000000000005px, -93.53074360871936px)",
             }
           }
@@ -687,6 +698,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="60"
           style={
             Object {
+              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-1.983927814618712e-14px, -108px)",
             }
           }
diff --git a/src/__snapshots__/TimeInput.spec.js.snap b/src/__snapshots__/TimeInput.spec.js.snap
index a2edf34..2165500 100644
--- a/src/__snapshots__/TimeInput.spec.js.snap
+++ b/src/__snapshots__/TimeInput.spec.js.snap
@@ -8,6 +8,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
   <TimeInput
     autoOk={false}
     cancelLabel="Cancel"
+    cancelOnClose={true}
     classes={
       Object {
         "body": "TimeInput-body-2",
@@ -15,6 +16,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
       }
     }
     defaultValue={2017-10-15T13:37:00.000Z}
+    minutesStep={1}
     mode="12h"
     okLabel="Ok"
   >
@@ -79,13 +81,17 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
         TransitionComponent={[Function]}
         classes={
           Object {
-            "paper": "MuiDialog-paper-17",
-            "paperFullScreen": "MuiDialog-paperFullScreen-22",
-            "paperFullWidth": "MuiDialog-paperFullWidth-21",
-            "paperWidthMd": "MuiDialog-paperWidthMd-20",
-            "paperWidthSm": "MuiDialog-paperWidthSm-19",
-            "paperWidthXs": "MuiDialog-paperWidthXs-18",
+            "paper": "MuiDialog-paper-19",
+            "paperFullScreen": "MuiDialog-paperFullScreen-26",
+            "paperFullWidth": "MuiDialog-paperFullWidth-25",
+            "paperScrollBody": "MuiDialog-paperScrollBody-21",
+            "paperScrollPaper": "MuiDialog-paperScrollPaper-20",
+            "paperWidthMd": "MuiDialog-paperWidthMd-24",
+            "paperWidthSm": "MuiDialog-paperWidthSm-23",
+            "paperWidthXs": "MuiDialog-paperWidthXs-22",
             "root": "MuiDialog-root-16",
+            "scrollBody": "MuiDialog-scrollBody-18",
+            "scrollPaper": "MuiDialog-scrollPaper-17",
           }
         }
         disableBackdropClick={false}
@@ -95,6 +101,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
         maxWidth="xs"
         onClose={[Function]}
         open={false}
+        scroll="paper"
         transitionDuration={
           Object {
             "enter": 225,
@@ -111,7 +118,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
               },
             }
           }
-          className="MuiDialog-root-16"
+          className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
           disableBackdropClick={false}
           disableEscapeKeyDown={false}
           onClose={[Function]}
@@ -128,17 +135,18 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
                 },
               }
             }
-            className="MuiDialog-root-16"
+            className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
             classes={
               Object {
-                "hidden": "MuiModal-hidden-24",
-                "root": "MuiModal-root-23",
+                "hidden": "MuiModal-hidden-28",
+                "root": "MuiModal-root-27",
               }
             }
             disableAutoFocus={false}
             disableBackdropClick={false}
             disableEnforceFocus={false}
             disableEscapeKeyDown={false}
+            disablePortal={false}
             disableRestoreFocus={false}
             hideBackdrop={false}
             keepMounted={false}
@@ -170,6 +178,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
   <TimeInput
     autoOk={false}
     cancelLabel="Cancel"
+    cancelOnClose={true}
     classes={
       Object {
         "body": "TimeInput-body-2",
@@ -177,6 +186,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
       }
     }
     defaultValue={2017-10-15T13:37:00.000Z}
+    minutesStep={1}
     mode="24h"
     okLabel="Ok"
   >
@@ -241,13 +251,17 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
         TransitionComponent={[Function]}
         classes={
           Object {
-            "paper": "MuiDialog-paper-17",
-            "paperFullScreen": "MuiDialog-paperFullScreen-22",
-            "paperFullWidth": "MuiDialog-paperFullWidth-21",
-            "paperWidthMd": "MuiDialog-paperWidthMd-20",
-            "paperWidthSm": "MuiDialog-paperWidthSm-19",
-            "paperWidthXs": "MuiDialog-paperWidthXs-18",
+            "paper": "MuiDialog-paper-19",
+            "paperFullScreen": "MuiDialog-paperFullScreen-26",
+            "paperFullWidth": "MuiDialog-paperFullWidth-25",
+            "paperScrollBody": "MuiDialog-paperScrollBody-21",
+            "paperScrollPaper": "MuiDialog-paperScrollPaper-20",
+            "paperWidthMd": "MuiDialog-paperWidthMd-24",
+            "paperWidthSm": "MuiDialog-paperWidthSm-23",
+            "paperWidthXs": "MuiDialog-paperWidthXs-22",
             "root": "MuiDialog-root-16",
+            "scrollBody": "MuiDialog-scrollBody-18",
+            "scrollPaper": "MuiDialog-scrollPaper-17",
           }
         }
         disableBackdropClick={false}
@@ -257,6 +271,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
         maxWidth="xs"
         onClose={[Function]}
         open={false}
+        scroll="paper"
         transitionDuration={
           Object {
             "enter": 225,
@@ -273,7 +288,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
               },
             }
           }
-          className="MuiDialog-root-16"
+          className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
           disableBackdropClick={false}
           disableEscapeKeyDown={false}
           onClose={[Function]}
@@ -290,17 +305,18 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
                 },
               }
             }
-            className="MuiDialog-root-16"
+            className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
             classes={
               Object {
-                "hidden": "MuiModal-hidden-24",
-                "root": "MuiModal-root-23",
+                "hidden": "MuiModal-hidden-28",
+                "root": "MuiModal-root-27",
               }
             }
             disableAutoFocus={false}
             disableBackdropClick={false}
             disableEnforceFocus={false}
             disableEscapeKeyDown={false}
+            disablePortal={false}
             disableRestoreFocus={false}
             hideBackdrop={false}
             keepMounted={false}
diff --git a/src/__snapshots__/TimePicker.spec.js.snap b/src/__snapshots__/TimePicker.spec.js.snap
index 2344aa0..706242b 100644
--- a/src/__snapshots__/TimePicker.spec.js.snap
+++ b/src/__snapshots__/TimePicker.spec.js.snap
@@ -65,6 +65,7 @@ exports[`<TimePicker /> 12h matches the snapshot 1`] = `
         className="TimePicker-body-7"
       >
         <WithStyles(Clock)
+          minutesStep={1}
           mode="12h"
           onChange={[Function]}
           onMouseUp={[Function]}
@@ -86,6 +87,7 @@ exports[`<TimePicker /> 12h matches the snapshot 1`] = `
                 "smallPointer": "Clock-smallPointer-14",
               }
             }
+            minutesStep={1}
             mode="12h"
             onChange={[Function]}
             onMouseUp={[Function]}
@@ -317,6 +319,7 @@ exports[`<TimePicker /> 24h matches the snapshot 1`] = `
         className="TimePicker-body-7"
       >
         <WithStyles(Clock)
+          minutesStep={1}
           mode="24h"
           onChange={[Function]}
           onMouseUp={[Function]}
@@ -338,6 +341,7 @@ exports[`<TimePicker /> 24h matches the snapshot 1`] = `
                 "smallPointer": "Clock-smallPointer-14",
               }
             }
+            minutesStep={1}
             mode="24h"
             onChange={[Function]}
             onMouseUp={[Function]}

From 1e069f5d7da4cadd630910733349f59d7a521a87 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 16:38:49 +0200
Subject: [PATCH 05/15] Ammend last removed line

---
 src/TimePicker.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/TimePicker.spec.js b/src/TimePicker.spec.js
index efdabb9..8ed0fe0 100644
--- a/src/TimePicker.spec.js
+++ b/src/TimePicker.spec.js
@@ -78,6 +78,7 @@ describe('<TimePicker />', () => {
         .simulate('click', testUtils.stubClickEvent(190, 230)) // click on 25
         .simulate('mouseup', testUtils.stubClickEvent(190, 230)) // click on 25
 
+      expect(changeHandler).toBeCalled()
       expect(changeHandler.mock.calls[0][0].getHours()).toBe(12)
       expect(changeHandler.mock.calls[0][0].getMinutes()).toBe(25)
     })
@@ -259,6 +260,7 @@ describe('<TimePicker />', () => {
         .simulate('click', testUtils.stubClickEvent(190, 230)) // click on 25
         .simulate('mouseup', testUtils.stubClickEvent(190, 230)) // click on 25
 
+      expect(changeHandler).toBeCalled()
       expect(changeHandler.mock.calls[0][0].getHours()).toBe(12)
       expect(changeHandler.mock.calls[0][0].getMinutes()).toBe(25)
     })

From c513fc1fa33c82a1632fb1f216a13d465ed36806 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 18:29:56 +0200
Subject: [PATCH 06/15] inputClasses property added

---
 src/TimeInput.js                         | 6 +++++-
 src/__snapshots__/TimeInput.spec.js.snap | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index a49b03e..1a272e0 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -59,6 +59,7 @@ class TimeInput extends React.Component {
       autoOk,
       cancelLabel,
       classes,
+      inputClasses,
       defaultValue, // eslint-disable-line
       disabled: disabledProp,
       mode,
@@ -88,6 +89,7 @@ class TimeInput extends React.Component {
         value={formattedValue}
         readOnly
         key='TimeInput-input'
+        classes={inputClasses || {}}
       />,
       <Dialog
         maxWidth='xs'
@@ -130,7 +132,9 @@ TimeInput.propTypes = {
   /** Steps between minutes. */
   minutesStep: PropTypes.number,
   /** Returns init date when dialog is closed (clicking background). */
-  cancelOnClose: PropTypes.bool
+  cancelOnClose: PropTypes.bool,
+  /** Classes applied to input. */
+  inputClasses: PropTypes.object
 }
 
 TimeInput.defaultProps = {
diff --git a/src/__snapshots__/TimeInput.spec.js.snap b/src/__snapshots__/TimeInput.spec.js.snap
index 2165500..6cb1689 100644
--- a/src/__snapshots__/TimeInput.spec.js.snap
+++ b/src/__snapshots__/TimeInput.spec.js.snap
@@ -21,6 +21,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
     okLabel="Ok"
   >
     <WithStyles(Input)
+      classes={Object {}}
       disabled={false}
       key="TimeInput-input"
       onClick={[Function]}
@@ -191,6 +192,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
     okLabel="Ok"
   >
     <WithStyles(Input)
+      classes={Object {}}
       disabled={false}
       key="TimeInput-input"
       onClick={[Function]}

From 3f2953fd2eeb2cc8214ca61fbe59c04a7e8aa79d Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 18:54:02 +0200
Subject: [PATCH 07/15] Updated snapshot

---
 src/__snapshots__/TimeInput.spec.js.snap | 52 +++++++++---------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/__snapshots__/TimeInput.spec.js.snap b/src/__snapshots__/TimeInput.spec.js.snap
index 6cb1689..bcd0a9e 100644
--- a/src/__snapshots__/TimeInput.spec.js.snap
+++ b/src/__snapshots__/TimeInput.spec.js.snap
@@ -82,17 +82,13 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
         TransitionComponent={[Function]}
         classes={
           Object {
-            "paper": "MuiDialog-paper-19",
-            "paperFullScreen": "MuiDialog-paperFullScreen-26",
-            "paperFullWidth": "MuiDialog-paperFullWidth-25",
-            "paperScrollBody": "MuiDialog-paperScrollBody-21",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper-20",
-            "paperWidthMd": "MuiDialog-paperWidthMd-24",
-            "paperWidthSm": "MuiDialog-paperWidthSm-23",
-            "paperWidthXs": "MuiDialog-paperWidthXs-22",
+            "paper": "MuiDialog-paper-17",
+            "paperFullScreen": "MuiDialog-paperFullScreen-22",
+            "paperFullWidth": "MuiDialog-paperFullWidth-21",
+            "paperWidthMd": "MuiDialog-paperWidthMd-20",
+            "paperWidthSm": "MuiDialog-paperWidthSm-19",
+            "paperWidthXs": "MuiDialog-paperWidthXs-18",
             "root": "MuiDialog-root-16",
-            "scrollBody": "MuiDialog-scrollBody-18",
-            "scrollPaper": "MuiDialog-scrollPaper-17",
           }
         }
         disableBackdropClick={false}
@@ -102,7 +98,6 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
         maxWidth="xs"
         onClose={[Function]}
         open={false}
-        scroll="paper"
         transitionDuration={
           Object {
             "enter": 225,
@@ -119,7 +114,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
               },
             }
           }
-          className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
+          className="MuiDialog-root-16"
           disableBackdropClick={false}
           disableEscapeKeyDown={false}
           onClose={[Function]}
@@ -136,18 +131,17 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
                 },
               }
             }
-            className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
+            className="MuiDialog-root-16"
             classes={
               Object {
-                "hidden": "MuiModal-hidden-28",
-                "root": "MuiModal-root-27",
+                "hidden": "MuiModal-hidden-24",
+                "root": "MuiModal-root-23",
               }
             }
             disableAutoFocus={false}
             disableBackdropClick={false}
             disableEnforceFocus={false}
             disableEscapeKeyDown={false}
-            disablePortal={false}
             disableRestoreFocus={false}
             hideBackdrop={false}
             keepMounted={false}
@@ -253,17 +247,13 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
         TransitionComponent={[Function]}
         classes={
           Object {
-            "paper": "MuiDialog-paper-19",
-            "paperFullScreen": "MuiDialog-paperFullScreen-26",
-            "paperFullWidth": "MuiDialog-paperFullWidth-25",
-            "paperScrollBody": "MuiDialog-paperScrollBody-21",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper-20",
-            "paperWidthMd": "MuiDialog-paperWidthMd-24",
-            "paperWidthSm": "MuiDialog-paperWidthSm-23",
-            "paperWidthXs": "MuiDialog-paperWidthXs-22",
+            "paper": "MuiDialog-paper-17",
+            "paperFullScreen": "MuiDialog-paperFullScreen-22",
+            "paperFullWidth": "MuiDialog-paperFullWidth-21",
+            "paperWidthMd": "MuiDialog-paperWidthMd-20",
+            "paperWidthSm": "MuiDialog-paperWidthSm-19",
+            "paperWidthXs": "MuiDialog-paperWidthXs-18",
             "root": "MuiDialog-root-16",
-            "scrollBody": "MuiDialog-scrollBody-18",
-            "scrollPaper": "MuiDialog-scrollPaper-17",
           }
         }
         disableBackdropClick={false}
@@ -273,7 +263,6 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
         maxWidth="xs"
         onClose={[Function]}
         open={false}
-        scroll="paper"
         transitionDuration={
           Object {
             "enter": 225,
@@ -290,7 +279,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
               },
             }
           }
-          className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
+          className="MuiDialog-root-16"
           disableBackdropClick={false}
           disableEscapeKeyDown={false}
           onClose={[Function]}
@@ -307,18 +296,17 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
                 },
               }
             }
-            className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
+            className="MuiDialog-root-16"
             classes={
               Object {
-                "hidden": "MuiModal-hidden-28",
-                "root": "MuiModal-root-27",
+                "hidden": "MuiModal-hidden-24",
+                "root": "MuiModal-root-23",
               }
             }
             disableAutoFocus={false}
             disableBackdropClick={false}
             disableEnforceFocus={false}
             disableEscapeKeyDown={false}
-            disablePortal={false}
             disableRestoreFocus={false}
             hideBackdrop={false}
             keepMounted={false}

From 2add8901c4e47eb3a60e672a2fc6b871bde80fa0 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Mon, 20 Aug 2018 20:38:30 +0200
Subject: [PATCH 08/15] Disabled numbers with less opacity (disabled class)

---
 src/Clock.js                         | 11 +++++++----
 src/__snapshots__/Clock.spec.js.snap | 12 ------------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/Clock.js b/src/Clock.js
index 6ddcc63..1114c05 100755
--- a/src/Clock.js
+++ b/src/Clock.js
@@ -35,7 +35,8 @@ const styles = (theme) => ({
     userSelect: 'none',
     '&.selected': {
       color: getContrastRatio(theme.palette.primary.main, theme.palette.common.black) < 7 ? theme.palette.common.white : theme.palette.common.black
-    }
+    },
+    '&.disabled': { opacity: '0.3' }
   },
   smallNumber: {
     fontSize: '12px',
@@ -191,10 +192,12 @@ class Clock extends React.PureComponent {
           {mode === 'minutes' && getNumbers(12, { size, start: 5, step: 5 }).map((digit, i) => (
             <span
               key={digit.display}
-              className={classNames(classes.number, { selected: value === digit.display || (digit.display === 60 && value === 0) })}
+              className={classNames(
+                classes.number,
+                { selected: value === digit.display || (digit.display === 60 && value === 0) },
+                { disabled: digit.display % (this.props.minutesStep || 1) })}
               style={{
-                transform: `translate(${digit.translateX}px, ${digit.translateY}px)`,
-                color: digit.display % (this.props.minutesStep || 1) ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.87)'
+                transform: `translate(${digit.translateX}px, ${digit.translateY}px)`
               }}
             >
               {digit.display === 60 ? '00' : digit.display}
diff --git a/src/__snapshots__/Clock.spec.js.snap b/src/__snapshots__/Clock.spec.js.snap
index 9ff8a27..330069b 100644
--- a/src/__snapshots__/Clock.spec.js.snap
+++ b/src/__snapshots__/Clock.spec.js.snap
@@ -566,7 +566,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="5"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(54.000000000000014px, -93.53074360871936px)",
             }
           }
@@ -578,7 +577,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="10"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(93.53074360871938px, -53.99999999999999px)",
             }
           }
@@ -590,7 +588,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="15"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(108px, 0px)",
             }
           }
@@ -602,7 +599,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="20"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(93.53074360871938px, 53.99999999999999px)",
             }
           }
@@ -614,7 +610,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="25"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(54.000000000000014px, 93.53074360871936px)",
             }
           }
@@ -626,7 +621,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="30"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(6.6130927153957075e-15px, 108px)",
             }
           }
@@ -638,7 +632,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="35"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-53.99999999999998px, 93.53074360871938px)",
             }
           }
@@ -650,7 +643,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="40"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-93.53074360871938px, 53.99999999999999px)",
             }
           }
@@ -662,7 +654,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="45"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-108px, 1.3226185430791415e-14px)",
             }
           }
@@ -674,7 +665,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="50"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-93.53074360871939px, -53.99999999999997px)",
             }
           }
@@ -686,7 +676,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="55"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-54.00000000000005px, -93.53074360871936px)",
             }
           }
@@ -698,7 +687,6 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
           key="60"
           style={
             Object {
-              "color": "rgba(0, 0, 0, 0.87)",
               "transform": "translate(-1.983927814618712e-14px, -108px)",
             }
           }

From b66f29910ab07f8daaef027fa76f74e4acf19fa0 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 17:39:05 +0200
Subject: [PATCH 09/15] Code cleaned

---
 src/Clock.js      | 13 ++++++++-----
 src/TimeInput.js  | 23 ++++++++++-------------
 src/TimePicker.js | 13 +++++++------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/Clock.js b/src/Clock.js
index 1114c05..96d329d 100755
--- a/src/Clock.js
+++ b/src/Clock.js
@@ -194,8 +194,7 @@ class Clock extends React.PureComponent {
               key={digit.display}
               className={classNames(
                 classes.number,
-                { selected: value === digit.display || (digit.display === 60 && value === 0) },
-                { disabled: digit.display % (this.props.minutesStep || 1) })}
+                { selected: value === digit.display || (digit.display === 60 && value === 0), disabled: digit.display % (this.props.minutesStep) })}
               style={{
                 transform: `translate(${digit.translateX}px, ${digit.translateY}px)`
               }}
@@ -210,14 +209,18 @@ class Clock extends React.PureComponent {
 }
 
 Clock.propTypes = {
+  /** Steps between minutes. */
+  minutesStep: PropTypes.number,
   /** Sets the mode of this clock. It can either select hours (supports 12- and 24-hour-clock) or minutes. */
   mode: PropTypes.oneOf(['12h', '24h', 'minutes']).isRequired,
   /** Callback that is called with the new hours/minutes (as a number) when the value is changed. */
   onChange: PropTypes.func,
   /** The value of the clock. */
-  value: PropTypes.number.isRequired,
-  /** Steps between minutes. */
-  minutesStep: PropTypes.number
+  value: PropTypes.number.isRequired
+}
+
+Clock.defaultProps = {
+  minutesStep: 1
 }
 
 export default withStyles(styles)(Clock)
diff --git a/src/TimeInput.js b/src/TimeInput.js
index 1a272e0..288e5e8 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -59,7 +59,6 @@ class TimeInput extends React.Component {
       autoOk,
       cancelLabel,
       classes,
-      inputClasses,
       defaultValue, // eslint-disable-line
       disabled: disabledProp,
       mode,
@@ -89,7 +88,7 @@ class TimeInput extends React.Component {
         value={formattedValue}
         readOnly
         key='TimeInput-input'
-        classes={inputClasses || {}}
+        classes={{ input: classes.input }}
       />,
       <Dialog
         maxWidth='xs'
@@ -103,7 +102,7 @@ class TimeInput extends React.Component {
           onChange={this.handleChange}
           onMinutesSelected={autoOk ? this.handleOk : null}
           classes={{ header: classes.header, body: classes.body }}
-          minutesStep={minutesStep || 1}
+          minutesStep={minutesStep}
         />
         <DialogActions>
           <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
@@ -119,8 +118,12 @@ TimeInput.propTypes = {
   autoOk: PropTypes.bool,
   /** Override the label of the cancel button. */
   cancelLabel: PropTypes.string,
+  /** Returns init date when dialog is closed (clicking background). */
+  cancelOnClose: PropTypes.bool,
   /** The initial value of the time picker. */
   defaultValue: PropTypes.instanceOf(Date),
+  /** Steps between minutes. */
+  minutesStep: PropTypes.number,
   /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
   mode: PropTypes.oneOf(['12h', '24h']),
   /** Override the label of the ok button. */
@@ -128,22 +131,16 @@ TimeInput.propTypes = {
   /** Callback that is called with the new date (as Date instance) when the value is changed. */
   onChange: PropTypes.func,
   /** The value of the time picker, for use in controlled mode. */
-  value: PropTypes.instanceOf(Date),
-  /** Steps between minutes. */
-  minutesStep: PropTypes.number,
-  /** Returns init date when dialog is closed (clicking background). */
-  cancelOnClose: PropTypes.bool,
-  /** Classes applied to input. */
-  inputClasses: PropTypes.object
+  value: PropTypes.instanceOf(Date)
 }
 
 TimeInput.defaultProps = {
   autoOk: false,
   cancelLabel: 'Cancel',
-  mode: '12h',
-  okLabel: 'Ok',
+  cancelOnClose: true,
   minutesStep: 1,
-  cancelOnClose: true
+  mode: '12h',
+  okLabel: 'Ok'
 }
 
 TimeInput.contextTypes = {
diff --git a/src/TimePicker.js b/src/TimePicker.js
index c6c37a1..c8dbbe6 100755
--- a/src/TimePicker.js
+++ b/src/TimePicker.js
@@ -83,7 +83,7 @@ class TimePicker extends React.Component {
       } else {
         this.setState({ hours: value }, this.propagateChange)
       }
-    } else if (value % (this.props.minutesStep || 1) === 0) {
+    } else if (value % (this.props.minutesStep) === 0) {
       this.setState({ minutes: value }, this.propagateChange)
     }
   }
@@ -184,7 +184,7 @@ class TimePicker extends React.Component {
             value={clockMode === 'minutes' ? minutes : hours}
             onMouseUp={this.handleClockChangeDone}
             onTouchEnd={this.handleClockChangeDone}
-            minutesStep={this.props.minutesStep || 1}
+            minutesStep={this.props.minutesStep}
           />
         </div>
       </div>
@@ -195,6 +195,8 @@ class TimePicker extends React.Component {
 TimePicker.propTypes = {
   /** The initial value of the time picker. */
   defaultValue: PropTypes.instanceOf(Date),
+  /** Steps between minutes. */
+  minutesStep: PropTypes.number,
   /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
   mode: PropTypes.oneOf(['12h', '24h']),
   /** Callback that is called with the new date (as Date instance) when the value is changed. */
@@ -202,13 +204,12 @@ TimePicker.propTypes = {
   /** Callback that is called when the minutes are changed. Can be used to automatically hide the picker after selecting a time. */
   onMinutesSelected: PropTypes.func,
   /** The value of the time picker, for use in controlled mode. */
-  value: PropTypes.instanceOf(Date),
-  /** Steps between minutes. */
-  minutesStep: PropTypes.number
+  value: PropTypes.instanceOf(Date)
 }
 
 TimePicker.defaultProps = {
-  mode: '12h'
+  mode: '12h',
+  minutesStep: 1
 }
 
 export default withStyles(styles)(TimePicker)

From dfe2d8683fd2eb34771518fc5bff0cb7a896f074 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 18:34:26 +0200
Subject: [PATCH 10/15] Added updateImmediately property

---
 src/TimeInput.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 288e5e8..9fccff0 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -37,18 +37,21 @@ class TimeInput extends React.Component {
   showDialog = () => this.setState({ open: true })
 
   handleChange = (value) => {
-    if (this.props.onChange != null) {
+    if (this.props.updateImmediately && this.props.onChange != null) {
       this.props.onChange(value)
     }
     this.setState({ value })
   }
 
   handleOk = () => {
+    if (!this.props.updateImmediately && this.props.onChange != null) {
+      this.props.onChange(this.state.value)
+    }
     this.setState({ open: false, initValue: this.state.value })
   }
 
   handleCancel = () => {
-    if (this.props.onChange != null) {
+    if (this.props.updateImmediately && this.props.onChange != null) {
       this.props.onChange(this.state.initValue)
     }
     this.setState({ open: false, value: this.state.initValue })
@@ -67,15 +70,17 @@ class TimeInput extends React.Component {
       value: valueProp, // eslint-disable-line
       minutesStep,
       cancelOnClose,
+      updateImmediately,
       ...other
     } = this.props
 
-    const { value } = this.state
+    const { initValue, value } = this.state
+    const inputValue = updateImmediately ? value : initValue;
 
-    const { hours, isPm } = formatHours(value.getHours(), mode)
+    const { hours, isPm } = formatHours(inputValue.getHours(), mode)
     const formattedValue = mode === '12h'
-      ? `${hours}:${twoDigits(value.getMinutes())} ${isPm ? 'pm' : 'am'}`
-      : `${twoDigits(value.getHours())}:${twoDigits(value.getMinutes())}`
+      ? `${hours}:${twoDigits(inputValue.getMinutes())} ${isPm ? 'pm' : 'am'}`
+      : `${twoDigits(inputValue.getHours())}:${twoDigits(inputValue.getMinutes())}`
 
     const { muiFormControl } = this.context
     const disabled = disabledProp || (muiFormControl != null && muiFormControl.disabled)
@@ -98,11 +103,11 @@ class TimeInput extends React.Component {
       >
         <TimePicker
           mode={mode}
+          minutesStep={minutesStep}
           value={value}
           onChange={this.handleChange}
           onMinutesSelected={autoOk ? this.handleOk : null}
           classes={{ header: classes.header, body: classes.body }}
-          minutesStep={minutesStep}
         />
         <DialogActions>
           <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
@@ -130,6 +135,8 @@ TimeInput.propTypes = {
   okLabel: PropTypes.string,
   /** Callback that is called with the new date (as Date instance) when the value is changed. */
   onChange: PropTypes.func,
+  /** Updates the input field when clock hands are moved */
+  updateImmediately: PropTypes.bool,
   /** The value of the time picker, for use in controlled mode. */
   value: PropTypes.instanceOf(Date)
 }
@@ -140,7 +147,8 @@ TimeInput.defaultProps = {
   cancelOnClose: true,
   minutesStep: 1,
   mode: '12h',
-  okLabel: 'Ok'
+  okLabel: 'Ok',
+  updateImmediately: false
 }
 
 TimeInput.contextTypes = {

From 4c9eb3a1e64606ea22459a77079d5ea96721a58b Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 18:54:57 +0200
Subject: [PATCH 11/15] Set initValue when value prop is updated

---
 src/TimeInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 9fccff0..80ade42 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -30,7 +30,7 @@ class TimeInput extends React.Component {
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.value !== this.props.value) {
-      this.setState({ value: nextProps.value })
+      this.setState({ initValue: nextProps.value, value: nextProps.value })
     }
   }
 

From 256e1ab42510b1fd4beac4ac71d901d2a4aef112 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 18:55:11 +0200
Subject: [PATCH 12/15] Updated snapshots

---
 src/__snapshots__/Clock.spec.js.snap      |  3 +++
 src/__snapshots__/TimeInput.spec.js.snap  | 14 ++++++++++++--
 src/__snapshots__/TimePicker.spec.js.snap |  2 ++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/__snapshots__/Clock.spec.js.snap b/src/__snapshots__/Clock.spec.js.snap
index 330069b..eb81c6a 100644
--- a/src/__snapshots__/Clock.spec.js.snap
+++ b/src/__snapshots__/Clock.spec.js.snap
@@ -20,6 +20,7 @@ exports[`<Clock /> 12h matches the snapshot 1`] = `
         "smallPointer": "Clock-smallPointer-7",
       }
     }
+    minutesStep={1}
     mode="12h"
     value={7}
   >
@@ -209,6 +210,7 @@ exports[`<Clock /> 24h matches the snapshot 1`] = `
         "smallPointer": "Clock-smallPointer-7",
       }
     }
+    minutesStep={1}
     mode="24h"
     value={7}
   >
@@ -530,6 +532,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
         "smallPointer": "Clock-smallPointer-7",
       }
     }
+    minutesStep={1}
     mode="minutes"
     value={42}
   >
diff --git a/src/__snapshots__/TimeInput.spec.js.snap b/src/__snapshots__/TimeInput.spec.js.snap
index bcd0a9e..270badf 100644
--- a/src/__snapshots__/TimeInput.spec.js.snap
+++ b/src/__snapshots__/TimeInput.spec.js.snap
@@ -19,9 +19,14 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
     minutesStep={1}
     mode="12h"
     okLabel="Ok"
+    updateImmediately={false}
   >
     <WithStyles(Input)
-      classes={Object {}}
+      classes={
+        Object {
+          "input": undefined,
+        }
+      }
       disabled={false}
       key="TimeInput-input"
       onClick={[Function]}
@@ -184,9 +189,14 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
     minutesStep={1}
     mode="24h"
     okLabel="Ok"
+    updateImmediately={false}
   >
     <WithStyles(Input)
-      classes={Object {}}
+      classes={
+        Object {
+          "input": undefined,
+        }
+      }
       disabled={false}
       key="TimeInput-input"
       onClick={[Function]}
diff --git a/src/__snapshots__/TimePicker.spec.js.snap b/src/__snapshots__/TimePicker.spec.js.snap
index 706242b..3c4f6f6 100644
--- a/src/__snapshots__/TimePicker.spec.js.snap
+++ b/src/__snapshots__/TimePicker.spec.js.snap
@@ -17,6 +17,7 @@ exports[`<TimePicker /> 12h matches the snapshot 1`] = `
         "time": "TimePicker-time-3",
       }
     }
+    minutesStep={1}
     mode="12h"
     value={2017-10-15T13:37:00.000Z}
   >
@@ -284,6 +285,7 @@ exports[`<TimePicker /> 24h matches the snapshot 1`] = `
         "time": "TimePicker-time-3",
       }
     }
+    minutesStep={1}
     mode="24h"
     value={2017-10-15T13:37:00.000Z}
   >

From 7328a86754946b884a8fbd0587610ec2fb5accc6 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 18:58:27 +0200
Subject: [PATCH 13/15] Renamed property: cancelOnClose to selectOnClose

---
 src/TimeInput.js                         | 10 +++++-----
 src/__snapshots__/TimeInput.spec.js.snap |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 80ade42..055afaa 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -69,7 +69,7 @@ class TimeInput extends React.Component {
       onChange, // eslint-disable-line
       value: valueProp, // eslint-disable-line
       minutesStep,
-      cancelOnClose,
+      selectOnClose,
       updateImmediately,
       ...other
     } = this.props
@@ -99,7 +99,7 @@ class TimeInput extends React.Component {
         maxWidth='xs'
         open={this.state.open}
         key='TimeInput-dialog'
-        onClose={cancelOnClose ? this.handleCancel : this.handleOk}
+        onClose={selectOnClose ? this.handleOk : this.handleCancel}
       >
         <TimePicker
           mode={mode}
@@ -123,8 +123,8 @@ TimeInput.propTypes = {
   autoOk: PropTypes.bool,
   /** Override the label of the cancel button. */
   cancelLabel: PropTypes.string,
-  /** Returns init date when dialog is closed (clicking background). */
-  cancelOnClose: PropTypes.bool,
+  /** Sets the date when dialog is closed (clicking background). */
+  selectOnClose: PropTypes.bool,
   /** The initial value of the time picker. */
   defaultValue: PropTypes.instanceOf(Date),
   /** Steps between minutes. */
@@ -144,7 +144,7 @@ TimeInput.propTypes = {
 TimeInput.defaultProps = {
   autoOk: false,
   cancelLabel: 'Cancel',
-  cancelOnClose: true,
+  selectOnClose: false,
   minutesStep: 1,
   mode: '12h',
   okLabel: 'Ok',
diff --git a/src/__snapshots__/TimeInput.spec.js.snap b/src/__snapshots__/TimeInput.spec.js.snap
index 270badf..117a62a 100644
--- a/src/__snapshots__/TimeInput.spec.js.snap
+++ b/src/__snapshots__/TimeInput.spec.js.snap
@@ -8,7 +8,6 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
   <TimeInput
     autoOk={false}
     cancelLabel="Cancel"
-    cancelOnClose={true}
     classes={
       Object {
         "body": "TimeInput-body-2",
@@ -19,6 +18,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
     minutesStep={1}
     mode="12h"
     okLabel="Ok"
+    selectOnClose={false}
     updateImmediately={false}
   >
     <WithStyles(Input)
@@ -178,7 +178,6 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
   <TimeInput
     autoOk={false}
     cancelLabel="Cancel"
-    cancelOnClose={true}
     classes={
       Object {
         "body": "TimeInput-body-2",
@@ -189,6 +188,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
     minutesStep={1}
     mode="24h"
     okLabel="Ok"
+    selectOnClose={false}
     updateImmediately={false}
   >
     <WithStyles(Input)

From 8aba6e061508adff55f2cfd23bcf5b28000898a7 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 19:02:47 +0200
Subject: [PATCH 14/15] Props alphabetically sorted

---
 src/TimeInput.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 055afaa..5019e92 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -123,8 +123,6 @@ TimeInput.propTypes = {
   autoOk: PropTypes.bool,
   /** Override the label of the cancel button. */
   cancelLabel: PropTypes.string,
-  /** Sets the date when dialog is closed (clicking background). */
-  selectOnClose: PropTypes.bool,
   /** The initial value of the time picker. */
   defaultValue: PropTypes.instanceOf(Date),
   /** Steps between minutes. */
@@ -135,6 +133,8 @@ TimeInput.propTypes = {
   okLabel: PropTypes.string,
   /** Callback that is called with the new date (as Date instance) when the value is changed. */
   onChange: PropTypes.func,
+  /** Sets the date when dialog is closed (clicking background). */
+  selectOnClose: PropTypes.bool,
   /** Updates the input field when clock hands are moved */
   updateImmediately: PropTypes.bool,
   /** The value of the time picker, for use in controlled mode. */
@@ -144,10 +144,10 @@ TimeInput.propTypes = {
 TimeInput.defaultProps = {
   autoOk: false,
   cancelLabel: 'Cancel',
-  selectOnClose: false,
   minutesStep: 1,
   mode: '12h',
   okLabel: 'Ok',
+  selectOnClose: false,
   updateImmediately: false
 }
 

From bb0997252eb76702825397f3f27793153d301912 Mon Sep 17 00:00:00 2001
From: Serg <Sergio.357.95@gmail.com>
Date: Fri, 12 Oct 2018 19:05:47 +0200
Subject: [PATCH 15/15] Standard style

---
 src/TimeInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 5019e92..7a25494 100755
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -75,7 +75,7 @@ class TimeInput extends React.Component {
     } = this.props
 
     const { initValue, value } = this.state
-    const inputValue = updateImmediately ? value : initValue;
+    const inputValue = updateImmediately ? value : initValue
 
     const { hours, isPm } = formatHours(inputValue.getHours(), mode)
     const formattedValue = mode === '12h'