New props, functionalities and behaviour

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',
@@ -134,7 +135,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 (
@@ -191,7 +192,10 @@ 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)`
               }}
@@ -211,7 +215,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)

src/TimeInput.js

@@ -24,7 +24,8 @@ class TimeInput extends React.Component {
     const defaultValue = new Date()
     defaultValue.setSeconds(0)
     defaultValue.setMilliseconds(0)
-    this.state = { open: false, value: props.value || props.defaultValue || defaultValue }
+    const initValue = props.value || props.defaultValue || defaultValue
+    this.state = { open: false, initValue, value: initValue }
   }
 
   componentWillReceiveProps (nextProps) {
@@ -33,36 +34,44 @@ class TimeInput extends React.Component {
     }
   }
 
-  showDialog = () => this.setState({ open: true, newValue: this.state.value })
+  showDialog = () => this.setState({ open: true })
 
-  handleChange = (newValue) => {
-    this.setState({ newValue })
+  handleChange = (value) => {
+    if (this.props.onChange != null) {
+      this.props.onChange(value)
+    }
+    this.setState({ value })
   }
 
   handleOk = () => {
+    this.setState({ open: false, initValue: this.state.value })
+  }
+
+  handleCancel = () => {
     if (this.props.onChange != null) {
-      this.props.onChange(this.state.newValue)
+      this.props.onChange(this.state.initValue)
     }
-    this.setState({ open: false, value: this.state.newValue, newValue: null })
+    this.setState({ open: false, value: this.state.initValue })
   }
 
-  handleCancel = () => this.setState({ open: false, newValue: null })
-
   render () {
     const {
       autoOk,
       cancelLabel,
       classes,
+      inputClasses,
       defaultValue, // eslint-disable-line
       disabled: disabledProp,
       mode,
       okLabel,
       onChange, // eslint-disable-line
       value: valueProp, // eslint-disable-line
+      minutesStep,
+      cancelOnClose,
       ...other
     } = this.props
 
-    const { value, newValue } = this.state
+    const { value } = this.state
 
     const { hours, isPm } = formatHours(value.getHours(), mode)
     const formattedValue = mode === '12h'
@@ -80,19 +89,21 @@ class TimeInput extends React.Component {
         value={formattedValue}
         readOnly
         key='TimeInput-input'
+        classes={inputClasses || {}}
       />,
       <Dialog
         maxWidth='xs'
         open={this.state.open}
         key='TimeInput-dialog'
-        onClose={this.handleCancel}
+        onClose={cancelOnClose ? this.handleCancel : this.handleOk}
       >
         <TimePicker
           mode={mode}
-          value={newValue}
+          value={value}
           onChange={this.handleChange}
           onMinutesSelected={autoOk ? this.handleOk : null}
           classes={{ header: classes.header, body: classes.body }}
+          minutesStep={minutesStep || 1}
         />
         <DialogActions>
           <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
@@ -117,14 +128,22 @@ 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,
+  /** Classes applied to input. */
+  inputClasses: PropTypes.object
 }
 
 TimeInput.defaultProps = {
   autoOk: false,
   cancelLabel: 'Cancel',
   mode: '12h',
-  okLabel: 'Ok'
+  okLabel: 'Ok',
+  minutesStep: 1,
+  cancelOnClose: true
 }
 
 TimeInput.contextTypes = {

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()
     })
   })
 })

src/TimePicker.js

@@ -83,10 +83,8 @@ class TimePicker extends React.Component {
       } else {
         this.setState({ hours: value }, this.propagateChange)
       }
-    } else {
-      this.setState({ minutes: value }, () => {
-        this.propagateChange()
-      })
+    } else if (value % (this.props.minutesStep || 1) === 0) {
+      this.setState({ minutes: value }, this.propagateChange)
     }
   }
 
@@ -186,6 +184,7 @@ class TimePicker extends React.Component {
             value={clockMode === 'minutes' ? minutes : hours}
             onMouseUp={this.handleClockChangeDone}
             onTouchEnd={this.handleClockChangeDone}
+            minutesStep={this.props.minutesStep || 1}
           />
         </div>
       </div>
@@ -203,7 +202,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 = {

src/__snapshots__/TimeInput.spec.js.snap

@@ -8,17 +8,20 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
   <TimeInput
     autoOk={false}
     cancelLabel="Cancel"
+    cancelOnClose={true}
     classes={
       Object {
         "body": "TimeInput-body-2",
         "header": "TimeInput-header-1",
       }
     }
     defaultValue={2017-10-15T13:37:00.000Z}
+    minutesStep={1}
     mode="12h"
     okLabel="Ok"
   >
     <WithStyles(Input)
+      classes={Object {}}
       disabled={false}
       key="TimeInput-input"
       onClick={[Function]}
@@ -170,17 +173,20 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
   <TimeInput
     autoOk={false}
     cancelLabel="Cancel"
+    cancelOnClose={true}
     classes={
       Object {
         "body": "TimeInput-body-2",
         "header": "TimeInput-header-1",
       }
     }
     defaultValue={2017-10-15T13:37:00.000Z}
+    minutesStep={1}
     mode="24h"
     okLabel="Ok"
   >
     <WithStyles(Input)
+      classes={Object {}}
       disabled={false}
       key="TimeInput-input"
       onClick={[Function]}

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]}