forked from wso2/carbon-apimgt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Message.jsx
99 lines (93 loc) · 3.09 KB
/
Message.jsx
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
91
92
93
94
95
96
97
98
99
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Info from '@material-ui/icons/Info';
import Error from '@material-ui/icons/Error';
import Warning from '@material-ui/icons/Warning';
import Done from '@material-ui/icons/Done';
import Loading from '@material-ui/core/CircularProgress';
const styles = {
root: {
position: 'relative' /* Overriding the default Snackbar root properties to stack messages */,
padding: '5px' /* To add some space between messages when stacking messages */,
},
};
/**
* Build the message which is displayed in the Alert content
*/
const Message = (props) => {
const {
classes, message, handleClose, type,
} = props;
const Icon = Message.iconTypes[type];
return (
<div>
<Snackbar
classes={{ root: classes.root }}
open
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={
<span id='message-id'>
{Icon}
{message}
</span>
}
action={[
<IconButton
key='close'
aria-label='Close'
color='default'
className={classes.close}
onClick={handleClose}
>
<CloseIcon />
</IconButton>,
]}
/>
</div>
);
};
/* TODO: Need to add color accordingly ~tmkb */
Message.iconTypes = {
info: <Info color='primary' />,
success: <Done />,
error: <Error color='error' />,
warning: <Warning />,
loading: <Loading />,
};
Message.propTypes = {
classes: PropTypes.shape({
root: PropTypes.string,
close: PropTypes.string,
}).isRequired,
message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
handleClose: PropTypes.func.isRequired,
type: PropTypes.string.isRequired,
};
export default withStyles(styles)(Message);