feat: Allow dynamic value change for slider #1154 (#2095)

ui/src/slider.test.tsx

@@ -47,13 +47,33 @@ 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
     fireEvent.mouseDown(container.querySelector('.ms-Slider-slideBox')!, mouseEvent)
 
     expect(wave.args[name]).toBe(50)
   })
+
   it('Calls sync on slide', () => {
     const pushMock = jest.fn()
     wave.push = pushMock

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}