| 175 | * @param ref - A ref to a DOM element for the button. |
| 176 | */ |
| 177 | export function useButton( |
| 178 | props: AriaButtonOptions<ElementType>, |
| 179 | ref: RefObject<any> |
| 180 | ): ButtonAria<HTMLAttributes<any>> { |
| 181 | let { |
| 182 | elementType = 'button', |
| 183 | isDisabled, |
| 184 | onPress, |
| 185 | onPressStart, |
| 186 | onPressEnd, |
| 187 | onPressUp, |
| 188 | onPressChange, |
| 189 | preventFocusOnPress, |
| 190 | // @ts-ignore - undocumented |
| 191 | allowFocusWhenDisabled, |
| 192 | onClick, |
| 193 | href, |
| 194 | target, |
| 195 | rel, |
| 196 | type = 'button' |
| 197 | } = props; |
| 198 | let additionalProps; |
| 199 | if (elementType === 'button') { |
| 200 | additionalProps = { |
| 201 | type, |
| 202 | disabled: isDisabled, |
| 203 | form: props.form, |
| 204 | formAction: props.formAction, |
| 205 | formEncType: props.formEncType, |
| 206 | formMethod: props.formMethod, |
| 207 | formNoValidate: props.formNoValidate, |
| 208 | formTarget: props.formTarget, |
| 209 | name: props.name, |
| 210 | value: props.value |
| 211 | }; |
| 212 | } else { |
| 213 | additionalProps = { |
| 214 | role: 'button', |
| 215 | href: elementType === 'a' && !isDisabled ? href : undefined, |
| 216 | target: elementType === 'a' ? target : undefined, |
| 217 | type: elementType === 'input' ? type : undefined, |
| 218 | disabled: elementType === 'input' ? isDisabled : undefined, |
| 219 | 'aria-disabled': !isDisabled || elementType === 'input' ? undefined : isDisabled, |
| 220 | rel: elementType === 'a' ? rel : undefined |
| 221 | }; |
| 222 | } |
| 223 | |
| 224 | let {pressProps, isPressed} = usePress({ |
| 225 | onPressStart, |
| 226 | onPressEnd, |
| 227 | onPressChange, |
| 228 | onPress, |
| 229 | onPressUp, |
| 230 | onClick, |
| 231 | isDisabled, |
| 232 | preventFocusOnPress, |
| 233 | ref |
| 234 | }); |