trezor-wallet/src/components/Notification/index.js

/* @flow */

import React from 'react';
import media from 'styled-media-query';
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';

import * as NotificationActions from 'actions/NotificationActions';
import Loader from 'components/Loader';
import type { Action, State } from 'flowtype';
import NotificationButton from './components/NotificationButton';

type Props = {
    key?: number,
    notifications: $ElementType<State, 'notifications'>,
    close: (notif?: any) => Action,
};

type NProps = {
    type: string,
    cancelable?: boolean;
    title: string;
    message?: string;
    actions?: Array<any>;
    close?: typeof NotificationActions.close,
    loading?: boolean
};

const Wrapper = styled.div`
    width: 100%;
    position: relative;
    color: ${colors.TEXT_PRIMARY};
    background: ${colors.TEXT_SECONDARY};
    padding: 24px 48px 24px 24px;
    display: flex;
    min-height: 90px;
    flex-direction: row;
    text-align: left;

    ${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};
    `}

    ${media.lessThan('610px')`
        flex-direction: column;
    `}
`;

const Body = styled.div`
    display: flex;
    width: 60%;

    ${media.lessThan('610px')`
        width: 100%;
    `}
`;

const Title = styled.div`
    padding-bottom: 5px;
    font-weight: ${FONT_WEIGHT.BIGGER};
`;

const CloseClick = styled.div`
    position: absolute;
    right: 0;
    top: 0;
    padding: 20px 10px 0 0;
`;

const Message = styled.div`
    font-size: ${FONT_SIZE.SMALLER};
`;

const StyledIcon = styled(Icon)`
    position: relative;
    top: -7px;
    min-width: 20px;
`;

const IconWrapper = styled.div`
    min-width: 20px;
`;

const Texts = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1;
`;

const AdditionalContent = styled.div`
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex: 1;
`;

const ActionContent = styled.div`
    display: flex;
    justify-content: right;
    align-items: flex-end;

    ${media.lessThan('610px')`
        width: 100%;
        padding: 10px 0 0 30px;
        align-items: flex-start;
    `}
`;

export const Notification = (props: NProps): React$Element<string> => {
    const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action


    return (
        <Wrapper type={props.type}>
            {props.loading && <Loader size={50} /> }
            {props.cancelable && (
                <CloseClick onClick={() => close()}>
                    <Icon
                        color={getColor(props.type)}
                        icon={icons.CLOSE}
                        size={20}
                    />
                </CloseClick>
            )}
            <Body>
                <IconWrapper>
                    <StyledIcon
                        color={getColor(props.type)}
                        icon={getIcon(props.type)}
                    />
                </IconWrapper>
                <Texts>
                    <Title>{ props.title }</Title>
                    { props.message && (
                        <Message>
                            <p dangerouslySetInnerHTML={{ __html: props.message }} />
                        </Message>
                    ) }
                </Texts>
            </Body>
            <AdditionalContent>
                {props.actions && props.actions.length > 0 && (
                    <ActionContent>
                        {props.actions.map(action => (
                            <NotificationButton
                                key={action.label}
                                type={props.type}
                                text={action.label}
                                onClick={() => { close(); action.callback(); }}
                            >{action.label}
                            </NotificationButton>
                        ))}
                    </ActionContent>
                )}
            </AdditionalContent>
        </Wrapper>
    );
};

export const NotificationGroup = (props: Props) => {
    const { notifications, close } = props;
    return notifications.map(n => (
        <Notification
            key={n.title}
            type={n.type}
            title={n.title}
            message={n.message}
            cancelable={n.cancelable}
            actions={n.actions}
            close={close}
        />
    ));
};

export default connect(
    state => ({
        notifications: state.notifications,
    }),
    dispatch => ({
        close: bindActionCreators(NotificationActions.close, dispatch),
    }),
)(NotificationGroup);
Add prop types & flow 2018-09-27 07:13:29 +00:00			`/* @flow */`

Basic component rendering 2018-09-26 20:49:35 +00:00			`import React from 'react';`
Better style for notifications 2018-10-01 13:54:35 +00:00			`import media from 'styled-media-query';`
bordel 2 2018-02-20 09:30:36 +00:00			`import { bindActionCreators } from 'redux';`
			`import { connect } from 'react-redux';`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`import styled, { css } from 'styled-components';`
Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			`import colors from 'config/colors';`
Refactored notification utils, added icon 2018-09-26 21:29:15 +00:00			`import { getColor, getIcon } from 'utils/notification';`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`import Icon from 'components/Icon';`
			`import icons from 'config/icons';`
Styled notification content 2018-08-29 10:07:47 +00:00			`import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';`
bordel 2 2018-02-20 09:30:36 +00:00
Make better imports 2018-08-14 12:56:47 +00:00			`import * as NotificationActions from 'actions/NotificationActions';`
Refactorize "Loader" component - Change folder name from "LoaderCircle" to "Loader" 2018-08-24 07:57:23 +00:00			`import Loader from 'components/Loader';`
Add prop types & flow 2018-09-27 07:13:29 +00:00			`import type { Action, State } from 'flowtype';`
Move "NotificationButton" into Notification's components folder 2018-09-04 09:30:36 +00:00			`import NotificationButton from './components/NotificationButton';`
bordel 2 2018-02-20 09:30:36 +00:00
Add prop types & flow 2018-09-27 07:13:29 +00:00			`type Props = {`
			`key?: number,`
			`notifications: $ElementType<State, 'notifications'>,`
			`close: (notif?: any) => Action,`
			`};`

			`type NProps = {`
			`type: string,`
			`cancelable?: boolean;`
			`title: string;`
			`message?: string;`
			`actions?: Array<any>;`
			`close?: typeof NotificationActions.close,`
			`loading?: boolean`
			`};`

Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			const Wrapper = styled.div`
Fixed width of notification 2018-10-09 13:02:08 +00:00			`width: 100%;`
Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			`position: relative;`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`color: ${colors.TEXT_PRIMARY};`
			`background: ${colors.TEXT_SECONDARY};`
Styled notification content 2018-08-29 10:07:47 +00:00			`padding: 24px 48px 24px 24px;`
Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			`display: flex;`
Fixed notification style without button 2018-10-01 13:27:05 +00:00			`min-height: 90px;`
Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			`flex-direction: row;`
			`text-align: left;`
Refactored notification buttons 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};`
			`}
Better style for notifications 2018-10-01 13:54:35 +00:00
			${media.lessThan('610px')`
			`flex-direction: column;`
			`}
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`;

			const Body = styled.div`
Styled notification content 2018-08-29 10:07:47 +00:00			`display: flex;`
Better style for notifications 2018-10-01 13:54:35 +00:00			`width: 60%;`

			${media.lessThan('610px')`
			`width: 100%;`
			`}
Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			`;

Styled notification content 2018-08-29 10:07:47 +00:00			const Title = styled.div`
Finalized notifiction refactor 2018-08-29 13:48:05 +00:00			`padding-bottom: 5px;`
Styled notification content 2018-08-29 10:07:47 +00:00			`font-weight: ${FONT_WEIGHT.BIGGER};`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`;

Separted button and notfication button 2018-08-29 11:54:41 +00:00			const CloseClick = styled.div`
			`position: absolute;`
			`right: 0;`
			`top: 0;`
			`padding: 20px 10px 0 0;`
			`;
Refactored notification buttons 2018-08-28 14:27:59 +00:00
Styled notification content 2018-08-29 10:07:47 +00:00			const Message = styled.div`
			`font-size: ${FONT_SIZE.SMALLER};`
			`;

			const StyledIcon = styled(Icon)`
			`position: relative;`
Separted button and notfication button 2018-08-29 11:54:41 +00:00			`top: -7px;`
Better style for notifications 2018-10-01 13:54:35 +00:00			`min-width: 20px;`
Styled notification content 2018-08-29 10:07:47 +00:00			`;

Better style for notifications 2018-10-01 13:54:35 +00:00			const IconWrapper = styled.div`
			`min-width: 20px;`
Finalized notifiction refactor 2018-08-29 13:48:05 +00:00			`;

			const Texts = styled.div`
			`display: flex;`
			`flex-direction: column;`
Better style for notifications 2018-10-01 13:54:35 +00:00			`flex: 1;`
Finalized notifiction refactor 2018-08-29 13:48:05 +00:00			`;

Adjust notification styles 2018-09-05 14:36:48 +00:00			const AdditionalContent = styled.div`
			`display: flex;`
			`justify-content: flex-end;`
			`align-items: flex-end;`
Better style for notifications 2018-10-01 13:54:35 +00:00			`flex: 1;`
Adjust notification styles 2018-09-05 14:36:48 +00:00			`;

			const ActionContent = styled.div`
Better style for notifications 2018-10-01 13:54:35 +00:00			`display: flex;`
Adjust notification styles 2018-09-05 14:36:48 +00:00			`justify-content: right;`
			`align-items: flex-end;`
Better style for notifications 2018-10-01 13:54:35 +00:00
			${media.lessThan('610px')`
			`width: 100%;`
			`padding: 10px 0 0 30px;`
			`align-items: flex-start;`
			`}
Adjust notification styles 2018-09-05 14:36:48 +00:00			`;
Styled notification content 2018-08-29 10:07:47 +00:00
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`export const Notification = (props: NProps): React$Element<string> => {`
Flowtype everywhere! 2018-04-16 21:19:50 +00:00			`const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action`
Refactored notifications buttons 2018-08-29 09:33:17 +00:00
Finalized notification icon styles 2018-08-29 11:07:37 +00:00
bordel 2 2018-02-20 09:30:36 +00:00			`return (`
Use "type" instead of "className" in Notification component 2018-09-05 09:48:01 +00:00			`<Wrapper type={props.type}>`
Styled notification content 2018-08-29 10:07:47 +00:00			`{props.loading && <Loader size={50} /> }`
			`{props.cancelable && (`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`<CloseClick onClick={() => close()}>`
Separted button and notfication button 2018-08-29 11:54:41 +00:00			`<Icon`
Refactored notification utils, added icon 2018-09-26 21:29:15 +00:00			`color={getColor(props.type)}`
Separted button and notfication button 2018-08-29 11:54:41 +00:00			`icon={icons.CLOSE}`
			`size={20}`
			`/>`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`</CloseClick>`
Styled notification content 2018-08-29 10:07:47 +00:00			`)}`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`<Body>`
Better style for notifications 2018-10-01 13:54:35 +00:00			`<IconWrapper>`
Finalized notification icon styles 2018-08-29 11:07:37 +00:00			`<StyledIcon`
Refactored notification utils, added icon 2018-09-26 21:29:15 +00:00			`color={getColor(props.type)}`
			`icon={getIcon(props.type)}`
Finalized notification icon styles 2018-08-29 11:07:37 +00:00			`/>`
Better style for notifications 2018-10-01 13:54:35 +00:00			`</IconWrapper>`
			`<Texts>`
			`<Title>{ props.title }</Title>`
			`{ props.message && (`
			`<Message>`
			`<p dangerouslySetInnerHTML={{ __html: props.message }} />`
			`</Message>`
			`) }`
			`</Texts>`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`</Body>`
Finalized notifiction refactor 2018-08-29 13:48:05 +00:00			`<AdditionalContent>`
			`{props.actions && props.actions.length > 0 && (`
			`<ActionContent>`
			`{props.actions.map(action => (`
Separted button and notfication button 2018-08-29 11:54:41 +00:00			`<NotificationButton`
Styled notification content 2018-08-29 10:07:47 +00:00			`key={action.label}`
Use "type" instead of "className" in Notification component 2018-09-05 09:48:01 +00:00			`type={props.type}`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`text={action.label}`
			`onClick={() => { close(); action.callback(); }}`
Make notification button prop same as Button 2018-08-30 12:33:21 +00:00			`>{action.label}`
			`</NotificationButton>`
Refactored notification buttons 2018-08-28 14:27:59 +00:00			`))}`
Finalized notifiction refactor 2018-08-29 13:48:05 +00:00			`</ActionContent>`
			`)}`
			`</AdditionalContent>`
Notification wrapper added, indent 2018-08-28 12:33:42 +00:00			`</Wrapper>`
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`);`
			`};`
bordel 2 2018-02-20 09:30:36 +00:00
Add prop types & flow 2018-09-27 07:13:29 +00:00			`export const NotificationGroup = (props: Props) => {`
bordel 2 2018-02-20 09:30:36 +00:00			`const { notifications, close } = props;`
Fix some eslint errors 2018-09-06 15:04:28 +00:00			`return notifications.map(n => (`
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`<Notification`
Fix some eslint errors 2018-09-06 15:04:28 +00:00			`key={n.title}`
Use "type" instead of "className" in Notification component 2018-09-05 09:48:01 +00:00			`type={n.type}`
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`title={n.title}`
			`message={n.message}`
			`cancelable={n.cancelable}`
			`actions={n.actions}`
			`close={close}`
			`/>`
			`));`
			`};`
bordel 2 2018-02-20 09:30:36 +00:00
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`export default connect(`
Finalized notification icon styles 2018-08-29 11:07:37 +00:00			`state => ({`
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`notifications: state.notifications,`
			`}),`
Finalized notification icon styles 2018-08-29 11:07:37 +00:00			`dispatch => ({`
Fixed some eslint problems 2018-07-30 10:52:13 +00:00			`close: bindActionCreators(NotificationActions.close, dispatch),`
			`}),`
Add prop types & flow 2018-09-27 07:13:29 +00:00			`)(NotificationGroup);`