Function useColorArea

packages/react-aria/src/color/useColorArea.ts:77–581

(props: AriaColorAreaOptions, state: ColorAreaState)

 * gradient background.
 */
export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {
  let {
    isDisabled,
    inputXRef,
    inputYRef,
    containerRef,
    'aria-label': ariaLabel,
    xName,
    yName,
    form
  } = props;
  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');

  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();

  let {direction, locale} = useLocale();

  let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);
  let focusInput = useCallback(
    (inputRef: RefObject<HTMLInputElement | null> = inputXRef) => {
      if (inputRef.current) {
        focusWithoutScrolling(inputRef.current);
      }
    },
    [inputXRef]
  );

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

  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);
  let {xChannel, yChannel, zChannel} = state.channels;
  let xChannelStep = state.xChannelStep;
  let yChannelStep = state.yChannelStep;

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

  let {keyboardProps} = useKeyboard({
    onKeyDown(e) {
      // these are the cases that useMove doesn't handle
      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
        e.continuePropagation();
        return;
      }
      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
      e.preventDefault();
      // remember to set this and unset it so that onChangeEnd is fired
      state.setDragging(true);
      setValueChangedViaKeyboard(true);
      let dir;
      switch (e.key) {
        case 'PageUp':
          state.incrementY(state.yChannelPageStep);
          dir = 'y';
          break;
        case 'PageDown':
          state.decrementY(state.yChannelPageStep);
          dir = 'y';