Page MenuHomec4science
Files F101032949

useButton.js
No OneTemporary
Actions

File Metadata

Created
Wed, Feb 5, 00:33

useButton.js
View Options

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';
import extractEventHandlers from '../utils/extractEventHandlers';
export default function useButton(parameters) {
const {
disabled = false,
focusableWhenDisabled,
href,
ref: externalRef,
tabIndex,
to,
type
} = parameters;
const buttonRef = React.useRef();
const [active, setActive] = React.useState(false);
const {
isFocusVisibleRef,
onFocus: handleFocusVisible,
onBlur: handleBlurVisible,
ref: focusVisibleRef
} = useIsFocusVisible();
const [focusVisible, setFocusVisible] = React.useState(false);
if (disabled && !focusableWhenDisabled && focusVisible) {
setFocusVisible(false);
}
React.useEffect(() => {
isFocusVisibleRef.current = focusVisible;
}, [focusVisible, isFocusVisibleRef]);
const [hostElementName, setHostElementName] = React.useState('');
const createHandleMouseLeave = otherHandlers => event => {
if (focusVisible) {
event.preventDefault();
}
otherHandlers.onMouseLeave?.(event);
};
const createHandleBlur = otherHandlers => event => {
handleBlurVisible(event);
if (isFocusVisibleRef.current === false) {
setFocusVisible(false);
}
otherHandlers.onBlur?.(event);
};
const createHandleFocus = otherHandlers => event => {
// Fix for https://github.com/facebook/react/issues/7769
if (!buttonRef.current) {
buttonRef.current = event.currentTarget;
}
handleFocusVisible(event);
if (isFocusVisibleRef.current === true) {
setFocusVisible(true);
otherHandlers.onFocusVisible?.(event);
}
otherHandlers.onFocus?.(event);
};
const isNativeButton = () => {
const button = buttonRef.current;
return hostElementName === 'BUTTON' || hostElementName === 'INPUT' && ['button', 'submit', 'reset'].includes(button?.type) || hostElementName === 'A' && button?.href;
};
const createHandleClick = otherHandlers => event => {
if (!disabled) {
otherHandlers.onClick?.(event);
}
};
const createHandleMouseDown = otherHandlers => event => {
if (!disabled) {
setActive(true);
document.addEventListener('mouseup', () => {
setActive(false);
}, {
once: true
});
}
otherHandlers.onMouseDown?.(event);
};
const createHandleKeyDown = otherHandlers => event => {
otherHandlers.onKeyDown?.(event);
if (event.defaultPrevented) {
return;
}
if (event.target === event.currentTarget && !isNativeButton() && event.key === ' ') {
event.preventDefault();
}
if (event.target === event.currentTarget && event.key === ' ' && !disabled) {
setActive(true);
}
// Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && !isNativeButton() && event.key === 'Enter' && !disabled) {
otherHandlers.onClick?.(event);
event.preventDefault();
}
};
const createHandleKeyUp = otherHandlers => event => {
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
// https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
if (event.target === event.currentTarget) {
setActive(false);
}
otherHandlers.onKeyUp?.(event);
// Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && !isNativeButton() && !disabled && event.key === ' ' && !event.defaultPrevented) {
otherHandlers.onClick?.(event);
}
};
const updateHostElementName = React.useCallback(instance => {
setHostElementName(instance?.tagName ?? '');
}, []);
const handleRef = useForkRef(updateHostElementName, externalRef, focusVisibleRef, buttonRef);
const buttonProps = {};
if (hostElementName === 'BUTTON') {
buttonProps.type = type ?? 'button';
if (focusableWhenDisabled) {
buttonProps['aria-disabled'] = disabled;
} else {
buttonProps.disabled = disabled;
}
} else if (hostElementName !== '') {
if (!href && !to) {
buttonProps.role = 'button';
buttonProps.tabIndex = tabIndex ?? 0;
}
if (disabled) {
buttonProps['aria-disabled'] = disabled;
buttonProps.tabIndex = focusableWhenDisabled ? tabIndex ?? 0 : -1;
}
}
const getRootProps = (otherHandlers = {}) => {
const propsEventHandlers = extractEventHandlers(parameters);
const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
// onFocusVisible can be present on the props, but since it's not a valid React event handler,
// it must not be forwarded to the inner component.
delete externalEventHandlers.onFocusVisible;
return _extends({
type
}, externalEventHandlers, buttonProps, {
onBlur: createHandleBlur(externalEventHandlers),
onClick: createHandleClick(externalEventHandlers),
onFocus: createHandleFocus(externalEventHandlers),
onKeyDown: createHandleKeyDown(externalEventHandlers),
onKeyUp: createHandleKeyUp(externalEventHandlers),
onMouseDown: createHandleMouseDown(externalEventHandlers),
onMouseLeave: createHandleMouseLeave(externalEventHandlers),
ref: handleRef
});
};
return {
getRootProps,
focusVisible,
setFocusVisible,
disabled,
active
};
}

Event Timeline

c4science · Help