mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Basic component rendering
This commit is contained in:
Vladimir Volek
parent
00d0fc1ccb
commit
8af4a487da
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
8
src/constants/notifications.js
Normal file
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
PRIORITY: {
|
||||
error: 0,
|
||||
warning: 1,
|
||||
info: 2,
|
||||
success: 3,
|
||||
},
|
||||
};
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user