From 908258863ca9e5615db461892766291e5d0ede58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fodor=20G=C3=A1bor=20D=C3=A1niel?= <dani9417@gmail.com>
Date: Wed, 16 Aug 2017 12:31:14 +0200
Subject: [PATCH 1/3] Added className for input element

---
 src/TimeInput.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 2d5b01d..cfb8231 100644
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -22,17 +22,22 @@ var TimeInput = CreateReactClass({
   propTypes: {
     className: PropTypes.string,
     value: PropTypes.string,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    inputClassname: PropTypes.string
   },
   render () {
     var className = 'TimeInput'
     if (this.props.className) {
       className += (' ' + this.props.className)
     }
+    var inputClassname = 'TimeInput-input'
+    if (this.props.inputClassname) {
+      inputClassname += (' ' + this.props.inputClassname)
+    }
     return (
       <div className={className}>
         <input
-          className='TimeInput-input'
+          className={inputClassname}
           ref={(input) => { this.input = input }}
           type='text'
           value={this.format(this.props.value)}

From 03b5e824f03c826c90be4913c6cbd0473f1eaf55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fodor=20G=C3=A1bor=20D=C3=A1niel?= <dani9417@gmail.com>
Date: Wed, 16 Aug 2017 12:33:25 +0200
Subject: [PATCH 2/3] Added disabled prop to input element

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

diff --git a/src/TimeInput.js b/src/TimeInput.js
index cfb8231..448bdb9 100644
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -23,7 +23,8 @@ var TimeInput = CreateReactClass({
     className: PropTypes.string,
     value: PropTypes.string,
     onChange: PropTypes.func,
-    inputClassname: PropTypes.string
+    inputClassname: PropTypes.string,
+    disabled: PropTypes.bool
   },
   render () {
     var className = 'TimeInput'
@@ -38,6 +39,7 @@ var TimeInput = CreateReactClass({
       <div className={className}>
         <input
           className={inputClassname}
+          disabled={this.props.disabled}
           ref={(input) => { this.input = input }}
           type='text'
           value={this.format(this.props.value)}

From f0e4320750d4451f204d4d90b6a5299e95b3b8d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fodor=20G=C3=A1bor=20D=C3=A1niel?= <dani9417@gmail.com>
Date: Wed, 16 Aug 2017 12:44:27 +0200
Subject: [PATCH 3/3] Styles for both wrapper div and input

---
 src/TimeInput.js | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/TimeInput.js b/src/TimeInput.js
index 448bdb9..832a19b 100644
--- a/src/TimeInput.js
+++ b/src/TimeInput.js
@@ -24,7 +24,8 @@ var TimeInput = CreateReactClass({
     value: PropTypes.string,
     onChange: PropTypes.func,
     inputClassname: PropTypes.string,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    styles: PropTypes.object
   },
   render () {
     var className = 'TimeInput'
@@ -36,18 +37,21 @@ var TimeInput = CreateReactClass({
       inputClassname += (' ' + this.props.inputClassname)
     }
     return (
-      <div className={className}>
-        <input
-          className={inputClassname}
-          disabled={this.props.disabled}
-          ref={(input) => { this.input = input }}
-          type='text'
-          value={this.format(this.props.value)}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
-          onKeyDown={this.handleKeyDown}
-        />
-      </div>
+        <div className={className} style={this.props.styles && this.props.styles.wrapper}>
+          <input
+              className={inputClassname}
+              disabled={this.props.disabled}
+              style={this.props.styles && this.props.styles.input}
+              ref={(input) => {
+                this.input = input
+              }}
+              type='text'
+              value={this.format(this.props.value)}
+              onChange={this.handleChange}
+              onBlur={this.handleBlur}
+              onKeyDown={this.handleKeyDown}
+          />
+        </div>
     )
   },
   format (val) {
@@ -65,7 +69,7 @@ var TimeInput = CreateReactClass({
     if (index || index === 0) caret.set(this.input, index)
   },
   handleBlur () {
-    if (this.mounted) this.setState({ caretIndex: null })
+    if (this.mounted) this.setState({caretIndex: null})
   },
   handleEscape () {
     if (this.mounted) this.input.blur()
@@ -85,7 +89,7 @@ var TimeInput = CreateReactClass({
     event.preventDefault()
     var index = groupId * 3
     if (this.props.value.charAt(index) === ' ') index++
-    if (this.mounted) this.setState({ caretIndex: index })
+    if (this.mounted) this.setState({caretIndex: index})
   },
   handleArrows (event) {
     event.preventDefault()
@@ -204,12 +208,12 @@ var TimeInput = CreateReactClass({
       this.onChange(newValue, end)
     } else {
       var caretIndex = this.props.value.length - (newValue.length - end)
-      if (this.mounted) this.setState({ caretIndex: caretIndex })
+      if (this.mounted) this.setState({caretIndex: caretIndex})
     }
   },
   onChange: function (str, caretIndex) {
     if (this.props.onChange) this.props.onChange(this.format(str))
-    if (this.mounted && typeof caretIndex === 'number') this.setState({ caretIndex: caretIndex })
+    if (this.mounted && typeof caretIndex === 'number') this.setState({caretIndex: caretIndex})
   }
 })