Arrow up and down to change the address (#7)

* Updated all the dependencies to latest version

* Config files updated

* Moved the files to src directory

* Updated README file

* Configured package.json and README.md for production build

* Added gh-pages package

* Added production details in README.md

* Removed unnecessary script tag from index.html

* Change the fonts to ubuntu

* Add arrow up/down behavior to change the number

* Removed dist folder

* Refactor handleKeyDown function

* Added condition to restrict the number of octet

1 files changed, 16 insertions, 0 deletions

diff --git a/src/index.js b/src/index.js
index c1c6825..fa4c8bc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ class IPAddress extends Component {
       cidr: 28
     };
     this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
   handleChange(event) {
@@ -34,6 +35,19 @@ class IPAddress extends Component {
     }
   }
 
+  handleKeyDown(event) {
+    var lowerOctetValue = 0;
+    var higherOctetValue = event.target.dataset.octet === 'cidr' ? 32 : 255;
+    if (event.key === 'ArrowDown' && event.target.value > lowerOctetValue) {
+      event.target.value = +event.target.value - 1;
+      this.handleChange(event);
+    }
+    if (event.key === 'ArrowUp' && event.target.value < higherOctetValue) {
+      event.target.value = +event.target.value + 1;
+      this.handleChange(event);
+    }
+  }
+
   getPretty() {
     return this.state.octets.join('.') + '/' + this.state.cidr;
   }
@@ -51,6 +65,7 @@ class IPAddress extends Component {
                 type="text"
                 data-octet={octet}
                 onChange={this.handleChange}
+                onKeyDown={this.handleKeyDown}
                 value={this.state.octets[octet]}
               />
               <span className="dot">{octet == '3' ? '/' : '.'}</span>
@@ -61,6 +76,7 @@ class IPAddress extends Component {
             type="text"
             data-octet="cidr"
             onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
             value={this.state.cidr}
           />
         </div>