arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +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 React, { Component } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors';
import { Notification } from 'components/Notification';
const Wrapper = styled.div``; 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 { class Group extends Component {
hide() { hide() {
@ -13,9 +29,22 @@ class Group extends Component {
} }
render() { render() {
const { type, groupNotifications, color } = this.props;
return ( return (
<Wrapper> <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> </Wrapper>
); );
} }

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

@ -1,6 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors';
import { PRIORITY } from 'constants/notifications';
import Group from './components/Group'; import Group from './components/Group';
const Wrapper = styled.div``; const Wrapper = styled.div``;
@ -8,44 +10,54 @@ const Wrapper = styled.div``;
class NotificationsGroup extends Component { class NotificationsGroup extends Component {
constructor() { constructor() {
super(); super();
this.notificationPriority = {
error: 0,
warning: 1,
info: 2,
success: 3,
};
this.notifications = [ this.notifications = [
{ type: 'warning' }, { type: 'warning', title: 'aaa', message: 'aaaa' },
{ type: 'error' }, { type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'info' }, { type: 'info', title: 'aaa', message: 'aaaa' },
{ type: 'error' }, { type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'warning' }, { type: 'warning', title: 'aaa', message: 'aaaa' },
{ type: 'success' }, { type: 'success', title: 'aaa', message: 'aaaa' },
{ type: 'error' }, { type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'error' }, { type: 'error', title: 'aaa', message: 'aaaa' },
]; ];
} }
getGroupNotifications(notifications, type) { getColor = (type) => {
return notifications.filter(item => item.type === 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( groupNotifications = notifications => notifications.reduce((acc, obj) => {
(result, item) => ({ const key = obj.type;
...result, if (!acc[key]) {
[item[key]]: [...(result[item[key]] || []), item], acc[key] = [];
}), }
{}, acc[key].push(obj);
);
return acc;
}, {});
sortByPriority(notifications) { sortByPriority(notifications) {
const sorted = Object.keys(notifications).sort((a, b) => { return notifications;
// sort
});
return sorted;
} }
render() { render() {
const { notifications } = this; const { notifications } = this;
const notificationGroups = this.groupNotifications(notifications, 'type'); const notificationGroups = this.groupNotifications(notifications, 'type');
@ -53,10 +65,11 @@ class NotificationsGroup extends Component {
return ( return (
<Wrapper> <Wrapper>
{sortedNotifications.map(group => ( {Object.keys(sortedNotifications).map(group => (
<Group <Group
notifications={this.getGroupNotifications(group.type, sortedNotifications)} groupNotifications={notificationGroups[group]}
type={group.type} color={this.getColor(group)}
type={group}
/> />
))} ))}
</Wrapper> </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 { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styled, { css } from 'styled-components'; 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 styled from 'styled-components';
import Header from 'components/Header'; import Header from 'components/Header';
import Footer from 'components/Footer'; import Footer from 'components/Footer';
import GroupNotifications from 'components/Notification/NotificationGroups';
import Log from 'components/Log'; import Log from 'components/Log';
import Link from 'components/Link'; import Link from 'components/Link';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
@ -108,6 +109,7 @@ export default (props: Props) => {
{(shouldShowConnectDevice || shouldShowDisconnectDevice) && ( {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
<div> <div>
<TitleWrapper> <TitleWrapper>
<GroupNotifications />
<H2 claim>The private bank in your hands.</H2> <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 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> <P>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>