All files / src/Notify NotifyPanel.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from 'preact';
import PropTypes from 'prop-types';
import Icon from './../Icon';
import colors from './../theme';
import { StyledNotify } from './styles';
 
/**
 * Notification panel
 */
class NotifyPanel extends Component {
    static propTypes = {
        /**
         * Custom styles
         */
        style: PropTypes.object,
 
        /**
         * Title
         */
        title: PropTypes.string,
 
        /**
         * Delay in seconds for the notification go away. Set this to 0 to not auto-dismiss the notification.
         */
        autoDismiss: PropTypes.integer,
 
        /**
         * Message
         */
        message: PropTypes.string,
 
        /**
         * Level of the notification
         */
        type: PropTypes.oneOf(['success', 'warning', 'error', 'info']),
 
        /**
         * Callback function on click of notification
         */
        onClick: PropTypes.func,
 
        /**
         * Icon name from font awesome - default is bell-o
         */
        iconName: PropTypes.string,
 
        /**
         * Size of the icon
         */
        iconSize: PropTypes.oneOf([
            'xsmall',
            'small',
            'medium',
            'large',
            'xlarge',
        ]),
 
        /**
         * Icon color
         */
        iconColor: PropTypes.string,
    };
 
    static defaultProps = {
        type: 'info',
    };
 
    static contextTypes = {
        theme: PropTypes.object,
    };
 
    get iconColor() {
        const colorsList = {
            info: colors.grayColorDark,
            success: colors.controlSuccessColor,
            error: colors.controlErrorColor,
            warning: colors.controlWarningColor,
        };
        return colorsList[this.props.type];
    }
 
    close = () => {
        if (typeof this.props.close === 'function') {
            this.props.close();
        }
    };
 
    onClick = () => {
        if (typeof this.props.onClick === 'function') {
            this.props.onClick();
        }
    };
 
    render() {
        const {
            style,
            className,
            title = '',
            type = 'info',
            message,
            guid,
            iconColor = this.iconColor,
            iconName = 'bell-o',
            iconSize = 'small',
        } = this.props;
        const { theme } = this.context;
 
        return (
            <StyledNotify
                type={type}
                style={style}
                className={className}
                id={guid}
                onClick={this.onClick}
                theme={theme}
            >
                <div className="notification-icon">
                    <Icon name={iconName} size={iconSize} color={iconColor} />
                </div>
                <div className="notification-body">
                    <div className="notification-close" onClick={this.close} />
                    <h1 className="notification-title">{title}</h1>
                    <p className="notification-message">{message}</p>
                </div>
            </StyledNotify>
        );
    }
}
 
export default NotifyPanel;