Search
Search
Search
Search
Information
Information
Light
Dark
Open actions menu
Basic upload method
Bypass upload method
Tips!
If you encounter an error (by firewall) while uploading using both methods,
try changing extension of the file before uploading it and rename it right after.
This uploader supports multiple file upload.
Submit
~
var
www
uibuilder.cmshelp.dk
httpdocs
node_modules
@mui
material
ButtonBase
File Content:
ButtonBase.js
'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import isFocusVisible from '@mui/utils/isFocusVisible'; import { styled } from "../zero-styled/index.js"; import { useDefaultProps } from "../DefaultPropsProvider/index.js"; import useForkRef from "../utils/useForkRef.js"; import useEventCallback from "../utils/useEventCallback.js"; import useLazyRipple from "../useLazyRipple/index.js"; import TouchRipple from "./TouchRipple.js"; import buttonBaseClasses, { getButtonBaseUtilityClass } from "./buttonBaseClasses.js"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; const useUtilityClasses = ownerState => { const { disabled, focusVisible, focusVisibleClassName, classes } = ownerState; const slots = { root: ['root', disabled && 'disabled', focusVisible && 'focusVisible'] }; const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes); if (focusVisible && focusVisibleClassName) { composedClasses.root += ` ${focusVisibleClassName}`; } return composedClasses; }; export const ButtonBaseRoot = styled('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.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. */ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) { const props = useDefaultProps({ props: inProps, name: 'MuiButtonBase' }); const { action, centerRipple = false, children, className, component = 'button', disabled = false, disableRipple = false, disableTouchRipple = false, focusRipple = false, focusVisibleClassName, LinkComponent = 'a', onBlur, onClick, onContextMenu, onDragLeave, onFocus, onFocusVisible, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onMouseUp, onTouchEnd, onTouchMove, onTouchStart, tabIndex = 0, TouchRippleProps, touchRippleRef, type, ...other } = props; const buttonRef = React.useRef(null); const ripple = useLazyRipple(); const handleRippleRef = useForkRef(ripple.ref, touchRippleRef); const [focusVisible, setFocusVisible] = React.useState(false); if (disabled && focusVisible) { setFocusVisible(false); } React.useImperativeHandle(action, () => ({ focusVisible: () => { setFocusVisible(true); buttonRef.current.focus(); } }), []); const enableTouchRipple = ripple.shouldMount && !disableRipple && !disabled; React.useEffect(() => { if (focusVisible && focusRipple && !disableRipple) { ripple.pulsate(); } }, [disableRipple, focusRipple, focusVisible, ripple]); const handleMouseDown = useRippleHandler(ripple, 'start', onMouseDown, disableTouchRipple); const handleContextMenu = useRippleHandler(ripple, 'stop', onContextMenu, disableTouchRipple); const handleDragLeave = useRippleHandler(ripple, 'stop', onDragLeave, disableTouchRipple); const handleMouseUp = useRippleHandler(ripple, 'stop', onMouseUp, disableTouchRipple); const handleMouseLeave = useRippleHandler(ripple, 'stop', event => { if (focusVisible) { event.preventDefault(); } if (onMouseLeave) { onMouseLeave(event); } }, disableTouchRipple); const handleTouchStart = useRippleHandler(ripple, 'start', onTouchStart, disableTouchRipple); const handleTouchEnd = useRippleHandler(ripple, 'stop', onTouchEnd, disableTouchRipple); const handleTouchMove = useRippleHandler(ripple, 'stop', onTouchMove, disableTouchRipple); const handleBlur = useRippleHandler(ripple, 'stop', event => { if (!isFocusVisible(event.target)) { setFocusVisible(false); } if (onBlur) { onBlur(event); } }, false); const handleFocus = useEventCallback(event => { // Fix for https://github.com/facebook/react/issues/7769 if (!buttonRef.current) { buttonRef.current = event.currentTarget; } if (isFocusVisible(event.target)) { 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); }; const handleKeyDown = useEventCallback(event => { // Check if key is already down to avoid repeats being counted as multiple activations if (focusRipple && !event.repeat && focusVisible && event.key === ' ') { ripple.stop(event, () => { ripple.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 = useEventCallback(event => { // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0 if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) { ripple.stop(event, () => { ripple.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 = useForkRef(ref, buttonRef); const ownerState = { ...props, centerRipple, component, disabled, disableRipple, disableTouchRipple, focusRipple, tabIndex, focusVisible }; const classes = useUtilityClasses(ownerState); return /*#__PURE__*/_jsxs(ButtonBaseRoot, { as: ComponentProp, className: clsx(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__*/_jsx(TouchRipple, { ref: handleRippleRef, center: centerRipple, ...TouchRippleProps }) : null] }); }); function useRippleHandler(ripple, rippleAction, eventCallback, skipRippleAction = false) { return useEventCallback(event => { if (eventCallback) { eventCallback(event); } if (!skipRippleAction) { ripple[rippleAction](event); } return true; }); } 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 `pnpm proptypes`. │ // └─────────────────────────────────────────────────────────────────────┘ /** * A ref for imperative actions. * It currently only supports `focusVisible()` action. */ action: refType, /** * If `true`, the ripples are centered. * They won't start at the cursor interaction position. * @default false */ centerRipple: PropTypes.bool, /** * The content of the component. */ children: PropTypes.node, /** * Override or extend the styles applied to the component. */ classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component: elementTypeAcceptingRef, /** * If `true`, the component is disabled. * @default false */ disabled: PropTypes.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.bool, /** * If `true`, the touch ripple effect is disabled. * @default false */ disableTouchRipple: PropTypes.bool, /** * If `true`, the base button will have a keyboard focus ripple. * @default false */ focusRipple: PropTypes.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.string, /** * @ignore */ href: PropTypes /* @typescript-to-proptypes-ignore */.any, /** * The component used to render a link when the `href` prop is provided. * @default 'a' */ LinkComponent: PropTypes.elementType, /** * @ignore */ onBlur: PropTypes.func, /** * @ignore */ onClick: PropTypes.func, /** * @ignore */ onContextMenu: PropTypes.func, /** * @ignore */ onDragLeave: PropTypes.func, /** * @ignore */ onFocus: PropTypes.func, /** * Callback fired when the component is focused with a keyboard. * We trigger a `onFocus` callback too. */ onFocusVisible: PropTypes.func, /** * @ignore */ onKeyDown: PropTypes.func, /** * @ignore */ onKeyUp: PropTypes.func, /** * @ignore */ onMouseDown: PropTypes.func, /** * @ignore */ onMouseLeave: PropTypes.func, /** * @ignore */ onMouseUp: PropTypes.func, /** * @ignore */ onTouchEnd: PropTypes.func, /** * @ignore */ onTouchMove: PropTypes.func, /** * @ignore */ onTouchStart: PropTypes.func, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]), /** * @default 0 */ tabIndex: PropTypes.number, /** * Props applied to the `TouchRipple` element. */ TouchRippleProps: PropTypes.object, /** * A ref that points to the `TouchRipple` element. */ touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.shape({ pulsate: PropTypes.func.isRequired, start: PropTypes.func.isRequired, stop: PropTypes.func.isRequired }) })]), /** * @ignore */ type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]) } : void 0; export default ButtonBase;
Edit
Download
Unzip
Chmod
Delete