Add property passdowns and autoOpen properties (#28)

* Add TimePickerProps and ClockProps

* Add autoOpen prop

* Add specs

Author: TeaSeaLancs

src/TimeInput.js

@@ -25,10 +25,14 @@ class TimeInput extends React.Component {
     defaultValue.setSeconds(0)
     defaultValue.setMilliseconds(0)
 
+    const open = !!props.autoOpen
+    const value = props.value || props.defaultValue || props.initialTime || defaultValue
+
     this.state = {
-      open: false,
-      value: props.value || props.defaultValue || props.initialTime || defaultValue,
-      hasChanged: false
+      open,
+      value,
+      hasChanged: false,
+      newValue: open ? value : null
     }
   }
 
@@ -80,6 +84,7 @@ class TimeInput extends React.Component {
   render () {
     const {
       autoOk,
+      autoOpen, // eslint-disable-line
       cancelLabel,
       classes,
       defaultValue,
@@ -91,6 +96,8 @@ class TimeInput extends React.Component {
       okLabel,
       onChange,
       value: valueProp,
+      ClockProps,
+      TimePickerProps,
       ...other
     } = this.props
 
@@ -114,11 +121,13 @@ class TimeInput extends React.Component {
           onClose={this.handleCancel}
         >
           <TimePicker
+            {...TimePickerProps}
             mode={mode}
             value={newValue}
             onChange={this.handleChange}
             onMinutesSelected={autoOk ? this.handleOk : null}
             classes={{ header: classes.header, body: classes.body }}
+            ClockProps={ClockProps}
           />
           <DialogActions>
             <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
@@ -133,6 +142,8 @@ class TimeInput extends React.Component {
 TimeInput.propTypes = {
   /** If true, automatically accept and close the picker on set minutes. */
   autoOk: PropTypes.bool,
+  /** If true, automatically opens the dialog when the component is mounted */
+  autoOpen: PropTypes.bool,
   /** Override the label of the cancel button. */
   cancelLabel: PropTypes.string,
   /** This default value overrides initialTime and placeholder. */
@@ -150,7 +161,11 @@ 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),
+  /** Properties to pass down to the TimePicker component */
+  TimePickerProps: PropTypes.object,
+  /** Properties to pass down to the Clock component */
+  ClockProps: PropTypes.object
 }
 
 TimeInput.defaultProps = {

src/TimeInput.spec.js

@@ -6,6 +6,7 @@ import { unwrap } from '@material-ui/core/test-utils'
 import Button from '@material-ui/core/Button'
 import Input from '@material-ui/core/Input'
 import TimeInput from './TimeInput'
+import TimePicker from './TimePicker'
 import Clock from './Clock'
 import * as testUtils from '../test/utils'
 
@@ -192,6 +193,32 @@ describe('<TimeInput />', () => {
     const tree = mount(<TimeInput value={new Date(2017, 10, 15, 13, 37, 0, 0)} mode='24h' inputComponent={CustomInput} />)
     expect(tree.find(CustomInput).length).toBe(1)
   })
+
+  it('automatically opens when the autoOpen prop is true', () => {
+    const tree = mount(<TimeInput />)
+    expect(tree.find(TimePicker).length).toBe(0)
+
+    const tree2 = mount(<TimeInput autoOpen />)
+    expect(tree2.find(TimePicker).length).toBe(1)
+  })
+
+  it('supports sending properties down to the time picker via TimePickerProps', () => {
+    const TimePickerProps = {
+      some: 'timePickerProp'
+    }
+
+    const tree = mount(<TimeInput TimePickerProps={TimePickerProps} autoOpen />)
+    expect(tree.find(TimePicker).prop('some')).toEqual('timePickerProp')
+  })
+
+  it('supports sending properties down to the clock via ClockProps', () => {
+    const ClockProps = {
+      some: 'clockProp'
+    }
+
+    const tree = mount(<TimeInput ClockProps={ClockProps} autoOpen />)
+    expect(tree.find(Clock).prop('some')).toEqual('clockProp')
+  })
 })
 
 function getValue (timeInput) {

src/TimePicker.js

@@ -136,7 +136,8 @@ class TimePicker extends React.Component {
   render () {
     const {
       classes,
-      mode
+      mode,
+      ClockProps
     } = this.props
 
     const clockMode = this.state.select === 'm' ? 'minutes' : mode
@@ -181,6 +182,7 @@ class TimePicker extends React.Component {
         </div>
         <div className={classes.body}>
           <Clock
+            {...ClockProps}
             mode={clockMode}
             onChange={this.handleClockChange}
             value={clockMode === 'minutes' ? minutes : hours}
@@ -203,7 +205,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),
+  /** Properties to pass down to the Clock component */
+  ClockProps: PropTypes.object
 }
 
 TimePicker.defaultProps = {