Initial commit: Crypto trader application

This commit is contained in:
2025-12-25 20:20:40 -05:00
commit 07a04c1bb8
47895 changed files with 2042266 additions and 0 deletions

View File

@@ -0,0 +1,137 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from '../styles';
import { TouchRippleActions, TouchRippleProps } from './TouchRipple';
import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
import { ButtonBaseClasses } from './buttonBaseClasses';
export interface ButtonBaseOwnProps {
/**
* A ref for imperative actions.
* It currently only supports `focusVisible()` action.
*/
action?: React.Ref<ButtonBaseActions>;
/**
* If `true`, the ripples are centered.
* They won't start at the cursor interaction position.
* @default false
*/
centerRipple?: boolean;
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ButtonBaseClasses>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* 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?: boolean;
/**
* If `true`, the touch ripple effect is disabled.
* @default false
*/
disableTouchRipple?: boolean;
/**
* If `true`, the base button will have a keyboard focus ripple.
* @default false
*/
focusRipple?: boolean;
/**
* 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?: string;
/**
* The component used to render a link when the `href` prop is provided.
* @default 'a'
*/
LinkComponent?: React.ElementType;
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onFocusVisible?: React.FocusEventHandler<any>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* @default 0
*/
tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
/**
* Props applied to the `TouchRipple` element.
*/
TouchRippleProps?: Partial<TouchRippleProps>;
/**
* A ref that points to the `TouchRipple` element.
*/
touchRippleRef?: React.Ref<TouchRippleActions>;
}
export interface ButtonBaseTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'button',
> {
props: AdditionalProps & ButtonBaseOwnProps;
defaultComponent: RootComponent;
}
/**
* utility to create component types that inherit props from ButtonBase.
* This component has an additional overload if the `href` prop is set which
* can make extension quite tricky
*/
export interface ExtendButtonBaseTypeMap<TypeMap extends OverridableTypeMap> {
props: TypeMap['props'] & Omit<ButtonBaseTypeMap['props'], 'classes'>;
defaultComponent: TypeMap['defaultComponent'];
}
export type ExtendButtonBase<TypeMap extends OverridableTypeMap> = ((
props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>,
) => React.JSX.Element) &
OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
/**
* `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.
*
* Demos:
*
* - [Button](https://mui.com/material-ui/react-button/)
*
* API:
*
* - [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
export type ButtonBaseProps<
RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<ButtonBaseTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface ButtonBaseActions {
focusVisible(): void;
}
export default ButtonBase;

View File

@@ -0,0 +1,477 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
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"];
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 styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import useForkRef from '../utils/useForkRef';
import useEventCallback from '../utils/useEventCallback';
import useIsFocusVisible from '../utils/useIsFocusVisible';
import TouchRipple from './TouchRipple';
import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { 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,
LinkComponent = 'a',
onBlur,
onClick,
onContextMenu,
onDragLeave,
onFocus,
onFocusVisible,
onKeyDown,
onKeyUp,
onMouseDown,
onMouseLeave,
onMouseUp,
onTouchEnd,
onTouchMove,
onTouchStart,
tabIndex = 0,
TouchRippleProps,
touchRippleRef,
type
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const buttonRef = React.useRef(null);
const rippleRef = React.useRef(null);
const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
const {
isFocusVisibleRef,
onFocus: handleFocusVisible,
onBlur: handleBlurVisible,
ref: focusVisibleRef
} = useIsFocusVisible();
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 useEventCallback(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 = useEventCallback(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 = useEventCallback(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 = 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 === ' ' && 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 = useForkRef(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 = _extends({}, props, {
centerRipple,
component,
disabled,
disableRipple,
disableTouchRipple,
focusRipple,
tabIndex,
focusVisible
});
const classes = useUtilityClasses(ownerState);
return /*#__PURE__*/_jsxs(ButtonBaseRoot, _extends({
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__*/
/* TouchRipple is only needed client-side, x2 boost on the server. */
_jsx(TouchRipple, _extends({
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 `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;

View File

@@ -0,0 +1,88 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
/**
* @ignore - internal component.
*/
import { jsx as _jsx } from "react/jsx-runtime";
function Ripple(props) {
const {
className,
classes,
pulsate = false,
rippleX,
rippleY,
rippleSize,
in: inProp,
onExited,
timeout
} = props;
const [leaving, setLeaving] = React.useState(false);
const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
const rippleStyles = {
width: rippleSize,
height: rippleSize,
top: -(rippleSize / 2) + rippleY,
left: -(rippleSize / 2) + rippleX
};
const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
if (!inProp && !leaving) {
setLeaving(true);
}
React.useEffect(() => {
if (!inProp && onExited != null) {
// react-transition-group#onExited
const timeoutId = setTimeout(onExited, timeout);
return () => {
clearTimeout(timeoutId);
};
}
return undefined;
}, [onExited, inProp, timeout]);
return /*#__PURE__*/_jsx("span", {
className: rippleClassName,
style: rippleStyles,
children: /*#__PURE__*/_jsx("span", {
className: childClassName
})
});
}
process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object.isRequired,
className: PropTypes.string,
/**
* @ignore - injected from TransitionGroup
*/
in: PropTypes.bool,
/**
* @ignore - injected from TransitionGroup
*/
onExited: PropTypes.func,
/**
* If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
*/
pulsate: PropTypes.bool,
/**
* Diameter of the ripple.
*/
rippleSize: PropTypes.number,
/**
* Horizontal position of the ripple center.
*/
rippleX: PropTypes.number,
/**
* Vertical position of the ripple center.
*/
rippleY: PropTypes.number,
/**
* exit delay
*/
timeout: PropTypes.number.isRequired
} : void 0;
export default Ripple;

View File

@@ -0,0 +1,32 @@
import * as React from 'react';
import { InternalStandardProps as StandardProps } from '..';
import { TouchRippleClasses, TouchRippleClassKey } from './touchRippleClasses';
export { TouchRippleClassKey };
export interface StartActionOptions {
pulsate?: boolean;
center?: boolean;
}
export interface TouchRippleActions {
start: (
event?: React.SyntheticEvent,
options?: StartActionOptions,
callback?: () => void,
) => void;
pulsate: (event?: React.SyntheticEvent) => void;
stop: (event?: React.SyntheticEvent, callback?: () => void) => void;
}
export type TouchRippleProps = StandardProps<React.HTMLAttributes<HTMLElement>> & {
center?: boolean;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<TouchRippleClasses>;
};
declare const TouchRipple: React.ForwardRefRenderFunction<TouchRippleActions, TouchRippleProps>;
export default TouchRipple;

View File

@@ -0,0 +1,333 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["center", "classes", "className"];
let _ = t => t,
_t,
_t2,
_t3,
_t4;
import * as React from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup } from 'react-transition-group';
import clsx from 'clsx';
import { keyframes } from '@mui/system';
import useTimeout from '@mui/utils/useTimeout';
import styled from '../styles/styled';
import { useDefaultProps } from '../DefaultPropsProvider';
import Ripple from './Ripple';
import touchRippleClasses from './touchRippleClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const DURATION = 550;
export const DELAY_RIPPLE = 80;
const enterKeyframe = keyframes(_t || (_t = _`
0% {
transform: scale(0);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 0.3;
}
`));
const exitKeyframe = keyframes(_t2 || (_t2 = _`
0% {
opacity: 1;
}
100% {
opacity: 0;
}
`));
const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
0% {
transform: scale(1);
}
50% {
transform: scale(0.92);
}
100% {
transform: scale(1);
}
`));
export const TouchRippleRoot = styled('span', {
name: 'MuiTouchRipple',
slot: 'Root'
})({
overflow: 'hidden',
pointerEvents: 'none',
position: 'absolute',
zIndex: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
borderRadius: 'inherit'
});
// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
// in string templates. Do not convert these styles in JS object as it will break.
export const TouchRippleRipple = styled(Ripple, {
name: 'MuiTouchRipple',
slot: 'Ripple'
})(_t4 || (_t4 = _`
opacity: 0;
position: absolute;
&.${0} {
opacity: 0.3;
transform: scale(1);
animation-name: ${0};
animation-duration: ${0}ms;
animation-timing-function: ${0};
}
&.${0} {
animation-duration: ${0}ms;
}
& .${0} {
opacity: 1;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: currentColor;
}
& .${0} {
opacity: 0;
animation-name: ${0};
animation-duration: ${0}ms;
animation-timing-function: ${0};
}
& .${0} {
position: absolute;
/* @noflip */
left: 0px;
top: 0;
animation-name: ${0};
animation-duration: 2500ms;
animation-timing-function: ${0};
animation-iteration-count: infinite;
animation-delay: 200ms;
}
`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({
theme
}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({
theme
}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({
theme
}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({
theme
}) => theme.transitions.easing.easeInOut);
/**
* @ignore - internal component.
*
* TODO v5: Make private
*/
const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
const props = useDefaultProps({
props: inProps,
name: 'MuiTouchRipple'
});
const {
center: centerProp = false,
classes = {},
className
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const [ripples, setRipples] = React.useState([]);
const nextKey = React.useRef(0);
const rippleCallback = React.useRef(null);
React.useEffect(() => {
if (rippleCallback.current) {
rippleCallback.current();
rippleCallback.current = null;
}
}, [ripples]);
// Used to filter out mouse emulated events on mobile.
const ignoringMouseDown = React.useRef(false);
// We use a timer in order to only show the ripples for touch "click" like events.
// We don't want to display the ripple for touch scroll events.
const startTimer = useTimeout();
// This is the hook called once the previous timeout is ready.
const startTimerCommit = React.useRef(null);
const container = React.useRef(null);
const startCommit = React.useCallback(params => {
const {
pulsate,
rippleX,
rippleY,
rippleSize,
cb
} = params;
setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {
classes: {
ripple: clsx(classes.ripple, touchRippleClasses.ripple),
rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),
ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),
child: clsx(classes.child, touchRippleClasses.child),
childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),
childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)
},
timeout: DURATION,
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize
}, nextKey.current)]);
nextKey.current += 1;
rippleCallback.current = cb;
}, [classes]);
const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {
const {
pulsate = false,
center = centerProp || options.pulsate,
fakeElement = false // For test purposes
} = options;
if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
ignoringMouseDown.current = false;
return;
}
if ((event == null ? void 0 : event.type) === 'touchstart') {
ignoringMouseDown.current = true;
}
const element = fakeElement ? null : container.current;
const rect = element ? element.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
top: 0
};
// Get the size of the ripple
let rippleX;
let rippleY;
let rippleSize;
if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
rippleX = Math.round(rect.width / 2);
rippleY = Math.round(rect.height / 2);
} else {
const {
clientX,
clientY
} = event.touches && event.touches.length > 0 ? event.touches[0] : event;
rippleX = Math.round(clientX - rect.left);
rippleY = Math.round(clientY - rect.top);
}
if (center) {
rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
// For some reason the animation is broken on Mobile Chrome if the size is even.
if (rippleSize % 2 === 0) {
rippleSize += 1;
}
} else {
const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
}
// Touche devices
if (event != null && event.touches) {
// check that this isn't another touchstart due to multitouch
// otherwise we will only clear a single timer when unmounting while two
// are running
if (startTimerCommit.current === null) {
// Prepare the ripple effect.
startTimerCommit.current = () => {
startCommit({
pulsate,
rippleX,
rippleY,
rippleSize,
cb
});
};
// Delay the execution of the ripple effect.
// We have to make a tradeoff with this delay value.
startTimer.start(DELAY_RIPPLE, () => {
if (startTimerCommit.current) {
startTimerCommit.current();
startTimerCommit.current = null;
}
});
}
} else {
startCommit({
pulsate,
rippleX,
rippleY,
rippleSize,
cb
});
}
}, [centerProp, startCommit, startTimer]);
const pulsate = React.useCallback(() => {
start({}, {
pulsate: true
});
}, [start]);
const stop = React.useCallback((event, cb) => {
startTimer.clear();
// The touch interaction occurs too quickly.
// We still want to show ripple effect.
if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
startTimerCommit.current();
startTimerCommit.current = null;
startTimer.start(0, () => {
stop(event, cb);
});
return;
}
startTimerCommit.current = null;
setRipples(oldRipples => {
if (oldRipples.length > 0) {
return oldRipples.slice(1);
}
return oldRipples;
});
rippleCallback.current = cb;
}, [startTimer]);
React.useImperativeHandle(ref, () => ({
pulsate,
start,
stop
}), [pulsate, start, stop]);
return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({
className: clsx(touchRippleClasses.root, classes.root, className),
ref: container
}, other, {
children: /*#__PURE__*/_jsx(TransitionGroup, {
component: null,
exit: true,
children: ripples
})
}));
});
process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
/**
* If `true`, the ripple starts at the center of the component
* rather than at the point of interaction.
*/
center: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string
} : void 0;
export default TouchRipple;

View File

@@ -0,0 +1,12 @@
export interface ButtonBaseClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** State class applied to the root element if keyboard focused. */
focusVisible: string;
}
export type ButtonBaseClassKey = keyof ButtonBaseClasses;
export declare function getButtonBaseUtilityClass(slot: string): string;
declare const buttonBaseClasses: ButtonBaseClasses;
export default buttonBaseClasses;

View File

@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getButtonBaseUtilityClass(slot) {
return generateUtilityClass('MuiButtonBase', slot);
}
const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
export default buttonBaseClasses;

View File

@@ -0,0 +1,8 @@
export { default } from './ButtonBase';
export * from './ButtonBase';
export { default as buttonBaseClasses } from './buttonBaseClasses';
export * from './buttonBaseClasses';
export { default as touchRippleClasses } from './touchRippleClasses';
export * from './touchRippleClasses';

View File

@@ -0,0 +1,7 @@
'use client';
export { default } from './ButtonBase';
export { default as buttonBaseClasses } from './buttonBaseClasses';
export * from './buttonBaseClasses';
export { default as touchRippleClasses } from './touchRippleClasses';
export * from './touchRippleClasses';

View File

@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/ButtonBase/index.js",
"types": "./index.d.ts"
}

View File

@@ -0,0 +1,20 @@
export interface TouchRippleClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the internal `Ripple` components `ripple` class. */
ripple: string;
/** Styles applied to the internal `Ripple` components `rippleVisible` class. */
rippleVisible: string;
/** Styles applied to the internal `Ripple` components `ripplePulsate` class. */
ripplePulsate: string;
/** Styles applied to the internal `Ripple` components `child` class. */
child: string;
/** Styles applied to the internal `Ripple` components `childLeaving` class. */
childLeaving: string;
/** Styles applied to the internal `Ripple` components `childPulsate` class. */
childPulsate: string;
}
export type TouchRippleClassKey = keyof TouchRippleClasses;
export declare function getTouchRippleUtilityClass(slot: string): string;
declare const touchRippleClasses: TouchRippleClasses;
export default touchRippleClasses;

View File

@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getTouchRippleUtilityClass(slot) {
return generateUtilityClass('MuiTouchRipple', slot);
}
const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
export default touchRippleClasses;