From d19945448554d71aec3ceb3b276ef9359c5dca13 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 26 Sep 2018 23:07:47 +0200 Subject: [PATCH] Make header clickable --- .../components/Group/index.js | 51 +++++++++++++------ .../Notification/NotificationGroups/index.js | 16 +++--- 2 files changed, 43 insertions(+), 24 deletions(-) diff --git a/src/components/Notification/NotificationGroups/components/Group/index.js b/src/components/Notification/NotificationGroups/components/Group/index.js index 2c98f7e9..e0d96e5a 100644 --- a/src/components/Notification/NotificationGroups/components/Group/index.js +++ b/src/components/Notification/NotificationGroups/components/Group/index.js @@ -7,43 +7,62 @@ const Wrapper = styled.div``; const Header = styled.div` display: flex; + cursor: pointer; background: ${colors.WHITE}; padding: 5px 10px; border-bottom: 1px solid ${colors.BACKGROUND}; `; -const Body = styled.div` -`; +const Body = styled.div``; const Title = styled.div` color: ${props => props.color}; `; class Group extends Component { - hide() { - + constructor() { + super(); + this.state = { + visibleCount: 1, + visible: true, + }; } - show() { - + toggle = () => { + if (this.state.visible) { + this.setState({ + visible: false, + visibleCount: 0, + }); + } else { + this.setState({ + visible: true, + visibleCount: this.props.groupNotifications.length, + }); + } } render() { const { type, groupNotifications, color } = this.props; return ( -
- {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} +
+ {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} +
- {groupNotifications.map(notification => ( - - ))} + {groupNotifications + .slice(0, this.state.visibleCount) + .map(notification => ( + + ))} ); diff --git a/src/components/Notification/NotificationGroups/index.js b/src/components/Notification/NotificationGroups/index.js index 2c665807..ea3cf135 100644 --- a/src/components/Notification/NotificationGroups/index.js +++ b/src/components/Notification/NotificationGroups/index.js @@ -11,14 +11,14 @@ class NotificationsGroup extends Component { constructor() { super(); this.notifications = [ - { type: 'warning', title: 'aaa', message: 'aaaa' }, - { type: 'error', title: 'aaa', message: 'aaaa' }, - { type: 'info', title: 'aaa', message: 'aaaa' }, - { type: 'error', title: 'aaa', message: 'aaaa' }, - { type: 'warning', title: 'aaa', message: 'aaaa' }, - { type: 'success', title: 'aaa', message: 'aaaa' }, - { type: 'error', title: 'aaa', message: 'aaaa' }, - { type: 'error', title: 'aaa', message: 'aaaa' }, + { type: 'warning', title: 'adddaa', message: 'aaaa' }, + { type: 'error', title: 'aaddda', message: 'aaaa' }, + { type: 'info', title: 'aafffa', message: 'aaaa' }, + { type: 'error', title: 'aggaa', message: 'aaaa' }, + { type: 'warning', title: 'aasssa', message: 'aaaa' }, + { type: 'success', title: 'afaa', message: 'aaaa' }, + { type: 'error', title: 'aada', message: 'aaaa' }, + { type: 'error', title: 'aafffa', message: 'aaaa' }, ]; }