From ae1a40bf3ef3eeb13f41d4397eabd8f1bfd26a28 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 26 Sep 2018 23:29:15 +0200 Subject: [PATCH] Refactored notification utils, added icon --- .../components/Group/index.js | 23 ++++++++++---- .../Notification/NotificationGroups/index.js | 29 ++--------------- src/components/Notification/index.js | 28 +++-------------- src/utils/notification.js | 31 +++++++++++++++++++ 4 files changed, 55 insertions(+), 56 deletions(-) create mode 100644 src/utils/notification.js diff --git a/src/components/Notification/NotificationGroups/components/Group/index.js b/src/components/Notification/NotificationGroups/components/Group/index.js index e0d96e5a..ea3f5934 100644 --- a/src/components/Notification/NotificationGroups/components/Group/index.js +++ b/src/components/Notification/NotificationGroups/components/Group/index.js @@ -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 ( -
- {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} - -
+ {groupNotifications.length > 1 && ( +
+ + {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} + +
+ )} {groupNotifications .slice(0, this.state.visibleCount) diff --git a/src/components/Notification/NotificationGroups/index.js b/src/components/Notification/NotificationGroups/index.js index ea3cf135..bc684b30 100644 --- a/src/components/Notification/NotificationGroups/index.js +++ b/src/components/Notification/NotificationGroups/index.js @@ -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 => ( ))} diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 6654a152..7c646164 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -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 => { 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 ( @@ -120,7 +100,7 @@ export const Notification = (props: NProps): React$Element => { {props.cancelable && ( close()}> @@ -129,8 +109,8 @@ export const Notification = (props: NProps): React$Element => { { props.title } diff --git a/src/utils/notification.js b/src/utils/notification.js new file mode 100644 index 00000000..7567a542 --- /dev/null +++ b/src/utils/notification.js @@ -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, +}; \ No newline at end of file