1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
8 | import ButtonBase from '../ButtonBase';
|
9 | import capitalize from '../utils/capitalize';
|
10 | import useThemeProps from '../styles/useThemeProps';
|
11 | import fabClasses, { getFabUtilityClass } from './fabClasses';
|
12 | import styled from '../styles/styled';
|
13 | import { jsx as _jsx } from "react/jsx-runtime";
|
14 |
|
15 | const useUtilityClasses = ownerState => {
|
16 | const {
|
17 | color,
|
18 | variant,
|
19 | classes,
|
20 | size
|
21 | } = ownerState;
|
22 | const slots = {
|
23 | root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
|
24 | };
|
25 | return composeClasses(slots, getFabUtilityClass, classes);
|
26 | };
|
27 |
|
28 | const FabRoot = styled(ButtonBase, {
|
29 | name: 'MuiFab',
|
30 | slot: 'Root',
|
31 | overridesResolver: (props, styles) => {
|
32 | const {
|
33 | ownerState
|
34 | } = props;
|
35 | return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
|
36 | }
|
37 | })(({
|
38 | theme,
|
39 | ownerState
|
40 | }) => {
|
41 | var _theme$palette$getCon, _theme$palette;
|
42 |
|
43 | return _extends({}, theme.typography.button, {
|
44 | minHeight: 36,
|
45 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
|
46 | duration: theme.transitions.duration.short
|
47 | }),
|
48 | borderRadius: '50%',
|
49 | padding: 0,
|
50 | minWidth: 0,
|
51 | width: 56,
|
52 | height: 56,
|
53 | zIndex: (theme.vars || theme).zIndex.fab,
|
54 | boxShadow: (theme.vars || theme).shadows[6],
|
55 | '&:active': {
|
56 | boxShadow: (theme.vars || theme).shadows[12]
|
57 | },
|
58 | color: theme.vars ? theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
|
59 | backgroundColor: (theme.vars || theme).palette.grey[300],
|
60 | '&:hover': {
|
61 | backgroundColor: (theme.vars || theme).palette.grey.A100,
|
62 |
|
63 | '@media (hover: none)': {
|
64 | backgroundColor: (theme.vars || theme).palette.grey[300]
|
65 | },
|
66 | textDecoration: 'none'
|
67 | },
|
68 | [`&.${fabClasses.focusVisible}`]: {
|
69 | boxShadow: (theme.vars || theme).shadows[6]
|
70 | },
|
71 | [`&.${fabClasses.disabled}`]: {
|
72 | color: (theme.vars || theme).palette.action.disabled,
|
73 | boxShadow: (theme.vars || theme).shadows[0],
|
74 | backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
75 | }
|
76 | }, ownerState.size === 'small' && {
|
77 | width: 40,
|
78 | height: 40
|
79 | }, ownerState.size === 'medium' && {
|
80 | width: 48,
|
81 | height: 48
|
82 | }, ownerState.variant === 'extended' && {
|
83 | borderRadius: 48 / 2,
|
84 | padding: '0 16px',
|
85 | width: 'auto',
|
86 | minHeight: 'auto',
|
87 | minWidth: 48,
|
88 | height: 48
|
89 | }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
|
90 | width: 'auto',
|
91 | padding: '0 8px',
|
92 | borderRadius: 34 / 2,
|
93 | minWidth: 34,
|
94 | height: 34
|
95 | }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
|
96 | width: 'auto',
|
97 | padding: '0 16px',
|
98 | borderRadius: 40 / 2,
|
99 | minWidth: 40,
|
100 | height: 40
|
101 | }, ownerState.color === 'inherit' && {
|
102 | color: 'inherit'
|
103 | });
|
104 | }, ({
|
105 | theme,
|
106 | ownerState
|
107 | }) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
|
108 | color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
109 | backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
|
110 | '&:hover': {
|
111 | backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
|
112 |
|
113 | '@media (hover: none)': {
|
114 | backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
115 | }
|
116 | }
|
117 | }));
|
118 | const Fab = React.forwardRef(function Fab(inProps, ref) {
|
119 | const props = useThemeProps({
|
120 | props: inProps,
|
121 | name: 'MuiFab'
|
122 | });
|
123 |
|
124 | const {
|
125 | children,
|
126 | className,
|
127 | color = 'default',
|
128 | component = 'button',
|
129 | disabled = false,
|
130 | disableFocusRipple = false,
|
131 | focusVisibleClassName,
|
132 | size = 'large',
|
133 | variant = 'circular'
|
134 | } = props,
|
135 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
136 |
|
137 | const ownerState = _extends({}, props, {
|
138 | color,
|
139 | component,
|
140 | disabled,
|
141 | disableFocusRipple,
|
142 | size,
|
143 | variant
|
144 | });
|
145 |
|
146 | const classes = useUtilityClasses(ownerState);
|
147 | return _jsx(FabRoot, _extends({
|
148 | className: clsx(classes.root, className),
|
149 | component: component,
|
150 | disabled: disabled,
|
151 | focusRipple: !disableFocusRipple,
|
152 | focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
153 | ownerState: ownerState,
|
154 | ref: ref
|
155 | }, other, {
|
156 | children: children
|
157 | }));
|
158 | });
|
159 | process.env.NODE_ENV !== "production" ? Fab.propTypes
|
160 |
|
161 | = {
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 | |
168 |
|
169 |
|
170 | children: PropTypes.node,
|
171 |
|
172 | |
173 |
|
174 |
|
175 | classes: PropTypes.object,
|
176 |
|
177 | |
178 |
|
179 |
|
180 | className: PropTypes.string,
|
181 |
|
182 | |
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | color: PropTypes
|
189 |
|
190 | .oneOfType([PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
|
191 |
|
192 | |
193 |
|
194 |
|
195 |
|
196 | component: PropTypes.elementType,
|
197 |
|
198 | |
199 |
|
200 |
|
201 |
|
202 | disabled: PropTypes.bool,
|
203 |
|
204 | |
205 |
|
206 |
|
207 |
|
208 | disableFocusRipple: PropTypes.bool,
|
209 |
|
210 | |
211 |
|
212 |
|
213 | disableRipple: PropTypes.bool,
|
214 |
|
215 | |
216 |
|
217 |
|
218 | focusVisibleClassName: PropTypes.string,
|
219 |
|
220 | |
221 |
|
222 |
|
223 |
|
224 | href: PropTypes.string,
|
225 |
|
226 | |
227 |
|
228 |
|
229 |
|
230 |
|
231 | size: PropTypes
|
232 |
|
233 | .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
|
234 |
|
235 | |
236 |
|
237 |
|
238 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
239 |
|
240 | |
241 |
|
242 |
|
243 |
|
244 | variant: PropTypes
|
245 |
|
246 | .oneOfType([PropTypes.oneOf(['circular', 'extended']), PropTypes.string])
|
247 | } : void 0;
|
248 | export default Fab; |
\ | No newline at end of file |