2018-02-20 09:30:36 +00:00
|
|
|
import React from 'react';
|
|
|
|
|
import { bindActionCreators } from 'redux';
|
|
|
|
|
import { connect } from 'react-redux';
|
2018-08-28 14:27:59 +00:00
|
|
|
import styled, { css } from 'styled-components';
|
2018-08-28 12:33:42 +00:00
|
|
|
import colors from 'config/colors';
|
2018-08-30 08:54:20 +00:00
|
|
|
import NotificationButton from 'components/buttons/NotificationButton';
|
2018-08-28 14:27:59 +00:00
|
|
|
import Icon from 'components/Icon';
|
|
|
|
|
import icons from 'config/icons';
|
2018-08-29 10:07:47 +00:00
|
|
|
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
2018-02-20 09:30:36 +00:00
|
|
|
|
2018-08-14 12:56:47 +00:00
|
|
|
import * as NOTIFICATION from 'actions/constants/notification';
|
|
|
|
|
import * as NotificationActions from 'actions/NotificationActions';
|
2018-08-24 07:57:23 +00:00
|
|
|
import Loader from 'components/Loader';
|
2018-02-20 09:30:36 +00:00
|
|
|
|
2018-08-28 12:33:42 +00:00
|
|
|
const Wrapper = styled.div`
|
|
|
|
|
position: relative;
|
2018-08-28 14:27:59 +00:00
|
|
|
color: ${colors.TEXT_PRIMARY};
|
|
|
|
|
background: ${colors.TEXT_SECONDARY};
|
2018-08-29 10:07:47 +00:00
|
|
|
padding: 24px 48px 24px 24px;
|
2018-08-28 12:33:42 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
text-align: left;
|
2018-08-28 14:27:59 +00:00
|
|
|
|
|
|
|
|
${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};
|
|
|
|
|
`}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Body = styled.div`
|
2018-08-29 10:07:47 +00:00
|
|
|
display: flex;
|
|
|
|
|
margin-right: 40px;
|
2018-08-29 13:48:05 +00:00
|
|
|
flex: 1;
|
2018-08-28 12:33:42 +00:00
|
|
|
`;
|
|
|
|
|
|
2018-08-29 10:07:47 +00:00
|
|
|
const Title = styled.div`
|
2018-08-29 13:48:05 +00:00
|
|
|
padding-bottom: 5px;
|
2018-08-29 10:07:47 +00:00
|
|
|
font-weight: ${FONT_WEIGHT.BIGGER};
|
2018-08-28 14:27:59 +00:00
|
|
|
`;
|
|
|
|
|
|
2018-08-29 10:07:47 +00:00
|
|
|
const ActionContent = styled.div``;
|
2018-08-29 11:54:41 +00:00
|
|
|
|
|
|
|
|
const CloseClick = styled.div`
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
padding: 20px 10px 0 0;
|
|
|
|
|
`;
|
2018-08-28 14:27:59 +00:00
|
|
|
|
2018-08-29 10:07:47 +00:00
|
|
|
const Message = styled.div`
|
|
|
|
|
font-size: ${FONT_SIZE.SMALLER};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const StyledIcon = styled(Icon)`
|
|
|
|
|
position: relative;
|
2018-08-29 11:54:41 +00:00
|
|
|
top: -7px;
|
2018-08-29 10:07:47 +00:00
|
|
|
`;
|
|
|
|
|
|
2018-08-29 13:48:05 +00:00
|
|
|
const MessageContent = styled.div`
|
|
|
|
|
height: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Texts = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const AdditionalContent = styled.div``;
|
2018-08-29 10:07:47 +00:00
|
|
|
|
2018-07-30 10:52:13 +00:00
|
|
|
export const Notification = (props: NProps): React$Element<string> => {
|
2018-04-16 21:19:50 +00:00
|
|
|
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
|
2018-08-29 09:33:17 +00:00
|
|
|
|
2018-08-29 11:07:37 +00:00
|
|
|
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;
|
|
|
|
|
};
|
|
|
|
|
|
2018-02-20 09:30:36 +00:00
|
|
|
return (
|
2018-08-28 14:27:59 +00:00
|
|
|
<Wrapper type={props.className}>
|
2018-08-29 10:07:47 +00:00
|
|
|
{props.loading && <Loader size={50} /> }
|
|
|
|
|
{props.cancelable && (
|
2018-08-28 14:27:59 +00:00
|
|
|
<CloseClick onClick={() => close()}>
|
2018-08-29 11:54:41 +00:00
|
|
|
<Icon
|
|
|
|
|
color={getIconColor(props.className)}
|
|
|
|
|
icon={icons.CLOSE}
|
|
|
|
|
size={20}
|
|
|
|
|
/>
|
2018-08-28 14:27:59 +00:00
|
|
|
</CloseClick>
|
2018-08-29 10:07:47 +00:00
|
|
|
)}
|
2018-08-28 14:27:59 +00:00
|
|
|
<Body>
|
2018-08-29 13:48:05 +00:00
|
|
|
<MessageContent>
|
2018-08-29 11:07:37 +00:00
|
|
|
<StyledIcon
|
|
|
|
|
color={getIconColor(props.className)}
|
|
|
|
|
icon={icons[props.className.toUpperCase()]}
|
|
|
|
|
/>
|
2018-08-29 13:48:05 +00:00
|
|
|
<Texts>
|
|
|
|
|
<Title>{ props.title }</Title>
|
|
|
|
|
{ props.message && (
|
|
|
|
|
<Message>
|
|
|
|
|
<p dangerouslySetInnerHTML={{ __html: props.message }} />
|
|
|
|
|
</Message>
|
|
|
|
|
) }
|
|
|
|
|
</Texts>
|
2018-08-29 10:07:47 +00:00
|
|
|
</MessageContent>
|
2018-08-28 14:27:59 +00:00
|
|
|
</Body>
|
2018-08-29 13:48:05 +00:00
|
|
|
<AdditionalContent>
|
|
|
|
|
{props.actions && props.actions.length > 0 && (
|
|
|
|
|
<ActionContent>
|
|
|
|
|
{props.actions.map(action => (
|
2018-08-29 11:54:41 +00:00
|
|
|
<NotificationButton
|
2018-08-29 10:07:47 +00:00
|
|
|
key={action.label}
|
2018-08-29 11:54:41 +00:00
|
|
|
type={props.className}
|
2018-08-28 14:27:59 +00:00
|
|
|
text={action.label}
|
|
|
|
|
onClick={() => { close(); action.callback(); }}
|
2018-08-30 12:33:21 +00:00
|
|
|
>{action.label}
|
|
|
|
|
</NotificationButton>
|
2018-08-28 14:27:59 +00:00
|
|
|
))}
|
2018-08-29 13:48:05 +00:00
|
|
|
</ActionContent>
|
|
|
|
|
)}
|
|
|
|
|
</AdditionalContent>
|
2018-08-28 12:33:42 +00:00
|
|
|
</Wrapper>
|
2018-07-30 10:52:13 +00:00
|
|
|
);
|
|
|
|
|
};
|
2018-02-20 09:30:36 +00:00
|
|
|
|
2018-08-29 11:07:37 +00:00
|
|
|
export const NotificationGroup = (props) => {
|
2018-02-20 09:30:36 +00:00
|
|
|
const { notifications, close } = props;
|
2018-07-30 10:52:13 +00:00
|
|
|
return notifications.map((n, i) => (
|
|
|
|
|
<Notification
|
|
|
|
|
key={i}
|
|
|
|
|
className={n.type}
|
|
|
|
|
title={n.title}
|
|
|
|
|
message={n.message}
|
|
|
|
|
cancelable={n.cancelable}
|
|
|
|
|
actions={n.actions}
|
|
|
|
|
close={close}
|
|
|
|
|
/>
|
|
|
|
|
));
|
|
|
|
|
};
|
2018-02-20 09:30:36 +00:00
|
|
|
|
2018-07-30 10:52:13 +00:00
|
|
|
export default connect(
|
2018-08-29 11:07:37 +00:00
|
|
|
state => ({
|
2018-07-30 10:52:13 +00:00
|
|
|
notifications: state.notifications,
|
|
|
|
|
}),
|
2018-08-29 11:07:37 +00:00
|
|
|
dispatch => ({
|
2018-07-30 10:52:13 +00:00
|
|
|
close: bindActionCreators(NotificationActions.close, dispatch),
|
|
|
|
|
}),
|
2018-02-20 09:30:36 +00:00
|
|
|
)(NotificationGroup);
|
