Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
import React, { Component } from 'react';
import classNames from 'classnames';
import { Avatar } from '../../avatar/base/example';
import { Popover } from '../../popovers/base/example';
import NotificationData from './data';
/**
* Notification Item
*/
const NotificationItem = props => (
<li
className={classNames(
'slds-global-header__notification',
props.unread && 'slds-global-header__notification_unread',
props.className
)}
key={props.index}
>
<div className="slds-media slds-has-flexi-truncate slds-p-around_x-small">
<div className="slds-media__figure">
<Avatar className="slds-avatar_small">
<img
alt={props.username}
src={props.avatar}
title={`${props.username} avatar`}
/>
</Avatar>
</div>
<div className="slds-media__body">
<div className="slds-grid slds-grid_align-spread">
<a
href="#"
onClick={e => e.preventDefault()}
className="slds-text-link_reset slds-has-flexi-truncate"
>
<h3
className="slds-truncate"
title={`${props.username} ${props.title}`}
>
<strong>{`${props.username} ${props.title}`}</strong>
</h3>
<p className="slds-truncate" title={props.message}>
{props.message}
</p>
<p className="slds-m-top_x-small slds-text-color_weak">
{props.timestamp}
{props.unread && (
<abbr
className="slds-text-link slds-m-horizontal_xxx-small"
title="unread"
>
●
</abbr>
)}
</p>
</a>
</div>
</div>
</div>
</li>
);
class GlobalNotifications extends Component {
constructor() {
super();
this.renderNotificationItems = this.renderNotificationItems.bind(this);
}
renderNotificationItems(key) {
const notification = NotificationData[key];
return (
<NotificationItem
key={key}
index={key}
avatar={notification.avatar}
username={notification.username}
title={notification.title}
message={notification.message}
timestamp={notification.timestamp}
unread={notification.unread}
/>
);
}
render() {
return (
<Popover
className="slds-popover_large slds-nubbin_top-right"
bodyClassName="slds-p-around_none"
headerTitle="Notifications"
closeButton
style={{
position: 'absolute',
top: 'calc(100% + 12px)',
right: '-12px'
}}
>
<ul>
{Object.keys(NotificationData).map(this.renderNotificationItems)}
</ul>
</Popover>
);
}
}
export default GlobalNotifications;
|