arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-22 21:12:04 +00:00
Code Issues Releases Wiki Activity

Connect actions notification with grouped notifications

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-01 16:54:15 +02:00 committed by Szymon Lesisz
parent 8be738bf2e
commit 2981c3bdd2
4 changed files with 97 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Notification/NotificationGroups/index.js
View File

@ -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 (
<Wrapper>
{Object.keys(sortedNotifications).map(group => (
<Group
groupNotifications={notificationGroups[group]}
type={group}
/>
))}
</Wrapper>
);
}
}
export default NotificationsGroup;

6
src/components/Notification/NotificationGroups/components/Group/index.js → src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js
View File

@ -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 (
<Wrapper>
@ -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}
/>
))}
</Body>
@ -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,

87
src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js Normal file
View File

@ -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 (
<Wrapper>
{Object.keys(sortedNotifications).map(group => (
<Group
groupNotifications={notificationGroups[group]}
type={group}
close={close}
/>
))}
</Wrapper>
);
}
}
NotificationsGroup.propTypes = {
notifications: PropTypes.array.isRequired,
close: PropTypes.func.isRequired,
};
export default NotificationsGroup;

15
src/components/notifications/Context/components/Action/index.js
View File

@ -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 => (
<Notification
key={n.title}
type={n.type}
title={n.title}
message={n.message}
cancelable={n.cancelable}
actions={n.actions}
return (
<NotificationsGroups
notifications={notifications}
close={close}
/>
));
);
};