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

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

@ -1,6 +1,6 @@
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 { getColor } from 'utils/notification';
import { PRIORITY } from 'constants/notifications'; import { PRIORITY } from 'constants/notifications';
import Group from './components/Group'; 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) => { groupNotifications = notifications => notifications.reduce((acc, obj) => {
const key = obj.type; const key = obj.type;
if (!acc[key]) { if (!acc[key]) {
acc[key] = []; acc[key] = [];
} }
acc[key].push(obj); acc[key].push(obj);
return acc; return acc;
}, {}); }, {});
@ -57,10 +35,9 @@ class NotificationsGroup extends Component {
return notifications; return notifications;
} }
render() { render() {
const { notifications } = this; const { notifications } = this;
const notificationGroups = this.groupNotifications(notifications, 'type'); const notificationGroups = this.groupNotifications(notifications);
const sortedNotifications = this.sortByPriority(notificationGroups); const sortedNotifications = this.sortByPriority(notificationGroups);
return ( return (
@ -68,7 +45,7 @@ class NotificationsGroup extends Component {
{Object.keys(sortedNotifications).map(group => ( {Object.keys(sortedNotifications).map(group => (
<Group <Group
groupNotifications={notificationGroups[group]} groupNotifications={notificationGroups[group]}
color={this.getColor(group)} color={getColor(group)}
type={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 { connect } from 'react-redux';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import { getColor, getIcon } from 'utils/notification';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import icons from 'config/icons'; import icons from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@ -92,27 +93,6 @@ const ActionContent = styled.div`
export const Notification = (props: NProps): React$Element<string> => { export const Notification = (props: NProps): React$Element<string> => {
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action 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 ( return (
<Wrapper type={props.type}> <Wrapper type={props.type}>
@ -120,7 +100,7 @@ export const Notification = (props: NProps): React$Element<string> => {
{props.cancelable && ( {props.cancelable && (
<CloseClick onClick={() => close()}> <CloseClick onClick={() => close()}>
<Icon <Icon
color={getIconColor(props.type)} color={getColor(props.type)}
icon={icons.CLOSE} icon={icons.CLOSE}
size={20} size={20}
/> />
@ -129,8 +109,8 @@ export const Notification = (props: NProps): React$Element<string> => {
<Body> <Body>
<MessageContent> <MessageContent>
<StyledIcon <StyledIcon
color={getIconColor(props.type)} color={getColor(props.type)}
icon={icons[props.type.toUpperCase()]} icon={getIcon(props.type)}
/> />
<Texts> <Texts>
<Title>{ props.title }</Title> <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,
};