d2-ui/src/app-header/notifications/NotificationItem.js

d2-ui

import React from 'react';
import IconButton from 'material-ui/IconButton';
import Badge from 'material-ui/Badge';

import SvgIcon from '../../svg-icon/SvgIcon';
import styles from '../header-bar-styles';

const NotificationItem = (props) => {
    const { count } = props;

    if (count && count > 0) {
        return (
            <Badge
                secondary
                badgeContent={count > 99 ? '99+' : count}
                style={styles.notificationBadge}
                badgeStyle={styles.notificationBadgeIcon}
            >
                <NotificationIcon { ...props } />
            </Badge>
        );
    }
    
    return (
        <NotificationIcon { ...props } />
    );
}

const NotificationIcon = ({ icon, href, tooltip, style = {} }) => (
    <IconButton
        href={href}
        style={{ ...styles.notificationButton, ...style}}
        iconStyle={styles.notificationIcon}
        tooltip={tooltip}
    >
        <SvgIcon icon={icon} />
    </IconButton>
);

export default NotificationItem;