Snackbar

import PropTypes from 'prop-types';
import React from 'react';
import { CSSTransitionGroup } from 'react-transition-group';

import SnackMessage from './SnackMessage';

/**
 * Opens a small window to notify a user of an event.
 */
class Snackbar extends React.Component {
    static propTypes = {
        message: PropTypes.object,
        ttl: PropTypes.number
    };

    /**
     * @type {{message: Message, ttl: number}}
     */
    static defaultProps = {
        message: {},
        ttl: 8000
    };

    /**
     * Creates a Snackbar with a given message, clearing any previous ones.
     * @param {Object} props
     * @param {Message} props.message - A message to be displayed.
     * @param {number} props.ttl - The time until a displayed message disappears after no interaction.
     */
    constructor(props) {
        super(props);
        const message = this.props.message;
        if (message) {
            message.id = new Date().getTime();
            this.state = {
                messages: [message]
            };
            this.timedRemove(message);
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.message) {
            nextProps.message.id = new Date().getTime();
            this.setState({
                messages: [nextProps.message]
            });
        }
    }

    /**
     * Removes an existing message from the Snackbar.
     * @param {Message} message
     */
    removeMessage(message) {
        this.setState({
            messages: this.state.messages
                .filter((m) => m.id != message.id)
        });
    }

    /**
     * Removes an existing message after the set TTL.
     * @param {Message} message
     */
    timedRemove(message) {
        setTimeout(this.removeMessage.bind(this, message), this.props.ttl);
    }

    render() {
        const message = this.state.messages[0];
        let callback;

        if (message) {
            this.timedRemove(message);
            callback = message.action ? () => {
                this.removeMessage(message);
                if (message.callback) message.callback();
            } : undefined;
        }

        return (
            <div className="Snackbar-container">
                <div className="Snackbar-group">
                    <CSSTransitionGroup
                        transitionName={{enter: 'enter', leave: 'leave', appear: 'enter'}}
                        transitionAppear={true}
                        transitionAppearTimeout={200}
                        transitionEnterTimeout={200}
                        transitionLeaveTimeout={200}
                    >
                        {message &&
                            <SnackMessage
                                key={message.id}
                                text={message.text}
                                action={message.action}
                                callback={callback}
                            />
                        }
                    </CSSTransitionGroup>
                </div>
            </div>
        );
    }
}

export default Snackbar;