fix(Slider): make it optional to provide an updated prop value (#1537)

dnbexperience · Aug 31, 2022 · ff1f3b7 · ff1f3b7
1 parent 2f3b82e
commit ff1f3b7
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md
@@ -5,3 +5,7 @@ showTabs: true
 ## Description
 
 The Slider component provides a visual indication of adjustable value. A value can be adjusted (increased or decreased) by moving the drag handle along a track (usually horizontal or vertical). Remember to inform users that they can also adjust the value directly in the value input field (if it exists).
+
+### Define a `min` and `max` value
+
+Keep in mind, you should most probably define your `min` and `max` value, because they are tied closely to your given value property.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md
@@ -6,7 +6,7 @@ showTabs: true
 
 | Properties                                  | Description                                                                                                                                                                                                                                                                                                                                                                        |
 | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`                                     | _(required)_ the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multible thumbs).                                                                                                                                                                                    |
+| `value`                                     | _(required)_ the `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multible thumbs).                                                                                                                                                                        |
 | `min`                                       | _(optional)_ the minimum value. Defaults to `0`.                                                                                                                                                                                                                                                                                                                                   |
 | `max`                                       | _(optional)_ the maximum value. Defaults to `100`                                                                                                                                                                                                                                                                                                                                  |
 | `step`                                      | _(optional)_ the steps the slider takes on changing the value. Defaults to `null`                                                                                                                                                                                                                                                                                                  |

diff --git a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx
@@ -102,6 +102,8 @@ export function SliderProvider(localProps: SliderProps) {
   } = allProps
 
   const [value, setValue] = React.useState<ValueTypes>(_value)
+  const [externValue, updateExternValue] =
+    React.useState<ValueTypes>(_value)
   const realtimeValue = React.useRef<ValueTypes>(_value)
   const [thumbState, setThumbState] =
     React.useState<ThumbStateEnums>('initial')
@@ -215,14 +217,16 @@ export function SliderProvider(localProps: SliderProps) {
   React.useEffect(() => {
     if (isMulti) {
       const hasChanged = (_value as Array<number>).some((val, i) => {
-        return val !== value[i]
+        return val !== externValue[i]
       })
 
       if (hasChanged) {
         updateValue(_value)
+        updateExternValue(_value)
       }
-    } else {
+    } else if (_value !== externValue) {
       updateValue(_value)
+      updateExternValue(_value)
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx
@@ -245,6 +245,9 @@ describe('Slider component', () => {
       return <Slider {...props} value={value} onChange={onChangehandler} />
     }
 
+    const getThumbElements = (index: number) =>
+      document.querySelectorAll('.dnb-slider__thumb')[index] as HTMLElement
+
     const getRangeElement = (index: number) =>
       document.querySelectorAll('[type="range"]')[
         index
@@ -266,6 +269,38 @@ describe('Slider component', () => {
       resetMouseSimulation()
     })
 
+    it('will net need on external prop changes', () => {
+      const WrongUsage = () => {
+        const [min, setMinVal] = React.useState(0) //eslint-disable-line
+        const [max, setMaxVal] = React.useState(200) //eslint-disable-line
+
+        return (
+          <Slider
+            max={200}
+            value={[0, 200]} // <-- Here we do not update the value
+            onChange={({ value }) => {
+              setMinVal(value[0])
+              setMaxVal(value[1])
+            }}
+          />
+        )
+      }
+
+      render(<WrongUsage />)
+
+      simulateMouseMove({ pageX: 20, width: 100, height: 10 })
+      expect(getThumbElements(0).getAttribute('style')).toBe(
+        'z-index: 4; left: 20%;'
+      )
+
+      simulateMouseMove({ pageX: 80, width: 100, height: 10 })
+      expect(getThumbElements(1).getAttribute('style')).toBe(
+        'z-index: 4; left: 80%;'
+      )
+
+      resetMouseSimulation()
+    })
+
     it('tracks mousemove on track', () => {
       const onChange = jest.fn()
 
@@ -365,11 +400,6 @@ describe('Slider component', () => {
         />
       )
 
-      const getThumbElements = (index: number) =>
-        document.querySelectorAll('.dnb-slider__thumb')[
-          index
-        ] as HTMLElement
-
       const secondThumb = document.querySelectorAll(
         '.dnb-slider__button-helper'
       )[1]