|
|
|
|
@ -1,8 +1,4 @@
|
|
|
|
|
/* @flow */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { H2 } from 'components/Heading';
|
|
|
|
|
import { bindActionCreators } from 'redux';
|
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
import styled, { css } from 'styled-components';
|
|
|
|
|
@ -10,33 +6,17 @@ import colors from 'config/colors';
|
|
|
|
|
import Button from 'components/Button';
|
|
|
|
|
import Icon from 'components/Icon';
|
|
|
|
|
import icons from 'config/icons';
|
|
|
|
|
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
|
|
|
|
|
|
|
|
|
import * as NOTIFICATION from 'actions/constants/notification';
|
|
|
|
|
import * as NotificationActions from 'actions/NotificationActions';
|
|
|
|
|
import type { Action, State, Dispatch } from 'flowtype';
|
|
|
|
|
import Loader from 'components/Loader';
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
notifications: $ElementType<State, 'notifications'>,
|
|
|
|
|
close: (notif?: any) => Action
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type NProps = {
|
|
|
|
|
key?: number;
|
|
|
|
|
className: string;
|
|
|
|
|
cancelable?: boolean;
|
|
|
|
|
title: string;
|
|
|
|
|
message?: string;
|
|
|
|
|
actions?: Array<any>;
|
|
|
|
|
close?: typeof NotificationActions.close,
|
|
|
|
|
loading?: boolean
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Wrapper = styled.div`
|
|
|
|
|
position: relative;
|
|
|
|
|
color: ${colors.TEXT_PRIMARY};
|
|
|
|
|
background: ${colors.TEXT_SECONDARY};
|
|
|
|
|
padding: 24px 48px 24px 80px;
|
|
|
|
|
padding: 24px 48px 24px 24px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
@ -66,14 +46,33 @@ const Wrapper = styled.div`
|
|
|
|
|
|
|
|
|
|
const Body = styled.div`
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ActionContent = styled.div`
|
|
|
|
|
const Title = styled.div`
|
|
|
|
|
font-weight: ${FONT_WEIGHT.BIGGER};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ActionContent = styled.div``;
|
|
|
|
|
const CloseClick = styled.div``;
|
|
|
|
|
|
|
|
|
|
const Message = styled.div`
|
|
|
|
|
padding: 5px 0 0 0;
|
|
|
|
|
font-size: ${FONT_SIZE.SMALLER};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const IconContent = styled.div`
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const StyledIcon = styled(Icon)`
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -6px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const MessageContent = styled.div``;
|
|
|
|
|
|
|
|
|
|
export const Notification = (props: NProps): React$Element<string> => {
|
|
|
|
|
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
|
|
|
|
|
|
|
|
|
|
@ -101,31 +100,38 @@ export const Notification = (props: NProps): React$Element<string> => {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Wrapper type={props.className}>
|
|
|
|
|
{ props.cancelable && (
|
|
|
|
|
{props.loading && <Loader size={50} /> }
|
|
|
|
|
{props.cancelable && (
|
|
|
|
|
<CloseClick onClick={() => close()}>
|
|
|
|
|
<Icon icon={icons.CLOSE} size={25} />
|
|
|
|
|
</CloseClick>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
)}
|
|
|
|
|
<Body>
|
|
|
|
|
<H2>{ props.title }</H2>
|
|
|
|
|
{ props.message && <p dangerouslySetInnerHTML={{ __html: props.message }} /> }
|
|
|
|
|
<IconContent>
|
|
|
|
|
<StyledIcon icon={icons[props.className.toUpperCase()]} />
|
|
|
|
|
</IconContent>
|
|
|
|
|
<MessageContent>
|
|
|
|
|
<Title>{ props.title }</Title>
|
|
|
|
|
{ props.message && (
|
|
|
|
|
<Message>
|
|
|
|
|
<p dangerouslySetInnerHTML={{ __html: props.message }} />
|
|
|
|
|
</Message>
|
|
|
|
|
) }
|
|
|
|
|
</MessageContent>
|
|
|
|
|
</Body>
|
|
|
|
|
{ props.actions && props.actions.length > 0 && (
|
|
|
|
|
{props.actions && props.actions.length > 0 && (
|
|
|
|
|
<ActionContent>
|
|
|
|
|
{props.actions
|
|
|
|
|
.map(action => (
|
|
|
|
|
<Button
|
|
|
|
|
key={action.label}
|
|
|
|
|
color={getButtonColor(props.className)}
|
|
|
|
|
text={action.label}
|
|
|
|
|
onClick={() => { close(); action.callback(); }}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</ActionContent>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
{ props.loading && <Loader size={50} /> }
|
|
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
</Wrapper>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Vladimir Volek
6 years ago