Make header clickable

6 years ago · d199454485
parent 8af4a487da
commit d199454485
2 changed files with 43 additions and 24 deletions
--- 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 (
            <Wrapper>
-                <Header>
-                    <Title color={color}>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}</Title>
+                <Header onClick={this.toggle}>
+                    <Title
+                        color={color}
+                    >{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
+                    </Title>
                </Header>
                <Body>
-                    {groupNotifications.map(notification => (
-                        <Notification
-                            key={notification.title}
-                            type={notification.type}
-                            title={notification.title}
-                            message={notification.message}
-                        />
-                    ))}
+                    {groupNotifications
+                        .slice(0, this.state.visibleCount)
+                        .map(notification => (
+                            <Notification
+                                key={notification.title}
+                                type={notification.type}
+                                title={notification.title}
+                                message={notification.message}
+                            />
+                        ))}
                </Body>
            </Wrapper>
        );
--- 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' },
        ];
    }