-
Notifications
You must be signed in to change notification settings - Fork 149
/
notification-center-item.js
69 lines (54 loc) · 1.83 KB
/
notification-center-item.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
/* eslint-env es6, browser */
"use strict";
const React = require("react"),
friendlyTime = require("../lib/friendly-time.js");
module.exports = (core, ...args) => {
const NotificationItem = require("./notification-item.js")(core, ...args);
class NotificationCenterItem extends React.Component {
constructor(props) {
super(props);
this.state = { item: new NotificationItem(props.note) };
}
closeItem(e) {
let parent = e.target.parentNode;
parent.className += " out";
setTimeout(() => {
parent.style.display = "none";
this.state.item.dismiss();
}, 300);
}
render() {
let item = this.state.item,
actions = [];
for (let handler of item.handlers) {
if (handler.label === "default") {
continue;
}
if (typeof handler.action === "function") {
actions.push(
<a className={handler.label.toLowerCase().replace(/\s+/, "-")} onClick={handler.action.bind(handler)}>
{handler.label}
</a>
);
}
}
return (
<div className={"notification-center-item item " + this.props.note.noteType + (typeof item.readTime === "number" ? " read" : "")}>
<span className="notification-center-item-close close" onClick={this.closeItem.bind(this)} />
<span className="notification-center-item-content content" onClick={item.act.bind(item)}>
<span className="notification-center-item-text" dangerouslySetInnerHTML={{__html: item.html}}/>
<span className="notification-center-item-timestamp">{friendlyTime(this.props.note.time, Date.now())}</span>
</span>
<span className="notification-center-item-actions">{actions}</span>
</div>
);
}
}
NotificationCenterItem.propTypes = {
note: React.PropTypes.shape({
noteType: React.PropTypes.string,
time: React.PropTypes.number
})
};
return NotificationCenterItem;
};