| 68 | * Color fields allow users to enter and adjust a hex color value. |
| 69 | */ |
| 70 | export function useColorField( |
| 71 | props: AriaColorFieldProps, |
| 72 | state: ColorFieldState, |
| 73 | ref: RefObject<HTMLInputElement | null> |
| 74 | ): ColorFieldAria { |
| 75 | let { |
| 76 | isDisabled, |
| 77 | isReadOnly, |
| 78 | isRequired, |
| 79 | isWheelDisabled, |
| 80 | validationBehavior = 'aria', |
| 81 | onKeyDown, |
| 82 | onKeyUp |
| 83 | } = props; |
| 84 | |
| 85 | let { |
| 86 | colorValue, |
| 87 | inputValue, |
| 88 | increment, |
| 89 | decrement, |
| 90 | incrementToMax, |
| 91 | decrementToMin, |
| 92 | commit, |
| 93 | commitValidation |
| 94 | } = state; |
| 95 | |
| 96 | let inputId = useId(); |
| 97 | let {spinButtonProps} = useSpinButton({ |
| 98 | isDisabled, |
| 99 | isReadOnly, |
| 100 | isRequired, |
| 101 | maxValue: 0xffffff, |
| 102 | minValue: 0, |
| 103 | onIncrement: increment, |
| 104 | onIncrementToMax: incrementToMax, |
| 105 | onDecrement: decrement, |
| 106 | onDecrementToMin: decrementToMin, |
| 107 | value: colorValue ? colorValue.toHexInt() : undefined, |
| 108 | textValue: colorValue ? colorValue.toString('hex') : undefined |
| 109 | }); |
| 110 | |
| 111 | let [focusWithin, setFocusWithin] = useState(false); |
| 112 | let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin}); |
| 113 | |
| 114 | let onWheel = useCallback( |
| 115 | e => { |
| 116 | if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) { |
| 117 | return; |
| 118 | } |
| 119 | if (e.deltaY > 0) { |
| 120 | increment(); |
| 121 | } else if (e.deltaY < 0) { |
| 122 | decrement(); |
| 123 | } |
| 124 | }, |
| 125 | [decrement, increment] |
| 126 | ); |
| 127 | // If the input isn't supposed to receive input, disable scrolling. |