arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00
Code Issues Releases Wiki Activity

Basic component rendering

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-26 22:49:35 +02:00
parent 00d0fc1ccb
commit 8af4a487da
5 changed files with 86 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Notification/NotificationGroups/components/Group/index.js
View File

@ -1,8 +1,24 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import colors from 'config/colors';
import { Notification } from 'components/Notification';
const Wrapper = styled.div``;
const Header = styled.div`
display: flex;
background: ${colors.WHITE};
padding: 5px 10px;
border-bottom: 1px solid ${colors.BACKGROUND};
`;
const Body = styled.div`
`;
const Title = styled.div`
color: ${props => props.color};
`;
class Group extends Component {
hide() {
@ -13,9 +29,22 @@ class Group extends Component {
}
render() {
const { type, groupNotifications, color } = this.props;
return (
<Wrapper>
Group
<Header>
<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}
/>
))}
</Body>
</Wrapper>
);
}

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

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import colors from 'config/colors';
import { PRIORITY } from 'constants/notifications';
import Group from './components/Group';
const Wrapper = styled.div``;
@ -8,44 +10,54 @@ const Wrapper = styled.div``;
class NotificationsGroup extends Component {
constructor() {
super();
this.notificationPriority = {
error: 0,
warning: 1,
info: 2,
success: 3,
};
this.notifications = [
{ type: 'warning' },
{ type: 'error' },
{ type: 'info' },
{ type: 'error' },
{ type: 'warning' },
{ type: 'success' },
{ type: 'error' },
{ type: 'error' },
{ 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' },
];
}
getGroupNotifications(notifications, type) {
return notifications.filter(item => item.type === type);
}
getColor = (type) => {
let color;
switch (type) {
case 'info':
color = colors.INFO_PRIMARY;
break;
case 'error':
color = colors.ERROR_PRIMARY;
break;
case 'warning':
color = colors.WARNING_PRIMARY;
break;
case 'success':
color = colors.SUCCESS_PRIMARY;
break;
default:
color = null;
}
return color;
};
groupNotifications = (items, key) => items.reduce(
(result, item) => ({
...result,
[item[key]]: [...(result[item[key]] || []), item],
}),
{},
);
groupNotifications = notifications => notifications.reduce((acc, obj) => {
const key = obj.type;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
sortByPriority(notifications) {
const sorted = Object.keys(notifications).sort((a, b) => {
// sort
});
return sorted;
return notifications;
}
render() {
const { notifications } = this;
const notificationGroups = this.groupNotifications(notifications, 'type');
@ -53,10 +65,11 @@ class NotificationsGroup extends Component {
return (
<Wrapper>
{sortedNotifications.map(group => (
{Object.keys(sortedNotifications).map(group => (
<Group
notifications={this.getGroupNotifications(group.type, sortedNotifications)}
type={group.type}
groupNotifications={notificationGroups[group]}
color={this.getColor(group)}
type={group}
/>
))}
</Wrapper>

2
src/components/Notification/index.js
View File

@ -1,4 +1,4 @@
import React } from 'react';
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styled, { css } from 'styled-components';

8
src/constants/notifications.js Normal file
View File

@ -0,0 +1,8 @@
export default {
PRIORITY: {
error: 0,
warning: 1,
info: 2,
success: 3,
},
};

2
src/views/Landing/index.js
View File

@ -4,6 +4,7 @@ import CaseImage from 'images/case.png';
import styled from 'styled-components';
import Header from 'components/Header';
import Footer from 'components/Footer';
import GroupNotifications from 'components/Notification/NotificationGroups';
import Log from 'components/Log';
import Link from 'components/Link';
import Loader from 'components/Loader';
@ -108,6 +109,7 @@ export default (props: Props) => {
{(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
<div>
<TitleWrapper>
<GroupNotifications />
<H2 claim>The private bank in your hands.</H2>
<P>TREZOR Wallet is an easy-to-use interface for your TREZOR.</P>
<P>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>