forked from chadly/react-bs-notifier
-
Notifications
You must be signed in to change notification settings - Fork 0
/
alerts.jsx
61 lines (55 loc) · 1.61 KB
/
alerts.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
var React = require("react");
var ReactCSSTransitionGroup = require("react-addons-css-transition-group");
require("./styles.less");
var AlertsNotifier = React.createClass({
propTypes: {
alerts: React.PropTypes.array.isRequired,
onDismiss: React.PropTypes.func
},
getInitialState: function () {
return {
dismissedAlerts: []
};
},
dismiss: function(item) {
if (this.props.onDismiss) {
//if callback specified, call it
this.props.onDismiss(item);
} else {
//if no callback for dismissal, just update our state
var newData = this.state.dismissedAlerts.slice();
newData.push(item);
this.setState({ dismissedAlerts: newData });
}
},
render: function () {
var alerts = [];
for (var i = 0; i < this.props.alerts.length; i++) {
if (this.state.dismissedAlerts.indexOf(this.props.alerts[i]) < 0) {
alerts.push(this.props.alerts[i]);
}
}
i = -1;
return (
<div className="alert-notifier-container">
<ReactCSSTransitionGroup transitionName="alert">
{alerts.map(function (item) {
i++;
if (["success", "info", "warning", "danger"].indexOf(item.type) < 0) {
item.type = "info";
}
var css = "alert alert-dismissible alert-" + item.type;
var headline = item.headline ? <strong>{item.headline} </strong> : null;
return (
<div className={css} key={i}>
<button type="button" className="close" title="Dismiss" onClick={this.dismiss.bind(this, item)}>×</button>
{headline}{item.message}
</div>
);
}.bind(this))}
</ReactCSSTransitionGroup>
</div>
);
}
});
module.exports = AlertsNotifier;