@mui/material
Version:
React components that implement Google's Material Design.
485 lines (479 loc) • 17.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ButtonBaseRoot = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _utils = require("@mui/utils");
var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
var _styled = _interopRequireDefault(require("../styles/styled"));
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
var _TouchRipple = _interopRequireDefault(require("./TouchRipple"));
var _buttonBaseClasses = _interopRequireWildcard(require("./buttonBaseClasses"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const useUtilityClasses = ownerState => {
const {
disabled,
focusVisible,
focusVisibleClassName,
classes
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
};
const composedClasses = (0, _composeClasses.default)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
if (focusVisible && focusVisibleClassName) {
composedClasses.root += ` ${focusVisibleClassName}`;
}
return composedClasses;
};
const ButtonBaseRoot = (0, _styled.default)('button', {
name: 'MuiButtonBase',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
boxSizing: 'border-box',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent',
// Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0,
// Remove the margin in Safari
borderRadius: 0,
padding: 0,
// Remove the padding in Firefox
cursor: 'pointer',
userSelect: 'none',
verticalAlign: 'middle',
MozAppearance: 'none',
// Reset
WebkitAppearance: 'none',
// Reset
textDecoration: 'none',
// So we take precedent over the style of a native <a /> element.
color: 'inherit',
'&::-moz-focus-inner': {
borderStyle: 'none' // Remove Firefox dotted outline.
},
[`&.${_buttonBaseClasses.default.disabled}`]: {
pointerEvents: 'none',
// Disable link interactions
cursor: 'default'
},
'@media print': {
colorAdjust: 'exact'
}
});
/**
* `ButtonBase` contains as few styles as possible.
* It aims to be a simple building block for creating a button.
* It contains a load of style reset and some focus/ripple logic.
*/
exports.ButtonBaseRoot = ButtonBaseRoot;
const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
const props = (0, _useThemeProps.default)({
props: inProps,
name: 'MuiButtonBase'
});
const {
action,
centerRipple = false,
children,
className,
component = 'button',
disabled = false,
disableRipple = false,
disableTouchRipple = false,
focusRipple = false,
LinkComponent = 'a',
onBlur,
onClick,
onContextMenu,
onDragLeave,
onFocus,
onFocusVisible,
onKeyDown,
onKeyUp,
onMouseDown,
onMouseLeave,
onMouseUp,
onTouchEnd,
onTouchMove,
onTouchStart,
tabIndex = 0,
TouchRippleProps,
touchRippleRef,
type
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const buttonRef = React.useRef(null);
const rippleRef = React.useRef(null);
const handleRippleRef = (0, _useForkRef.default)(rippleRef, touchRippleRef);
const {
isFocusVisibleRef,
onFocus: handleFocusVisible,
onBlur: handleBlurVisible,
ref: focusVisibleRef
} = (0, _useIsFocusVisible.default)();
const [focusVisible, setFocusVisible] = React.useState(false);
if (disabled && focusVisible) {
setFocusVisible(false);
}
React.useImperativeHandle(action, () => ({
focusVisible: () => {
setFocusVisible(true);
buttonRef.current.focus();
}
}), []);
const [mountedState, setMountedState] = React.useState(false);
React.useEffect(() => {
setMountedState(true);
}, []);
const enableTouchRipple = mountedState && !disableRipple && !disabled;
React.useEffect(() => {
if (focusVisible && focusRipple && !disableRipple && mountedState) {
rippleRef.current.pulsate();
}
}, [disableRipple, focusRipple, focusVisible, mountedState]);
function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
return (0, _useEventCallback.default)(event => {
if (eventCallback) {
eventCallback(event);
}
const ignore = skipRippleAction;
if (!ignore && rippleRef.current) {
rippleRef.current[rippleAction](event);
}
return true;
});
}
const handleMouseDown = useRippleHandler('start', onMouseDown);
const handleContextMenu = useRippleHandler('stop', onContextMenu);
const handleDragLeave = useRippleHandler('stop', onDragLeave);
const handleMouseUp = useRippleHandler('stop', onMouseUp);
const handleMouseLeave = useRippleHandler('stop', event => {
if (focusVisible) {
event.preventDefault();
}
if (onMouseLeave) {
onMouseLeave(event);
}
});
const handleTouchStart = useRippleHandler('start', onTouchStart);
const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
const handleTouchMove = useRippleHandler('stop', onTouchMove);
const handleBlur = useRippleHandler('stop', event => {
handleBlurVisible(event);
if (isFocusVisibleRef.current === false) {
setFocusVisible(false);
}
if (onBlur) {
onBlur(event);
}
}, false);
const handleFocus = (0, _useEventCallback.default)(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);
if (onFocusVisible) {
onFocusVisible(event);
}
}
if (onFocus) {
onFocus(event);
}
});
const isNonNativeButton = () => {
const button = buttonRef.current;
return component && component !== 'button' && !(button.tagName === 'A' && button.href);
};
/**
* IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
*/
const keydownRef = React.useRef(false);
const handleKeyDown = (0, _useEventCallback.default)(event => {
// Check if key is already down to avoid repeats being counted as multiple activations
if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
keydownRef.current = true;
rippleRef.current.stop(event, () => {
rippleRef.current.start(event);
});
}
if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
event.preventDefault();
}
if (onKeyDown) {
onKeyDown(event);
}
// Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
event.preventDefault();
if (onClick) {
onClick(event);
}
}
});
const handleKeyUp = (0, _useEventCallback.default)(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 (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
keydownRef.current = false;
rippleRef.current.stop(event, () => {
rippleRef.current.pulsate(event);
});
}
if (onKeyUp) {
onKeyUp(event);
}
// Keyboard accessibility for non interactive elements
if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
onClick(event);
}
});
let ComponentProp = component;
if (ComponentProp === 'button' && (other.href || other.to)) {
ComponentProp = LinkComponent;
}
const buttonProps = {};
if (ComponentProp === 'button') {
buttonProps.type = type === undefined ? 'button' : type;
buttonProps.disabled = disabled;
} else {
if (!other.href && !other.to) {
buttonProps.role = 'button';
}
if (disabled) {
buttonProps['aria-disabled'] = disabled;
}
}
const handleRef = (0, _useForkRef.default)(ref, focusVisibleRef, buttonRef);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (enableTouchRipple && !rippleRef.current) {
console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
}
}, [enableTouchRipple]);
}
const ownerState = (0, _extends2.default)({}, props, {
centerRipple,
component,
disabled,
disableRipple,
disableTouchRipple,
focusRipple,
tabIndex,
focusVisible
});
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonBaseRoot, (0, _extends2.default)({
as: ComponentProp,
className: (0, _clsx.default)(classes.root, className),
ownerState: ownerState,
onBlur: handleBlur,
onClick: onClick,
onContextMenu: handleContextMenu,
onFocus: handleFocus,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onMouseDown: handleMouseDown,
onMouseLeave: handleMouseLeave,
onMouseUp: handleMouseUp,
onDragLeave: handleDragLeave,
onTouchEnd: handleTouchEnd,
onTouchMove: handleTouchMove,
onTouchStart: handleTouchStart,
ref: handleRef,
tabIndex: disabled ? -1 : tabIndex,
type: type
}, buttonProps, other, {
children: [children, enableTouchRipple ?
/*#__PURE__*/
/* TouchRipple is only needed client-side, x2 boost on the server. */
(0, _jsxRuntime.jsx)(_TouchRipple.default, (0, _extends2.default)({
ref: handleRippleRef,
center: centerRipple
}, TouchRippleProps)) : null]
}));
});
process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* A ref for imperative actions.
* It currently only supports `focusVisible()` action.
*/
action: _utils.refType,
/**
* If `true`, the ripples are centered.
* They won't start at the cursor interaction position.
* @default false
*/
centerRipple: _propTypes.default.bool,
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: _utils.elementTypeAcceptingRef,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* If `true`, the ripple effect is disabled.
*
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
* @default false
*/
disableRipple: _propTypes.default.bool,
/**
* If `true`, the touch ripple effect is disabled.
* @default false
*/
disableTouchRipple: _propTypes.default.bool,
/**
* If `true`, the base button will have a keyboard focus ripple.
* @default false
*/
focusRipple: _propTypes.default.bool,
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName: _propTypes.default.string,
/**
* @ignore
*/
href: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
/**
* The component used to render a link when the `href` prop is provided.
* @default 'a'
*/
LinkComponent: _propTypes.default.elementType,
/**
* @ignore
*/
onBlur: _propTypes.default.func,
/**
* @ignore
*/
onClick: _propTypes.default.func,
/**
* @ignore
*/
onContextMenu: _propTypes.default.func,
/**
* @ignore
*/
onDragLeave: _propTypes.default.func,
/**
* @ignore
*/
onFocus: _propTypes.default.func,
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onFocusVisible: _propTypes.default.func,
/**
* @ignore
*/
onKeyDown: _propTypes.default.func,
/**
* @ignore
*/
onKeyUp: _propTypes.default.func,
/**
* @ignore
*/
onMouseDown: _propTypes.default.func,
/**
* @ignore
*/
onMouseLeave: _propTypes.default.func,
/**
* @ignore
*/
onMouseUp: _propTypes.default.func,
/**
* @ignore
*/
onTouchEnd: _propTypes.default.func,
/**
* @ignore
*/
onTouchMove: _propTypes.default.func,
/**
* @ignore
*/
onTouchStart: _propTypes.default.func,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
/**
* @default 0
*/
tabIndex: _propTypes.default.number,
/**
* Props applied to the `TouchRipple` element.
*/
TouchRippleProps: _propTypes.default.object,
/**
* A ref that points to the `TouchRipple` element.
*/
touchRippleRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
current: _propTypes.default.shape({
pulsate: _propTypes.default.func.isRequired,
start: _propTypes.default.func.isRequired,
stop: _propTypes.default.func.isRequired
})
})]),
/**
* @ignore
*/
type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'reset', 'submit']), _propTypes.default.string])
} : void 0;
var _default = ButtonBase;
exports.default = _default;