arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00
Code Issues Releases Wiki Activity

Refactored notification utils, added icon

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-26 23:29:15 +02:00
parent d199454485
commit ae1a40bf3e
4 changed files with 55 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,9 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import Icon from 'components/Icon';
import colors from 'config/colors';
import { Notification } from 'components/Notification';
import { getIcon } from 'utils/notification';
const Wrapper = styled.div``;
@ -9,6 +11,8 @@ const Header = styled.div`
display: flex;
cursor: pointer;
background: ${colors.WHITE};
justify-content: flex-start;
align-items: center;
padding: 5px 10px;
border-bottom: 1px solid ${colors.BACKGROUND};
`;
@ -46,12 +50,19 @@ class Group extends Component {
const { type, groupNotifications, color } = this.props;
return (
<Wrapper>
{groupNotifications.length > 1 && (
<Header onClick={this.toggle}>
<Icon
color={color}
size={30}
icon={getIcon(type)}
/>
<Title
color={color}
>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
</Title>
</Header>
)}
<Body>
{groupNotifications
.slice(0, this.state.visibleCount)

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

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import colors from 'config/colors';
import { getColor } from 'utils/notification';
import { PRIORITY } from 'constants/notifications';
import Group from './components/Group';
@ -22,34 +22,12 @@ class NotificationsGroup extends Component {
];
}
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 = notifications => notifications.reduce((acc, obj) => {
const key = obj.type;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
@ -57,10 +35,9 @@ class NotificationsGroup extends Component {
return notifications;
}
render() {
const { notifications } = this;
const notificationGroups = this.groupNotifications(notifications, 'type');
const notificationGroups = this.groupNotifications(notifications);
const sortedNotifications = this.sortByPriority(notificationGroups);
return (
@ -68,7 +45,7 @@ class NotificationsGroup extends Component {
{Object.keys(sortedNotifications).map(group => (
<Group
groupNotifications={notificationGroups[group]}
color={this.getColor(group)}
color={getColor(group)}
type={group}
/>
))}

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

@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styled, { css } from 'styled-components';
import colors from 'config/colors';
import { getColor, getIcon } from 'utils/notification';
import Icon from 'components/Icon';
import icons from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@ -92,27 +93,6 @@ const ActionContent = styled.div`
export const Notification = (props: NProps): React$Element<string> => {
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
const getIconColor = (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;
};
return (
<Wrapper type={props.type}>
@ -120,7 +100,7 @@ export const Notification = (props: NProps): React$Element<string> => {
{props.cancelable && (
<CloseClick onClick={() => close()}>
<Icon
color={getIconColor(props.type)}
color={getColor(props.type)}
icon={icons.CLOSE}
size={20}
/>
@ -129,8 +109,8 @@ export const Notification = (props: NProps): React$Element<string> => {
<Body>
<MessageContent>
<StyledIcon
color={getIconColor(props.type)}
icon={icons[props.type.toUpperCase()]}
color={getColor(props.type)}
icon={getIcon(props.type)}
/>
<Texts>
<Title>{ props.title }</Title>

31
src/utils/notification.js Normal file
View File

@ -0,0 +1,31 @@
import colors from 'config/colors';
import icons from 'config/icons';
const 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;
};
const getIcon = type => icons[type.toUpperCase()];
export {
getColor,
getIcon,
};