1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 |
|
4 | var _CloseIcon;
|
5 |
|
6 | const _excluded = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
|
7 | import * as React from 'react';
|
8 | import PropTypes from 'prop-types';
|
9 | import clsx from 'clsx';
|
10 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
11 | import { darken, lighten } from '@mui/system';
|
12 | import styled from '../styles/styled';
|
13 | import useThemeProps from '../styles/useThemeProps';
|
14 | import capitalize from '../utils/capitalize';
|
15 | import Paper from '../Paper';
|
16 | import alertClasses, { getAlertUtilityClass } from './alertClasses';
|
17 | import IconButton from '../IconButton';
|
18 | import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';
|
19 | import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';
|
20 | import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
|
21 | import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
|
22 | import CloseIcon from '../internal/svg-icons/Close';
|
23 | import { jsx as _jsx } from "react/jsx-runtime";
|
24 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
25 |
|
26 | const useUtilityClasses = ownerState => {
|
27 | const {
|
28 | variant,
|
29 | color,
|
30 | severity,
|
31 | classes
|
32 | } = ownerState;
|
33 | const slots = {
|
34 | root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`],
|
35 | icon: ['icon'],
|
36 | message: ['message'],
|
37 | action: ['action']
|
38 | };
|
39 | return composeClasses(slots, getAlertUtilityClass, classes);
|
40 | };
|
41 |
|
42 | const AlertRoot = styled(Paper, {
|
43 | name: 'MuiAlert',
|
44 | slot: 'Root',
|
45 | overridesResolver: (props, styles) => {
|
46 | const {
|
47 | ownerState
|
48 | } = props;
|
49 | return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
|
50 | }
|
51 | })(({
|
52 | theme,
|
53 | ownerState
|
54 | }) => {
|
55 | const getColor = theme.palette.mode === 'light' ? darken : lighten;
|
56 | const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
|
57 | const color = ownerState.color || ownerState.severity;
|
58 | return _extends({}, theme.typography.body2, {
|
59 | backgroundColor: 'transparent',
|
60 | display: 'flex',
|
61 | padding: '6px 16px'
|
62 | }, color && ownerState.variant === 'standard' && {
|
63 | color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
|
64 | backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
|
65 | [`& .${alertClasses.icon}`]: theme.vars ? {
|
66 | color: theme.vars.palette.Alert[`${color}IconColor`]
|
67 | } : {
|
68 | color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
|
69 | }
|
70 | }, color && ownerState.variant === 'outlined' && {
|
71 | color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
|
72 | border: `1px solid ${(theme.vars || theme).palette[color].light}`,
|
73 | [`& .${alertClasses.icon}`]: theme.vars ? {
|
74 | color: theme.vars.palette.Alert[`${color}IconColor`]
|
75 | } : {
|
76 | color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
|
77 | }
|
78 | }, color && ownerState.variant === 'filled' && _extends({
|
79 | fontWeight: theme.typography.fontWeightMedium
|
80 | }, theme.vars ? {
|
81 | color: theme.vars.palette.Alert[`${color}FilledColor`],
|
82 | backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
|
83 | } : {
|
84 | backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
|
85 | color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
|
86 | }));
|
87 | });
|
88 | const AlertIcon = styled('div', {
|
89 | name: 'MuiAlert',
|
90 | slot: 'Icon',
|
91 | overridesResolver: (props, styles) => styles.icon
|
92 | })({
|
93 | marginRight: 12,
|
94 | padding: '7px 0',
|
95 | display: 'flex',
|
96 | fontSize: 22,
|
97 | opacity: 0.9
|
98 | });
|
99 | const AlertMessage = styled('div', {
|
100 | name: 'MuiAlert',
|
101 | slot: 'Message',
|
102 | overridesResolver: (props, styles) => styles.message
|
103 | })({
|
104 | padding: '8px 0',
|
105 | minWidth: 0,
|
106 | overflow: 'auto'
|
107 | });
|
108 | const AlertAction = styled('div', {
|
109 | name: 'MuiAlert',
|
110 | slot: 'Action',
|
111 | overridesResolver: (props, styles) => styles.action
|
112 | })({
|
113 | display: 'flex',
|
114 | alignItems: 'flex-start',
|
115 | padding: '4px 0 0 16px',
|
116 | marginLeft: 'auto',
|
117 | marginRight: -8
|
118 | });
|
119 | const defaultIconMapping = {
|
120 | success: _jsx(SuccessOutlinedIcon, {
|
121 | fontSize: "inherit"
|
122 | }),
|
123 | warning: _jsx(ReportProblemOutlinedIcon, {
|
124 | fontSize: "inherit"
|
125 | }),
|
126 | error: _jsx(ErrorOutlineIcon, {
|
127 | fontSize: "inherit"
|
128 | }),
|
129 | info: _jsx(InfoOutlinedIcon, {
|
130 | fontSize: "inherit"
|
131 | })
|
132 | };
|
133 | const Alert = React.forwardRef(function Alert(inProps, ref) {
|
134 | const props = useThemeProps({
|
135 | props: inProps,
|
136 | name: 'MuiAlert'
|
137 | });
|
138 |
|
139 | const {
|
140 | action,
|
141 | children,
|
142 | className,
|
143 | closeText = 'Close',
|
144 | color,
|
145 | icon,
|
146 | iconMapping = defaultIconMapping,
|
147 | onClose,
|
148 | role = 'alert',
|
149 | severity = 'success',
|
150 | variant = 'standard'
|
151 | } = props,
|
152 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
153 |
|
154 | const ownerState = _extends({}, props, {
|
155 | color,
|
156 | severity,
|
157 | variant
|
158 | });
|
159 |
|
160 | const classes = useUtilityClasses(ownerState);
|
161 | return _jsxs(AlertRoot, _extends({
|
162 | role: role,
|
163 | elevation: 0,
|
164 | ownerState: ownerState,
|
165 | className: clsx(classes.root, className),
|
166 | ref: ref
|
167 | }, other, {
|
168 | children: [icon !== false ? _jsx(AlertIcon, {
|
169 | ownerState: ownerState,
|
170 | className: classes.icon,
|
171 | children: icon || iconMapping[severity] || defaultIconMapping[severity]
|
172 | }) : null, _jsx(AlertMessage, {
|
173 | ownerState: ownerState,
|
174 | className: classes.message,
|
175 | children: children
|
176 | }), action != null ? _jsx(AlertAction, {
|
177 | ownerState: ownerState,
|
178 | className: classes.action,
|
179 | children: action
|
180 | }) : null, action == null && onClose ? _jsx(AlertAction, {
|
181 | ownerState: ownerState,
|
182 | className: classes.action,
|
183 | children: _jsx(IconButton, {
|
184 | size: "small",
|
185 | "aria-label": closeText,
|
186 | title: closeText,
|
187 | color: "inherit",
|
188 | onClick: onClose,
|
189 | children: _CloseIcon || (_CloseIcon = _jsx(CloseIcon, {
|
190 | fontSize: "small"
|
191 | }))
|
192 | })
|
193 | }) : null]
|
194 | }));
|
195 | });
|
196 | process.env.NODE_ENV !== "production" ? Alert.propTypes
|
197 |
|
198 | = {
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 | |
205 |
|
206 |
|
207 | action: PropTypes.node,
|
208 |
|
209 | |
210 |
|
211 |
|
212 | children: PropTypes.node,
|
213 |
|
214 | |
215 |
|
216 |
|
217 | classes: PropTypes.object,
|
218 |
|
219 | |
220 |
|
221 |
|
222 | className: PropTypes.string,
|
223 |
|
224 | |
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 | closeText: PropTypes.string,
|
231 |
|
232 | |
233 |
|
234 |
|
235 |
|
236 |
|
237 | color: PropTypes
|
238 |
|
239 | .oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
|
240 |
|
241 | |
242 |
|
243 |
|
244 |
|
245 |
|
246 | icon: PropTypes.node,
|
247 |
|
248 | |
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 | iconMapping: PropTypes.shape({
|
255 | error: PropTypes.node,
|
256 | info: PropTypes.node,
|
257 | success: PropTypes.node,
|
258 | warning: PropTypes.node
|
259 | }),
|
260 |
|
261 | |
262 |
|
263 |
|
264 |
|
265 |
|
266 | onClose: PropTypes.func,
|
267 |
|
268 | |
269 |
|
270 |
|
271 |
|
272 | role: PropTypes.string,
|
273 |
|
274 | |
275 |
|
276 |
|
277 |
|
278 | severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
|
279 |
|
280 | |
281 |
|
282 |
|
283 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
284 |
|
285 | |
286 |
|
287 |
|
288 |
|
289 | variant: PropTypes
|
290 |
|
291 | .oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
|
292 | } : void 0;
|
293 | export default Alert; |
\ | No newline at end of file |