From aeb5ee41de34128548a7cff074b97ea7dba3fd16 Mon Sep 17 00:00:00 2001
From: Oren Fromberg <orenfromberg@gmail.com>
Date: Thu, 7 Apr 2022 13:09:09 -0400
Subject: Use mouse wheel to scroll CIDR octets (#57)

* Now handling wheel event

* Reversing scroll to be more intuitive
---
 src/index.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

(limited to 'src/index.js')

diff --git a/src/index.js b/src/index.js
index f5df9e8..53d9fc0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,6 +13,7 @@ class IPAddress extends Component {
     };
     this.handleChange = this.handleChange.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleWheel = this.handleWheel.bind(this);
   }
 
   handleChange(event) {
@@ -64,6 +65,19 @@ class IPAddress extends Component {
     }
   }
 
+  handleWheel(event) {
+    var lowerOctetValue = 0;
+    var higherOctetValue = event.target.dataset.octet === 'cidr' ? 32 : 255;
+    if (event.deltaY > 0 && event.target.value > lowerOctetValue) {
+      event.target.value = +event.target.value - 1;
+      this.handleChange(event);
+    }
+    if (event.deltaY < 0 && event.target.value < higherOctetValue) {
+      event.target.value = +event.target.value + 1;
+      this.handleChange(event);
+    }
+  }
+
   getPretty() {
     return this.state.octets.join('.') + '/' + this.state.cidr;
   }
@@ -82,6 +96,7 @@ class IPAddress extends Component {
                 data-octet={octet}
                 onChange={this.handleChange}
                 onKeyDown={this.handleKeyDown}
+                onWheel={this.handleWheel}
                 value={this.state.octets[octet]}
               />
               <span className="dot">{octet == '3' ? '/' : '.'}</span>
@@ -93,6 +108,7 @@ class IPAddress extends Component {
             data-octet="cidr"
             onChange={this.handleChange}
             onKeyDown={this.handleKeyDown}
+            onWheel={this.handleWheel}
             value={this.state.cidr}
           />
         </div>
-- 
cgit v1.3.1