From 5fbd4a329176276616400e9fefa9614418699ecb Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 26 Oct 2018 16:48:12 +0200 Subject: [PATCH] Add loading state for notification button --- .../components/NotificationButton/index.js | 71 ++++++++----------- src/components/Notification/index.js | 34 ++------- .../components/Group/index.js | 4 +- .../components/NotificationsGroups/index.js | 1 - src/utils/notification.js | 27 ++++++- 5 files changed, 62 insertions(+), 75 deletions(-) diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index bd9a4d4f..eca4d26c 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -5,6 +5,8 @@ import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; import colors from 'config/colors'; +import { getPrimaryColor, getSecondaryColor } from 'utils/notification'; +import Loader from 'components/Loader'; import { TRANSITION } from 'config/variables'; type Props = { @@ -18,56 +20,35 @@ type Props = { children: React.Node; }; +const LoaderContent = styled.div` + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + cursor: default; + background: ${props => getSecondaryColor(props.type)}; +`; + const Wrapper = styled.button` padding: 12px 58px; border-radius: 3px; background: transparent; font-size: 14px; + position: relative; font-weight: 300; cursor: pointer; - color: ${colors.WHITE}; - border: 0; + color: ${props => getPrimaryColor(props.type)}; + border: 1px solid ${props => getPrimaryColor(props.type)}; transition: ${TRANSITION.HOVER}; - ${props => props.type === 'info' && css` - border: 1px solid ${colors.INFO_PRIMARY}; - color: ${colors.INFO_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.INFO_PRIMARY}; - } - `} - - ${props => props.type === 'success' && css` - border: 1px solid ${colors.SUCCESS_PRIMARY}; - color: ${colors.SUCCESS_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.SUCCESS_PRIMARY}; - } - `} - - ${props => props.type === 'error' && css` - border: 1px solid ${colors.ERROR_PRIMARY}; - color: ${colors.ERROR_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.ERROR_PRIMARY}; - } - `} - - ${props => props.type === 'warning' && css` - border: 1px solid ${colors.WARNING_PRIMARY}; - color: ${colors.WARNING_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.WARNING_PRIMARY}; - } - `} + &:hover { + color: ${colors.WHITE}; + background: ${props => getPrimaryColor(props.type)}; + } `; const IconWrapper = styled.span` @@ -75,13 +56,18 @@ const IconWrapper = styled.span` `; const NotificationButton = ({ - type, icon, onClick, children, + type, icon, onClick, children, isLoading, }: Props) => ( + {isLoading && ( + + + + )} {icon && ( props.type === 'info' && css` - color: ${colors.INFO_PRIMARY}; - background: ${colors.INFO_SECONDARY}; - `} - - ${props => props.type === 'success' && css` - color: ${colors.SUCCESS_PRIMARY}; - background: ${colors.SUCCESS_SECONDARY}; - `} - - ${props => props.type === 'warning' && css` - color: ${colors.WARNING_PRIMARY}; - background: ${colors.WARNING_SECONDARY}; - `} - - ${props => props.type === 'error' && css` - color: ${colors.ERROR_PRIMARY}; - background: ${colors.ERROR_SECONDARY}; - `} + color: ${props => getPrimaryColor(props.type)}; + background: ${props => getSecondaryColor(props.type)}; `; const Body = styled.div` @@ -119,7 +97,7 @@ const Notification = (props: Props): React$Element => { {props.cancelable && ( close()}> @@ -128,7 +106,7 @@ const Notification = (props: Props): React$Element => { diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js index 993cd420..9a0cb07f 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js @@ -5,7 +5,7 @@ import Icon from 'components/Icon'; import ICONS from 'config/icons'; import colors from 'config/colors'; import Notification from 'components/Notification'; -import { getIcon, getColor } from 'utils/notification'; +import { getIcon, getPrimaryColor } from 'utils/notification'; const Wrapper = styled.div``; @@ -65,7 +65,7 @@ class Group extends PureComponent { render() { const { type, groupNotifications, close } = this.props; - const color = getColor(type); + const color = getPrimaryColor(type); return ( {groupNotifications.length > 1 && ( diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js index e21a8762..91af9700 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js @@ -54,7 +54,6 @@ class NotificationsGroup extends PureComponent { // key: 5, // title: 'this is a title of warning notification as', // type: 'success', - // message: See transaction detail, // }, // { // key: 6, diff --git a/src/utils/notification.js b/src/utils/notification.js index 7567a542..26e4864f 100644 --- a/src/utils/notification.js +++ b/src/utils/notification.js @@ -1,7 +1,7 @@ import colors from 'config/colors'; import icons from 'config/icons'; -const getColor = (type) => { +const getPrimaryColor = (type) => { let color; switch (type) { case 'info': @@ -23,9 +23,32 @@ const getColor = (type) => { return color; }; +const getSecondaryColor = (type) => { + let color; + switch (type) { + case 'info': + color = colors.INFO_SECONDARY; + break; + case 'error': + color = colors.ERROR_SECONDARY; + break; + case 'warning': + color = colors.WARNING_SECONDARY; + break; + case 'success': + color = colors.SUCCESS_SECONDARY; + break; + default: + color = null; + } + + return color; +}; + const getIcon = type => icons[type.toUpperCase()]; export { - getColor, + getPrimaryColor, + getSecondaryColor, getIcon, }; \ No newline at end of file