Function useColorField

packages/react-aria/src/color/useColorField.ts:68–158

(
  props: AriaColorFieldProps,
  state: ColorFieldState,
  ref: RefObject<HTMLInputElement | null>
)

 * Color fields allow users to enter and adjust a hex color value.
 */
export function useColorField(
  props: AriaColorFieldProps,
  state: ColorFieldState,
  ref: RefObject<HTMLInputElement | null>
): ColorFieldAria {
  let {isDisabled, isReadOnly, isRequired, isWheelDisabled, validationBehavior = 'aria'} = props;

  let {colorValue, inputValue, increment, decrement, incrementToMax, decrementToMin, commit} =
    state;

  let inputId = useId();
  let {spinButtonProps} = useSpinButton({
    isDisabled,
    isReadOnly,
    isRequired,
    maxValue: 0xffffff,
    minValue: 0,
    onIncrement: increment,
    onIncrementToMax: incrementToMax,
    onDecrement: decrement,
    onDecrementToMin: decrementToMin,
    value: colorValue ? colorValue.toHexInt() : undefined,
    textValue: colorValue ? colorValue.toString('hex') : undefined
  });

  let [focusWithin, setFocusWithin] = useState(false);
  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});

  let onWheel = useCallback(
    e => {
      if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {
        return;
      }
      if (e.deltaY > 0) {
        increment();
      } else if (e.deltaY < 0) {
        decrement();
      }
    },
    [decrement, increment]
  );
  // If the input isn't supposed to receive input, disable scrolling.
  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);

  let onChange = value => {
    if (state.validate(value)) {
      state.setInputValue(value);
    }
  };

  let {inputProps, ...otherProps} = useFormattedTextField(
    {
      ...props,
      id: inputId,
      value: inputValue,
      // Intentionally invalid value that will be ignored by onChange during form reset
      // This is handled separately below.