| 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121 |
7x
1x
1x
1x
10x
10x
10x
10x
24x
24x
20x
89x
89x
| import React from 'react';
import PropTypes from 'prop-types';
import { Alert } from '@collab-ui/react';
import {
bind,
reject,
uniqueId
} from 'lodash';
class AlertContainer extends React.Component {
static displayName = 'AlertContainer';
state = {
alertList: []
}
info = (title, message, onHide, otherProps) => {
this.handleAlert(
title,
message,
onHide,
'info',
otherProps
);
}
success = (title, message, onHide, otherProps) => {
this.handleAlert(
title,
message,
onHide,
'success',
otherProps
);
}
warning = (title, message, onHide, otherProps) => {
this.handleAlert(
title,
message,
onHide,
'warning',
otherProps
);
}
error = (title, message, onHide, otherProps) => {
this.handleAlert(
title,
message,
onHide,
'error',
otherProps
);
}
handleAlert = (title, message, onHide, type, otherProps) => {
const { orderNewest } = this.props;
const key = uniqueId('alert_');
const nextAlert = {
key,
title: title,
message: message,
onHide: bind(this.handleOnHide, this, key, onHide),
type: type,
show: true,
closable: true,
otherProps
};
this.setState(state => ({
alertList: orderNewest
? [nextAlert, ...state.alertList]
: [...state.alertList, nextAlert]
}));
}
handleOnHide = (key, onHide, e) => {
this.setState(state => {
onHide && onHide(e);
return { alertList: reject(state.alertList, {key}) };
});
}
render() {
const { position } = this.props;
return (
<div className={`cui-alert__container cui-alert__container--${position}`} role='alert'>
{
this.state.alertList.map(alert => (
<Alert
key={alert.key}
title={alert.title}
message={alert.message}
type={alert.type}
show={alert.show}
closable={alert.closable}
onHide={alert.onHide}
{...alert.otherProps}
/>
))
}
</div>
);
}
}
AlertContainer.defaultProps = {
orderNewest: true,
position: 'bottom-right'
};
AlertContainer.propTypes = {
/** @prop Display newest alert messages first | true */
orderNewest: PropTypes.bool,
/** @prop Define alert's position with css class name: 'bottom-right' */
position: PropTypes.oneOf(['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'])
};
export default AlertContainer;
|