feat: Add change callback support for Slider.ts

Signed-off-by: Jaman Brundage <jbrundage372@gmail.com>
hpcc-systems · Oct 12, 2018 · 1e9bbad · 1e9bbad
1 parent 237fa4b
commit 1e9bbad
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/demos/dermatology/tests/formFactory.js b/demos/dermatology/tests/formFactory.js
@@ -132,7 +132,7 @@
             },
             dateRange: function (callback) {
                 legacyRequire(["test/DataFactory", "src/form/Slider"], function (DataFactory, Slider) {
-                    callback(new Slider()
+                    const slider = new Slider()
                         .allowRange(true)
                         .timePattern("%Y-%m-%d")
                         .tickDateFormat("%b,%Y")
@@ -143,7 +143,12 @@
                         .data([
                             ["1999-07-03", "2001-05-24"]
                         ])
-                    );
+                        ;
+                    slider.change = function(){
+                        console.log("Slider value changed");
+                        console.log(this.value());
+                    }
+                    callback(slider);
                 });
             }
         }

diff --git a/packages/form/src/Slider.ts b/packages/form/src/Slider.ts
@@ -14,6 +14,8 @@ export class Slider extends SVGWidget {
     moveMode: "both" | "left" | "right";
     moveStartPos: number;
 
+    prevValue;
+
     slider;
 
     handleLeft;
@@ -72,6 +74,7 @@ export class Slider extends SVGWidget {
                 .on("end", () => {
                     this.moveHandleTo(d3Event.x);
                     this.data([[this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)]]);
+                    this.checkChangedValue();
                 }));
 
         this.slider.insert("g", ".track-overlay")
@@ -163,6 +166,14 @@ export class Slider extends SVGWidget {
         this.handleLeftPos = this.lowPos();
         this.handleRightPos = this.highPos();
         this.updateHandles();
+        this.checkChangedValue();
+    }
+
+    checkChangedValue() {
+        if (this.prevValue !== this.value() && typeof this.prevValue !== "undefined") {
+            this.change(this);
+        }
+        this.prevValue = this.value();
     }
 
     updateHandles() {
@@ -218,7 +229,7 @@ export class Slider extends SVGWidget {
 
         this.handleLeftPos = this.constrain(this.handleLeftPos);
         this.handleRightPos = this.constrain(this.handleRightPos);
-        this.value(this.allowRange() ? this.xScale.invert(this.handleLeftPos) : [this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)]);
+        this.value(this.allowRange() ? [this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)] : this.xScale.invert(this.handleLeftPos));
         this.updateHandles();
     }
 
@@ -260,6 +271,7 @@ export class Slider extends SVGWidget {
     };
 
     name: (_?: string) => string | this;
+    change: (_: Slider) => void;
 }
 Slider.prototype._class += " form_Slider";
 Slider.prototype.implements(IInput.prototype);