Function useColorWheel

packages/react-aria/src/color/useColorWheel.ts:56–380

(
  props: AriaColorWheelOptions,
  state: ColorWheelState,
  inputRef: RefObject<HTMLInputElement | null>
)

 * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
 */
export function useColorWheel(
  props: AriaColorWheelOptions,
  state: ColorWheelState,
  inputRef: RefObject<HTMLInputElement | null>
): ColorWheelAria {
  let {isDisabled, innerRadius, outerRadius, 'aria-label': ariaLabel, name, form} = props;

  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();

  let thumbRadius = (innerRadius + outerRadius) / 2;

  let focusInput = useCallback(() => {
    if (inputRef.current) {
      focusWithoutScrolling(inputRef.current);
    }
  }, [inputRef]);

  useFormReset(inputRef, state.defaultValue, state.setValue);

  let currentPosition = useRef<{x: number; y: number} | null>(null);

  let {keyboardProps} = useKeyboard({
    shortcuts: {
      PageUp: () => {
        state.setDragging(true);
        state.increment(state.pageStep);
        state.setDragging(false);
      },
      PageDown: () => {
        state.setDragging(true);
        state.decrement(state.pageStep);
        state.setDragging(false);
      }
    },
    allowRepeats: true
  });

  let moveHandler = {
    onMoveStart() {
      currentPosition.current = null;
      state.setDragging(true);
    },
    onMove({deltaX, deltaY, pointerType, shiftKey}) {
      if (currentPosition.current == null) {
        currentPosition.current = state.getThumbPosition(thumbRadius);
      }
      currentPosition.current.x += deltaX;
      currentPosition.current.y += deltaY;
      if (pointerType === 'keyboard') {
        if (deltaX > 0 || deltaY < 0) {
          state.increment(shiftKey ? state.pageStep : state.step);
        } else if (deltaX < 0 || deltaY > 0) {
          state.decrement(shiftKey ? state.pageStep : state.step);
        }
      } else {
        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
      }
    },