1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { usePreviousProps } from '@mui/utils';
|
8 | import composeClasses from '@mui/base/composeClasses';
|
9 | import BadgeUnstyled from '@mui/base/BadgeUnstyled';
|
10 | import styled from '../styles/styled';
|
11 | import useThemeProps from '../styles/useThemeProps';
|
12 | import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
|
13 | import capitalize from '../utils/capitalize';
|
14 | import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
|
15 | import { jsx as _jsx } from "react/jsx-runtime";
|
16 | const RADIUS_STANDARD = 10;
|
17 | const RADIUS_DOT = 4;
|
18 |
|
19 | const useUtilityClasses = ownerState => {
|
20 | const {
|
21 | color,
|
22 | anchorOrigin,
|
23 | invisible,
|
24 | overlap,
|
25 | variant,
|
26 | classes = {}
|
27 | } = ownerState;
|
28 | const slots = {
|
29 | root: ['root'],
|
30 | badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
|
31 | };
|
32 | return composeClasses(slots, getBadgeUtilityClass, classes);
|
33 | };
|
34 |
|
35 | const BadgeRoot = styled('span', {
|
36 | name: 'MuiBadge',
|
37 | slot: 'Root',
|
38 | overridesResolver: (props, styles) => styles.root
|
39 | })({
|
40 | position: 'relative',
|
41 | display: 'inline-flex',
|
42 |
|
43 | verticalAlign: 'middle',
|
44 | flexShrink: 0
|
45 | });
|
46 | const BadgeBadge = styled('span', {
|
47 | name: 'MuiBadge',
|
48 | slot: 'Badge',
|
49 | overridesResolver: (props, styles) => {
|
50 | const {
|
51 | ownerState
|
52 | } = props;
|
53 | return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
|
54 | }
|
55 | })(({
|
56 | theme,
|
57 | ownerState
|
58 | }) => _extends({
|
59 | display: 'flex',
|
60 | flexDirection: 'row',
|
61 | flexWrap: 'wrap',
|
62 | justifyContent: 'center',
|
63 | alignContent: 'center',
|
64 | alignItems: 'center',
|
65 | position: 'absolute',
|
66 | boxSizing: 'border-box',
|
67 | fontFamily: theme.typography.fontFamily,
|
68 | fontWeight: theme.typography.fontWeightMedium,
|
69 | fontSize: theme.typography.pxToRem(12),
|
70 | minWidth: RADIUS_STANDARD * 2,
|
71 | lineHeight: 1,
|
72 | padding: '0 6px',
|
73 | height: RADIUS_STANDARD * 2,
|
74 | borderRadius: RADIUS_STANDARD,
|
75 | zIndex: 1,
|
76 |
|
77 | transition: theme.transitions.create('transform', {
|
78 | easing: theme.transitions.easing.easeInOut,
|
79 | duration: theme.transitions.duration.enteringScreen
|
80 | })
|
81 | }, ownerState.color !== 'default' && {
|
82 | backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
|
83 | color: (theme.vars || theme).palette[ownerState.color].contrastText
|
84 | }, ownerState.variant === 'dot' && {
|
85 | borderRadius: RADIUS_DOT,
|
86 | height: RADIUS_DOT * 2,
|
87 | minWidth: RADIUS_DOT * 2,
|
88 | padding: 0
|
89 | }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
|
90 | top: 0,
|
91 | right: 0,
|
92 | transform: 'scale(1) translate(50%, -50%)',
|
93 | transformOrigin: '100% 0%',
|
94 | [`&.${badgeClasses.invisible}`]: {
|
95 | transform: 'scale(0) translate(50%, -50%)'
|
96 | }
|
97 | }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
|
98 | bottom: 0,
|
99 | right: 0,
|
100 | transform: 'scale(1) translate(50%, 50%)',
|
101 | transformOrigin: '100% 100%',
|
102 | [`&.${badgeClasses.invisible}`]: {
|
103 | transform: 'scale(0) translate(50%, 50%)'
|
104 | }
|
105 | }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
|
106 | top: 0,
|
107 | left: 0,
|
108 | transform: 'scale(1) translate(-50%, -50%)',
|
109 | transformOrigin: '0% 0%',
|
110 | [`&.${badgeClasses.invisible}`]: {
|
111 | transform: 'scale(0) translate(-50%, -50%)'
|
112 | }
|
113 | }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
|
114 | bottom: 0,
|
115 | left: 0,
|
116 | transform: 'scale(1) translate(-50%, 50%)',
|
117 | transformOrigin: '0% 100%',
|
118 | [`&.${badgeClasses.invisible}`]: {
|
119 | transform: 'scale(0) translate(-50%, 50%)'
|
120 | }
|
121 | }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
|
122 | top: '14%',
|
123 | right: '14%',
|
124 | transform: 'scale(1) translate(50%, -50%)',
|
125 | transformOrigin: '100% 0%',
|
126 | [`&.${badgeClasses.invisible}`]: {
|
127 | transform: 'scale(0) translate(50%, -50%)'
|
128 | }
|
129 | }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
|
130 | bottom: '14%',
|
131 | right: '14%',
|
132 | transform: 'scale(1) translate(50%, 50%)',
|
133 | transformOrigin: '100% 100%',
|
134 | [`&.${badgeClasses.invisible}`]: {
|
135 | transform: 'scale(0) translate(50%, 50%)'
|
136 | }
|
137 | }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
|
138 | top: '14%',
|
139 | left: '14%',
|
140 | transform: 'scale(1) translate(-50%, -50%)',
|
141 | transformOrigin: '0% 0%',
|
142 | [`&.${badgeClasses.invisible}`]: {
|
143 | transform: 'scale(0) translate(-50%, -50%)'
|
144 | }
|
145 | }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
|
146 | bottom: '14%',
|
147 | left: '14%',
|
148 | transform: 'scale(1) translate(-50%, 50%)',
|
149 | transformOrigin: '0% 100%',
|
150 | [`&.${badgeClasses.invisible}`]: {
|
151 | transform: 'scale(0) translate(-50%, 50%)'
|
152 | }
|
153 | }, ownerState.invisible && {
|
154 | transition: theme.transitions.create('transform', {
|
155 | easing: theme.transitions.easing.easeInOut,
|
156 | duration: theme.transitions.duration.leavingScreen
|
157 | })
|
158 | }));
|
159 | const Badge = React.forwardRef(function Badge(inProps, ref) {
|
160 | const props = useThemeProps({
|
161 | props: inProps,
|
162 | name: 'MuiBadge'
|
163 | });
|
164 |
|
165 | const {
|
166 | anchorOrigin: anchorOriginProp = {
|
167 | vertical: 'top',
|
168 | horizontal: 'right'
|
169 | },
|
170 | className,
|
171 | component = 'span',
|
172 | components = {},
|
173 | componentsProps = {},
|
174 | overlap: overlapProp = 'rectangular',
|
175 | color: colorProp = 'default',
|
176 | invisible: invisibleProp = false,
|
177 | max,
|
178 | badgeContent: badgeContentProp,
|
179 | showZero = false,
|
180 | variant: variantProp = 'standard'
|
181 | } = props,
|
182 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
183 |
|
184 | const prevProps = usePreviousProps({
|
185 | anchorOrigin: anchorOriginProp,
|
186 | color: colorProp,
|
187 | overlap: overlapProp,
|
188 | variant: variantProp
|
189 | });
|
190 | let invisible = invisibleProp;
|
191 |
|
192 | if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
|
193 | invisible = true;
|
194 | }
|
195 |
|
196 | const {
|
197 | color = colorProp,
|
198 | overlap = overlapProp,
|
199 | anchorOrigin = anchorOriginProp,
|
200 | variant = variantProp
|
201 | } = invisible ? prevProps : props;
|
202 |
|
203 | const ownerState = _extends({}, props, {
|
204 | anchorOrigin,
|
205 | invisible,
|
206 | color,
|
207 | overlap,
|
208 | variant
|
209 | });
|
210 |
|
211 | const classes = useUtilityClasses(ownerState);
|
212 | let displayValue;
|
213 |
|
214 | if (variant !== 'dot') {
|
215 | displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
|
216 | }
|
217 |
|
218 | return _jsx(BadgeUnstyled, _extends({
|
219 | invisible: invisibleProp,
|
220 | badgeContent: displayValue,
|
221 | showZero: showZero,
|
222 | max: max
|
223 | }, other, {
|
224 | components: _extends({
|
225 | Root: BadgeRoot,
|
226 | Badge: BadgeBadge
|
227 | }, components),
|
228 | className: clsx(componentsProps.root?.className, classes.root, className),
|
229 | componentsProps: {
|
230 | root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
|
231 | as: component,
|
232 | ownerState: _extends({}, componentsProps.root?.ownerState, {
|
233 | anchorOrigin,
|
234 | color,
|
235 | overlap,
|
236 | variant
|
237 | })
|
238 | }),
|
239 | badge: _extends({}, componentsProps.badge, {
|
240 | className: clsx(classes.badge, componentsProps.badge?.className)
|
241 | }, shouldSpreadAdditionalProps(components.Badge) && {
|
242 | ownerState: _extends({}, componentsProps.badge?.ownerState, {
|
243 | anchorOrigin,
|
244 | color,
|
245 | overlap,
|
246 | variant
|
247 | })
|
248 | })
|
249 | },
|
250 | ref: ref
|
251 | }));
|
252 | });
|
253 | process.env.NODE_ENV !== "production" ? Badge.propTypes
|
254 |
|
255 | = {
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 | |
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 | anchorOrigin: PropTypes.shape({
|
269 | horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
|
270 | vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
|
271 | }),
|
272 |
|
273 | |
274 |
|
275 |
|
276 | badgeContent: PropTypes.node,
|
277 |
|
278 | |
279 |
|
280 |
|
281 | children: PropTypes.node,
|
282 |
|
283 | |
284 |
|
285 |
|
286 | classes: PropTypes.object,
|
287 |
|
288 | |
289 |
|
290 |
|
291 | className: PropTypes.string,
|
292 |
|
293 | |
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 | color: PropTypes
|
300 |
|
301 | .oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
302 |
|
303 | |
304 |
|
305 |
|
306 |
|
307 | component: PropTypes.elementType,
|
308 |
|
309 | |
310 |
|
311 |
|
312 |
|
313 |
|
314 | components: PropTypes.shape({
|
315 | Badge: PropTypes.elementType,
|
316 | Root: PropTypes.elementType
|
317 | }),
|
318 |
|
319 | |
320 |
|
321 |
|
322 |
|
323 | componentsProps: PropTypes.shape({
|
324 | badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
325 | root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
326 | }),
|
327 |
|
328 | |
329 |
|
330 |
|
331 |
|
332 | invisible: PropTypes.bool,
|
333 |
|
334 | |
335 |
|
336 |
|
337 |
|
338 | max: PropTypes.number,
|
339 |
|
340 | |
341 |
|
342 |
|
343 |
|
344 | overlap: PropTypes.oneOf(['circular', 'rectangular']),
|
345 |
|
346 | |
347 |
|
348 |
|
349 |
|
350 | showZero: PropTypes.bool,
|
351 |
|
352 | |
353 |
|
354 |
|
355 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
356 |
|
357 | |
358 |
|
359 |
|
360 |
|
361 | variant: PropTypes
|
362 |
|
363 | .oneOfType([PropTypes.oneOf(['dot', 'standard']), PropTypes.string])
|
364 | } : void 0;
|
365 | export default Badge; |
\ | No newline at end of file |