Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

messages

v3.1.8arrow_drop_down
v3.1.8
v3.1.0
STATUS
Passing
DOWNLOADS
354
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 weeks ago
SIZE
9 KB
subject
Messages is used to display inline messages with various severities.
1 contributor
Use messages in your project ?
Copied
npm i @bit/primefaces.primereact.messages
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
Messages.js
93 Lines(79 sloc)
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
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { UIMessage } from './UIMessage';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

var messageIdx = 0;

export class Messages extends Component {

    static defaultProps = {
        id: null,
        className: null,
        style: null,
        onRemove: null,
        onClick: null
    }

    static propTypes = {
        id: PropTypes.string,
        className: PropTypes.string,
        style: PropTypes.object,
        onRemove: PropTypes.func,
        onClick: PropTypes.func
    };

    constructor(props) {
        super(props);
        this.state = {
            messages: []
        }

        this.onClose = this.onClose.bind(this);
    }

    show(value) {
        if (value) {
            let newMessages = [];

            if (Array.isArray(value)) {
                for (let i = 0; i < value.length; i++) {
                    value[i].id = messageIdx++;
                    newMessages = [...this.state.messages, ...value];
                }
            }
            else {
                value.id = messageIdx++;
                newMessages = this.state.messages ? [...this.state.messages, value] : [value];
            }

            this.setState({
                messages: newMessages
            });
        }
    }

    clear() {
        this.setState({
            messages: []
        })
    }

    replace(value) {
        this.setState({
            messages: [],
        }, () => this.show(value));
    }

    onClose(message) {
        let newMessages = this.state.messages.filter(msg => msg.id !== message.id);
        this.setState({
            messages: newMessages
        });

        if (this.props.onRemove) {
            this.props.onRemove(message);
        }
    }

    render() {
        return (
            <div id={this.props.id} className={this.props.className} style={this.props.style}>
                <TransitionGroup >
                    {this.state.messages.map((message, index) =>
                        <CSSTransition key={message.id} classNames="p-messages"
                            timeout={{ enter: 250, exit: 500 }}>
                            <UIMessage message={message} onClick={this.props.onClick} onClose={this.onClose} />
                        </CSSTransition>
                    )}
                </TransitionGroup>
            </div>
        );  
    }
}