From c48681b92f09b3d474233a8730066d9eb0f33c85 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Thu, 3 Aug 2023 12:12:33 +0200
Subject: [PATCH] feat: Allow dynamic value change for slider #1154 (#2095)

---
 ui/src/slider.test.tsx | 20 ++++++++++++++++++++
 ui/src/slider.tsx      | 15 +++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/ui/src/slider.test.tsx b/ui/src/slider.test.tsx
index 1b84613662..d7850b3471 100644
--- a/ui/src/slider.test.tsx
+++ b/ui/src/slider.test.tsx
@@ -47,6 +47,25 @@ describe('Slider.tsx', () => {
     expect(wave.args[name]).toBe(100)
   })
 
+  it('Set args when value is updated to different value', () => {
+    const { rerender } = render(<XSlider model={sliderProps} />)
+    expect(wave.args[name]).toBe(0)
+    rerender(<XSlider model={{ ...sliderProps, value: 40 }} />)
+    expect(wave.args[name]).toBe(40)
+  })
+
+  it('Set args when value is updated to intial value', () => {
+    const { container, rerender } = render(<XSlider model={{ ...sliderProps, value: 40 }} />)
+    expect(wave.args[name]).toBe(40)
+
+    container.querySelector('.ms-Slider-line')!.getBoundingClientRect = () => defaultRect
+    fireEvent.mouseDown(container.querySelector('.ms-Slider-slideBox')!, mouseEvent)
+    expect(wave.args[name]).toBe(50)
+
+    rerender(<XSlider model={{ ...sliderProps, value: 40 }} />)
+    expect(wave.args[name]).toBe(40)
+  })
+
   it('Sets args on slide', () => {
     const { container } = render(<XSlider model={sliderProps} />)
     container.querySelector('.ms-Slider-line')!.getBoundingClientRect = () => defaultRect
@@ -54,6 +73,7 @@ describe('Slider.tsx', () => {
 
     expect(wave.args[name]).toBe(50)
   })
+
   it('Calls sync on slide', () => {
     const pushMock = jest.fn()
     wave.push = pushMock
diff --git a/ui/src/slider.tsx b/ui/src/slider.tsx
index d60292c530..16d0a5210c 100644
--- a/ui/src/slider.tsx
+++ b/ui/src/slider.tsx
@@ -63,11 +63,18 @@ export const
     const
       { min = 0, max = 100, step = 1, value = 0 } = m,
       defaultValue = (value < min) ? min : ((value > max) ? max : value),
-      onChange = (v: U) => wave.args[m.name] = v,
+      [val, setVal] = React.useState(defaultValue),
+      onChange = (v: U) => {
+        wave.args[m.name] = v
+        m.value = v
+        setVal(v)
+      },
       onChanged = React.useCallback((_e: MouseEvent | KeyboardEvent | TouchEvent, _value: U) => { if (m.trigger) wave.push() }, [m.trigger])
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => { wave.args[m.name] = defaultValue }, [])
+    React.useEffect(() => {
+      wave.args[m.name] = defaultValue
+      setVal(defaultValue)
+    }, [defaultValue, m.name])
 
     return (
       <Fluent.Slider
@@ -77,7 +84,7 @@ export const
         min={min}
         max={max}
         step={step}
-        defaultValue={defaultValue}
+        value={val}
         showValue
         originFromZero={min < 0 && max >= 0}
         onChange={onChange}