Function useColorArea

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

(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 keyboardUpdate = (cb, inputRef: RefObject<HTMLInputElement | null>, input: 'x' | 'y') => {
    state.setDragging(true);
    setValueChangedViaKeyboard(true);
    cb();
    state.setDragging(false);
    focusInput(inputRef);
    setFocusedInput(input);
  };

  let {keyboardProps} = useKeyboard({
    shortcuts: {
      PageUp: () => {
        return keyboardUpdate(
          () => {
            state.incrementY(state.yChannelPageStep);
          },
          inputYRef,
          'y'
        );
      },
      PageDown: () => {