[#459] Feature: 외부에서 debounceTIme 조절할 수 있도록 수정

titicacadev · Feb 10, 2020 · d1eacba · d1eacba
1 parent 10cd307
commit d1eacba
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/docs/stories/slider.stories.js b/docs/stories/slider.stories.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { number } from '@storybook/addon-knobs'
 
 import { SingleSlider, RangeSlider } from '@titicaca/slider'
 import { Text } from '@titicaca/core-elements'
@@ -31,6 +32,7 @@ storiesOf('Slider', module)
           max={500000}
           onChange={setValue}
           labelComponent={SingleLabel}
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
@@ -48,6 +50,7 @@ storiesOf('Slider', module)
           onChange={setValue}
           labelComponent={SingleLabel}
           nonLinear
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
@@ -64,6 +67,7 @@ storiesOf('Slider', module)
           max={500000}
           onChange={setValues}
           labelComponent={RangeLabel}
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
@@ -81,6 +85,7 @@ storiesOf('Slider', module)
           onChange={setValues}
           labelComponent={RangeLabel}
           nonLinear
+          debounceTime={number('debounceTime')}
         />
       </div>
     )

diff --git a/packages/slider/src/slider-base.tsx b/packages/slider/src/slider-base.tsx
@@ -23,6 +23,7 @@ export interface SliderBaseProps {
   }>
   onChange: (values: SliderValue) => void
   nonLinear?: boolean
+  debounceTime?: number
 }
 
 const IDENTICAL_SCALE: ValueTransformer = (x) => x
@@ -59,6 +60,7 @@ export default function SliderBase({
   onChange,
   labelComponent: LabelComponent,
   nonLinear,
+  debounceTime = 500,
   children,
 }: PropsWithChildren<SliderBaseProps>) {
   const [values, setValues] = useState<SliderValue>(initialValues || [0])
@@ -77,8 +79,9 @@ export default function SliderBase({
     return value
   }
 
-  const debouncedChangeHandler = useCallback(debounce(onChange, 500), [
+  const debouncedChangeHandler = useCallback(debounce(onChange, debounceTime), [
     onChange,
+    debounceTime,
   ])
 
   useEffect(() => {