/
SnackbarContent.js
90 lines (83 loc) · 2.23 KB
/
SnackbarContent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// @inheritedComponent Paper
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Paper from '../Paper';
import Typography from '../Typography';
import { emphasize } from '../styles/colorManipulator';
export const styles = theme => {
const emphasis = theme.palette.type === 'light' ? 0.8 : 0.98;
const backgroundColor = emphasize(theme.palette.background.default, emphasis);
return {
/* Styles applied to the root element. */
root: {
color: theme.palette.getContrastText(backgroundColor),
backgroundColor,
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
padding: '6px 24px',
[theme.breakpoints.up('md')]: {
minWidth: 288,
maxWidth: 568,
borderRadius: theme.shape.borderRadius,
},
[theme.breakpoints.down('sm')]: {
flexGrow: 1,
},
},
/* Styles applied to the message wrapper element. */
message: {
padding: '8px 0',
},
/* Styles applied to the action wrapper element if `action` is provided. */
action: {
display: 'flex',
alignItems: 'center',
marginLeft: 'auto',
paddingLeft: 24,
marginRight: -8,
},
};
};
function SnackbarContent(props) {
const { action, classes, className, message, ...other } = props;
return (
<Paper
component={Typography}
headlineMapping={{
body1: 'div',
body2: 'div',
}}
role="alertdialog"
square
elevation={6}
className={classNames(classes.root, className)}
{...other}
>
<div className={classes.message}>{message}</div>
{action ? <div className={classes.action}>{action}</div> : null}
</Paper>
);
}
SnackbarContent.propTypes = {
/**
* The action to display.
*/
action: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The message to display.
*/
message: PropTypes.node,
};
export default withStyles(styles, { name: 'MuiSnackbarContent' })(SnackbarContent);