diff --git a/src/components/Notification/NotificationGroups/index.js b/src/components/Notification/NotificationGroups/index.js deleted file mode 100644 index 715b1da3..00000000 --- a/src/components/Notification/NotificationGroups/index.js +++ /dev/null @@ -1,56 +0,0 @@ -import React, { Component } from 'react'; -import styled from 'styled-components'; - -import { PRIORITY } from 'constants/notifications'; -import Group from './components/Group'; - -const Wrapper = styled.div``; - -class NotificationsGroup extends Component { - constructor() { - super(); - this.notifications = [ - { 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' }, - ]; - } - - groupNotifications = notifications => notifications - .reduce((acc, obj) => { - const key = obj.type; - if (!acc[key]) { - acc[key] = []; - } - acc[key].push(obj); - return acc; - }, {}); - - sortByPriority(notifications) { - return notifications; - } - - render() { - const { notifications } = this; - const notificationGroups = this.groupNotifications(notifications); - const sortedNotifications = this.sortByPriority(notificationGroups); - - return ( - - {Object.keys(sortedNotifications).map(group => ( - - ))} - - ); - } -} - -export default NotificationsGroup; \ No newline at end of file diff --git a/src/components/Notification/NotificationGroups/components/Group/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js similarity index 91% rename from src/components/Notification/NotificationGroups/components/Group/index.js rename to src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js index c3915b77..298a77df 100644 --- a/src/components/Notification/NotificationGroups/components/Group/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js @@ -56,7 +56,7 @@ class Group extends Component { } render() { - const { type, groupNotifications } = this.props; + const { type, groupNotifications, close } = this.props; const color = getColor(type); return ( @@ -92,6 +92,9 @@ class Group extends Component { type={notification.type} title={notification.title} message={notification.message} + cancelable={notification.cancelable} + actions={notification.actions} + close={close} /> ))} @@ -102,6 +105,7 @@ class Group extends Component { Group.propTypes = { type: PropTypes.string, + close: PropTypes.func.isRequired, groupNotifications: PropTypes.arrayOf({ key: PropTypes.string, type: PropTypes.string, diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js new file mode 100644 index 00000000..28592017 --- /dev/null +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; + +import { PRIORITY } from 'constants/notifications'; +import Group from './components/Group'; + +const Wrapper = styled.div``; + +class NotificationsGroup extends Component { + groupNotifications = notifications => notifications + .reduce((acc, obj) => { + const key = obj.type; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); + + sortByPriority(notifications) { + return notifications; + } + + render() { + const { close, notifications } = this.props; + // const notifications = [ + // { + // key: '1', + // title: 'this is a title of error notification', + // type: 'error', + // message: 'this is a message of error notification', + // }, + // { + // key: '2', + // title: 'this is a title of warning notification', + // type: 'warning', + // message: 'this is a message of warning notification', + // }, + // { + // key: '3', + // title: 'this is a title of warning notification', + // type: 'warning', + // message: 'this is a message of warning notification', + // }, + // { + // key: '4', + // title: 'this is a title of warning notification', + // type: 'warning', + // message: 'this is a message of warning notification', + // }, + // { + // key: '5', + // title: 'this is a title of warning notification', + // type: 'info', + // message: 'this is a message of warning notification', + // }, + // { + // key: '6', + // title: 'this is a title of info notification', + // type: 'info', + // message: 'this is a message of info notification', + // }, + // ]; + const notificationGroups = this.groupNotifications(notifications); + const sortedNotifications = this.sortByPriority(notificationGroups); + + return ( + + {Object.keys(sortedNotifications).map(group => ( + + ))} + + ); + } +} + +NotificationsGroup.propTypes = { + notifications: PropTypes.array.isRequired, + close: PropTypes.func.isRequired, +}; + +export default NotificationsGroup; \ No newline at end of file diff --git a/src/components/notifications/Context/components/Action/index.js b/src/components/notifications/Context/components/Action/index.js index 0bf7f0be..3050e159 100644 --- a/src/components/notifications/Context/components/Action/index.js +++ b/src/components/notifications/Context/components/Action/index.js @@ -1,20 +1,15 @@ /* @flow */ import * as React from 'react'; -import { Notification } from 'components/Notification'; +import NotificationsGroups from './components/NotificationsGroups'; import type { Props } from '../../index'; export default (props: Props) => { const { notifications, close } = props; - return notifications.map(n => ( - - )); + ); }; \ No newline at end of file