mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-29 10:28:08 +00:00
Add loading state for notification button
This commit is contained in:
Vladimir Volek
parent
059a3b9dd9
commit
cc8a21947f
@ -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) => (
|
||||
<Wrapper
|
||||
icon={icon}
|
||||
onClick={onClick}
|
||||
type={type}
|
||||
>
|
||||
{isLoading && (
|
||||
<LoaderContent type={type}>
|
||||
<Loader size={30} />
|
||||
</LoaderContent>
|
||||
)}
|
||||
{icon && (
|
||||
<IconWrapper>
|
||||
<Icon
|
||||
@ -102,6 +88,7 @@ NotificationButton.propTypes = {
|
||||
color: PropTypes.string,
|
||||
size: PropTypes.number,
|
||||
}),
|
||||
isLoading: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
/* @flow */
|
||||
|
||||
import * as React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
import { getColor, getIcon } from 'utils/notification';
|
||||
import styled from 'styled-components';
|
||||
import { getPrimaryColor, getSecondaryColor, getIcon } from 'utils/notification';
|
||||
import Icon from 'components/Icon';
|
||||
import icons from 'config/icons';
|
||||
import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
|
||||
@ -28,34 +26,14 @@ type Props = {
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
position: relative;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
background: ${colors.TEXT_SECONDARY};
|
||||
padding: 24px 48px 9px 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
${props => 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<string> => {
|
||||
{props.cancelable && (
|
||||
<CloseClick onClick={() => close()}>
|
||||
<Icon
|
||||
color={getColor(props.type)}
|
||||
color={getPrimaryColor(props.type)}
|
||||
icon={icons.CLOSE}
|
||||
size={20}
|
||||
/>
|
||||
@ -128,7 +106,7 @@ const Notification = (props: Props): React$Element<string> => {
|
||||
<Body>
|
||||
<IconWrapper>
|
||||
<StyledIcon
|
||||
color={getColor(props.type)}
|
||||
color={getPrimaryColor(props.type)}
|
||||
icon={getIcon(props.type)}
|
||||
/>
|
||||
</IconWrapper>
|
||||
|
||||
@ -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 (
|
||||
<Wrapper>
|
||||
{groupNotifications.length > 1 && (
|
||||
|
||||
@ -54,7 +54,6 @@ class NotificationsGroup extends PureComponent {
|
||||
// key: 5,
|
||||
// title: 'this is a title of warning notification as',
|
||||
// type: 'success',
|
||||
// message: <Link href="link" isGreen>See transaction detail</Link>,
|
||||
// },
|
||||
// {
|
||||
// key: 6,
|
||||
|
||||
@ -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,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user