fix(#2664): useColorSlider: simplify per code review

Author: majornista

packages/@react-aria/color/src/useColorSlider.ts

@@ -13,7 +13,7 @@
 import {AriaColorSliderProps} from '@react-types/color';
 import {ColorSliderState} from '@react-stately/color';
 import {HTMLAttributes, RefObject} from 'react';
-import {mergeProps, snapValueToStep} from '@react-aria/utils';
+import {mergeProps} from '@react-aria/utils';
 import {useKeyboard} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
@@ -62,40 +62,32 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     inputRef
   }, state);
 
-  let {minValue, maxValue, step, pageSize} = state.value.getChannelRange(channel);
+  let {step, pageSize} = state.value.getChannelRange(channel);
   let {keyboardProps} = useKeyboard({
     onKeyDown(e) {
       // these are the cases that useMove or useSlider don't handle
-      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
+      if (!/^(PageUp|PageDown)$/.test(e.key)) {
         e.continuePropagation();
         return;
       }
       // same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.
       e.preventDefault();
-      let channelValue = state.value.getChannelValue(channel);
-      let pageStep = Math.max(pageSize, step);
-      let newValue = channelValue;
+      let pageStep = Math.max(
+        props.pageSize || pageSize,
+        props.step || step
+      );
+      // remember to set this so that onChangeEnd is fired
+      state.setThumbDragging(0, true);
       switch (e.key) {
         case 'PageUp':
-          newValue = channelValue + pageStep > maxValue ? maxValue : snapValueToStep(channelValue + pageStep, minValue, maxValue, pageStep);
+          state.incrementThumb(0, pageStep);
           break;
         case 'PageDown':
-          newValue = snapValueToStep(channelValue - pageStep, minValue, maxValue, pageStep);
-          break;
-        case 'Home':
-          newValue = minValue;
-          break;
-        case 'End':
-          newValue = maxValue;
+          state.decrementThumb(0, pageStep);
           break;
       }
-      // remember to set this so that onChangeEnd is fired
-      state.setThumbDragging(0, true);
-      if (newValue !== channelValue) {
-        state.setValue(state.value.withChannelValue(channel, newValue));
-      }
       // wait a frame to ensure value has changed then unset this so that onChangeEnd is fired
-      requestAnimationFrame(() => state.setThumbDragging(0, false));
+      state.setThumbDragging(0, false);
     }
   });
 

packages/@react-stately/color/src/Color.ts

@@ -237,7 +237,7 @@ class RGBColor extends Color {
       case 'red':
       case 'green':
       case 'blue':
-        return {minValue: 0, maxValue: 255, step: 1, pageSize: 0x10};
+        return {minValue: 0x0, maxValue: 0xFF, step: 0x1, pageSize: 0x10};
       case 'alpha':
         return {minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1};
       default:

packages/@react-stately/color/src/useColorSliderState.ts

@@ -13,7 +13,7 @@
 import {Color, ColorSliderProps} from '@react-types/color';
 import {normalizeColor, parseColor} from './Color';
 import {SliderState, useSliderState} from '@react-stately/slider';
-import {useControlledState} from '@react-stately/utils';
+import {snapValueToStep, useControlledState} from '@react-stately/utils';
 
 export interface ColorSliderState extends SliderState {
   /** The current color value represented by the color slider. */
@@ -51,19 +51,35 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
       setColor(color.withChannelValue(channel, v));
     },
     onChangeEnd([v]) {
-      // onChange will have already been called with the right value, this is just to trigger onChangEnd
+      // onChange will have already been called with the right value, this is just to trigger onChangeEnd
       if (props.onChangeEnd) {
         props.onChangeEnd(color.withChannelValue(channel, v));
       }
     }
   });
 
+  function incrementThumb(index: number, stepSize: number = 1) {
+    let {maxValue, minValue, step} = color.getChannelRange(channel);
+    let v = color.getChannelValue(channel);
+    let s = Math.max(stepSize, step);
+    sliderState.setThumbValue(index, v + s > maxValue ? maxValue : snapValueToStep(v + s, minValue, maxValue, s));
+  }
+
+  function decrementThumb(index: number, stepSize: number = 1) {
+    let {maxValue, minValue, step} = color.getChannelRange(channel);
+    let v = color.getChannelValue(channel);
+    let s = Math.max(stepSize, step);
+    sliderState.setThumbValue(index, v - s < minValue ? minValue : snapValueToStep(v - s, minValue, maxValue, s));
+  }
+
   return {
     ...sliderState,
     value: color,
     setValue(value) {
       setColor(normalizeColor(value));
     },
+    incrementThumb,
+    decrementThumb,
     getDisplayColor() {
       switch (channel) {
         case 'hue':