Incubator.Slider - fix onValueChange throttle (#2598)

ColorPicker - add 'migrate' prop to use new SliderImplementation

Author: Inbal-Tish

src/components/colorPicker/ColorPickerDialog.tsx

@@ -51,6 +51,10 @@ interface Props extends DialogProps {
     doneButton?: string,
     input?: string
   };
+  /** 
+   * Whether to use the new Slider implementation using Reanimated
+   */
+  migrate?: boolean;
 }
 export type ColorPickerDialogProps = Props;
 
@@ -247,6 +251,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
 
   renderSliders() {
     const {keyboardHeight, color} = this.state;
+    const {migrate} = this.props;
     const colorValue = color.a === 0 ? Colors.$backgroundInverted : Colors.getHexString(color);
 
     return (
@@ -258,6 +263,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
         labelsStyle={styles.label}
         onValueChange={this.onSliderValueChange}
         accessible={false}
+        migrate={migrate}
       />
     );
   }

src/incubator/Slider/index.tsx

@@ -139,7 +139,7 @@ const Slider = React.memo((props: Props) => {
 
   const onValueChangeThrottled = useCallback(_.throttle(value => {
     onValueChange?.(value);
-  }, 100), [onValueChange]);
+  }, 200), [onValueChange]);
 
   const onRangeChangeThrottled = useCallback(_.throttle((min, max) => {
     onRangeChange?.({min, max});