piano/js/components/Error.js

/*jshint browser:true */
/*globals React, App */

(function () {
    'use strict';

    /**
     * Modal for displaying Error objects
     *
     * @prop {title: string}    Error title, category or extra data
     * @prop {error: Error}     Error object to format
     * @prop {canRetry: bool}   Whether the user can ask to recover from this error
     * @prop {open: func}       Called to open the window
     * @prop {close: func}      Called to close the window
     * @prop {onRetry: func}    Called when the user asks for retrying
     */
    App.components.modal({
        displayName: 'Error',
        mixins: [React.addons.PureRenderMixin],
        
        modal: {
            showCloseButton: false
        },
        
        propTypes: {
            title: React.PropTypes.string,
            error: React.PropTypes.object,
            canRetry: React.PropTypes.bool,
            
            open: React.PropTypes.func,
            close: React.PropTypes.func,
            onRetry: React.PropTypes.func
        },

        getDefaultProps: function () {
            return {
                title: 'Erreur',
                error: new Error('Erreur'),
                canRetry: false,
                
                open: function () {},
                close: function () {},
                onRetry: function () {}
            };
        },
        
        /**
         * Retry handler
         */
        retry: function (e) {
            this.props.onRetry();
            e.preventDefault();
        },
        
        /**
         * Close handler
         */
        close: function (e) {
            this.props.close();
            e.preventDefault();
        },

        /**
         * Render modal
         */
        render: function () {
            var buttons = [];
            
            buttons = [
                React.DOM.button({
                    key: 'retry',
                    className: 'bt primary inverse',
                    style: {
                        display: (this.props.canRetry) ?
                                'inline-block' : 'none'
                    },
                    onClick: this.retry
                }, 'Réessayer'),
                React.DOM.button({
                    key: 'continue',
                    className: 'bt secondary inverse',
                    onClick: this.close
                }, 'Continuer')
            ];
            
            return React.DOM.form({
                className: 'vex-dialog-form'
            }, [
                React.DOM.h4({
                    key: 'title',
                    className: 'main-title'
                }, this.props.title),
                React.DOM.p({
                    key: 'description',
                    dangerouslySetInnerHTML: {
                        __html: this.props.error.message
                    }
                }),
                
                React.DOM.p({
                    key: 'buttons',
                    className: 'vex-dialog-buttons'
                }, buttons)
            ]);
        }
    });
}());