Rename autoOpen to openOnMount. Keep props sorted alphabetically and update readme. #28

Author: leMaik

README.md

@@ -39,13 +39,16 @@ For detailed documentation, take a look into the [styleguide][]. The source code
 |---|---|---|---|
 |autoOk|`bool`|`false`|If true, automatically accept and close the picker on set minutes.|
 |cancelLabel|`string`|`'Cancel'`|Override the label of the cancel button.|
-|defaultValue|`Date`||The default value of the input and picker.|
-|initialTime|`Date`||The initial value of the time picker.|
+|ClockProps|`object`||Properties to pass down to the Clock component.|
+|defaultValue|`Date`||This default value overrides initialTime and placeholder.|
+|initialTime|`Date`||The default value for the time picker.|
 |inputComponent|`elementType`|`Input`|The component used for the input. Either a string to use a DOM element or a component.|
-|placeholder|`string`||The initial value of the actual input before a value is selected.|
+|placeholder|`string`||The placeholder value for the time picker before a time has been selected.|
 |mode|`enum: '12h' '24h'`|`'12h'`|Sets the clock mode, 12-hour or 24-hour clocks are supported.|
 |okLabel|`string`|`'Ok'`|Override the label of the ok button.|
 |onChange|`func`||Callback that is called with the new date (as Date instance) when the value is changed.|
+|openOnMount|`bool`||If true, automatically opens the dialog when the component is mounted.|
+|TimePickerProps|`object`||Properties to pass down to the TimePicker component.|
 |value|`Date`||The value of the time picker, for use in controlled mode.|
 
 Note: `TimeInput` behaves like Material-UI's `Input` component and can be used inside `FormControl`s.

src/TimeInput.js

@@ -25,7 +25,7 @@ class TimeInput extends React.Component {
     defaultValue.setSeconds(0)
     defaultValue.setMilliseconds(0)
 
-    const open = !!props.autoOpen
+    const open = !!props.openOnMount
     const value = props.value || props.defaultValue || props.initialTime || defaultValue
 
     this.state = {
@@ -84,9 +84,9 @@ class TimeInput extends React.Component {
   render () {
     const {
       autoOk,
-      autoOpen, // eslint-disable-line
       cancelLabel,
       classes,
+      ClockProps,
       defaultValue,
       disabled: disabledProp,
       initialTime,
@@ -95,9 +95,9 @@ class TimeInput extends React.Component {
       mode,
       okLabel,
       onChange,
-      value: valueProp,
-      ClockProps,
+      openOnMount,
       TimePickerProps,
+      value: valueProp,
       ...other
     } = this.props
 
@@ -142,10 +142,10 @@ 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,
+  /** Properties to pass down to the Clock component. */
+  ClockProps: PropTypes.object,
   /** This default value overrides initialTime and placeholder. */
   defaultValue: PropTypes.instanceOf(Date),
   /** The default value for the time picker. */
@@ -160,12 +160,12 @@ TimeInput.propTypes = {
   okLabel: PropTypes.string,
   /** 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),
-  /** Properties to pass down to the TimePicker component */
+  /** If true, automatically opens the dialog when the component is mounted. */
+  openOnMount: PropTypes.bool,
+  /** Properties to pass down to the TimePicker component. */
   TimePickerProps: PropTypes.object,
-  /** Properties to pass down to the Clock component */
-  ClockProps: PropTypes.object
+  /** The value of the time picker, for use in controlled mode. */
+  value: PropTypes.instanceOf(Date)
 }
 
 TimeInput.defaultProps = {

src/TimeInput.spec.js

@@ -194,11 +194,11 @@ describe('<TimeInput />', () => {
     expect(tree.find(CustomInput).length).toBe(1)
   })
 
-  it('automatically opens when the autoOpen prop is true', () => {
+  it('automatically opens when the openOnMount prop is true', () => {
     const tree = mount(<TimeInput />)
     expect(tree.find(TimePicker).length).toBe(0)
 
-    const tree2 = mount(<TimeInput autoOpen />)
+    const tree2 = mount(<TimeInput openOnMount />)
     expect(tree2.find(TimePicker).length).toBe(1)
   })
 
@@ -207,7 +207,7 @@ describe('<TimeInput />', () => {
       some: 'timePickerProp'
     }
 
-    const tree = mount(<TimeInput TimePickerProps={TimePickerProps} autoOpen />)
+    const tree = mount(<TimeInput TimePickerProps={TimePickerProps} openOnMount />)
     expect(tree.find(TimePicker).prop('some')).toEqual('timePickerProp')
   })
 
@@ -216,7 +216,7 @@ describe('<TimeInput />', () => {
       some: 'clockProp'
     }
 
-    const tree = mount(<TimeInput ClockProps={ClockProps} autoOpen />)
+    const tree = mount(<TimeInput ClockProps={ClockProps} openOnMount />)
     expect(tree.find(Clock).prop('some')).toEqual('clockProp')
   })
 })