import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { colors, Notification, Icon, icons as ICONS } from 'trezor-ui-components'; import { getIcon, getPrimaryColor } from 'utils/notification'; const Wrapper = styled.div``; const Header = styled.div` display: flex; cursor: pointer; justify-content: space-between; background: ${colors.WHITE}; align-items: center; padding: 5px 10px; border-bottom: 1px solid ${colors.BACKGROUND}; `; const Left = styled.div` display: flex; justify-content: flex-start; align-items: center; `; const Right = styled.div``; const Body = styled.div``; const Title = styled.div` color: ${props => props.color}; `; const StyledNotification = styled(Notification)` border-bottom: 1px solid ${colors.WHITE}; &:last-child { border: 0; } `; const StyledIcon = styled(Icon)` margin-right: 6px; `; class Group extends PureComponent { constructor() { super(); this.state = { visibleCount: 1, visible: true, }; } toggle = () => { if (this.state.visible) { this.setState({ visible: false, visibleCount: this.props.groupNotifications.length, }); } else { this.setState({ visible: true, visibleCount: 0, }); } }; render() { const { variant, groupNotifications, close } = this.props; const color = getPrimaryColor(variant); return ( {groupNotifications.length > 1 && (
{groupNotifications.length}{' '} {groupNotifications.length > 1 ? `${variant}s` : variant}
)} {groupNotifications.slice(0, this.state.visibleCount).map(notification => ( ))} ); } } Group.propTypes = { variant: PropTypes.string, close: PropTypes.func.isRequired, groupNotifications: PropTypes.arrayOf( PropTypes.shape({ key: PropTypes.object, type: PropTypes.string, title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), }) ), }; export default Group;