Enhance the Slider Component

.changeset/beige-rice-shout.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Enhance the Slider component

packages/bezier-react/src/components/Forms/Slider/Slider.stories.tsx

@@ -53,8 +53,9 @@ const Template: Story<SliderProps> = (args) => <Slider {...args} />
 
 export const Primary = Template.bind({})
 Primary.args = {
-  width: '36',
+  width: '285',
   defaultValue: [5],
+  value: [2],
   min: 0,
   max: 10,
   step: 1,
@@ -64,6 +65,7 @@ export const Uncontrolled = Template.bind({})
 Uncontrolled.args = {
   width: '285',
   defaultValue: [5],
+  value: [2],
   min: 0,
   max: 10,
   step: 1,
@@ -73,6 +75,7 @@ export const Disabled = Template.bind({})
 Disabled.args = {
   width: '285',
   defaultValue: [5],
+  value: [2],
   min: 0,
   max: 10,
   step: 1,
@@ -83,6 +86,7 @@ export const WithGuide = Template.bind({})
 WithGuide.args = {
   width: '285',
   defaultValue: [5],
+  value: [2],
   guide: [0, 1, 2, 3, 4, 5, 10],
   min: 0,
   max: 10,
@@ -93,6 +97,7 @@ export const MultipleThumbs = Template.bind({})
 MultipleThumbs.args = {
   width: '285',
   defaultValue: [3, 7],
+  value: [2, 4],
   min: 0,
   max: 10,
   step: 1,

packages/bezier-react/src/components/Forms/Slider/Slider.test.tsx

@@ -158,4 +158,26 @@ describe('Slider', () => {
       })
     })
   })
+
+  describe('onValueChange', () => {
+    const onValueChange = jest.fn()
+
+    it('should be executed when the `value` prop changes', () => {
+      let value = [3]
+      const { rerender } = renderSlider({ value, onValueChange })
+      expect(onValueChange).toHaveBeenCalledTimes(1)
+
+      // change value with a new array
+      value = [5]
+      rerender(<Slider {...{ value, onValueChange }} />)
+
+      expect(onValueChange).toHaveBeenCalledTimes(2)
+
+      // change value with the same reference
+      value.splice(0, 1, 3)
+      rerender(<Slider {...{ value, onValueChange }} />)
+
+      expect(onValueChange).toHaveBeenCalledTimes(2)
+    })
+  })
 })

packages/bezier-react/src/components/Forms/Slider/Slider.tsx

@@ -1,5 +1,10 @@
 /* External dependencies */
-import React, { forwardRef, useState, useCallback } from 'react'
+import React, {
+  forwardRef,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react'
 import { isFunction } from 'lodash-es'
 import * as SliderPrimitive from '@radix-ui/react-slider'
 
@@ -30,6 +35,19 @@ export const Slider = forwardRef(function Slider(
 ) {
   const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)
 
+  useEffect(() => {
+    if (value) {
+      setCurrentValue(value)
+
+      if (isFunction(onValueChange)) {
+        onValueChange(value)
+      }
+    }
+  }, [
+    value,
+    onValueChange,
+  ])
+
   const handleValueChange: (value: number[]) => void = useCallback((_value) => {
     setCurrentValue(_value)
     if (isFunction(onValueChange)) {
@@ -89,7 +107,7 @@ export const Slider = forwardRef(function Slider(
             guideValue={guideValue}
           />
         )) }
-        { defaultValue.map((v) => (
+        { currentValue.map((v) => (
           <SliderPrimitive.Thumb
             asChild
             key={`slider-thumb-${v}`}