locker-factory/src/AjaxOverlay.react.js

Content Locker UI Builder

var React = require( 'react' ),
    Api = require( './Api' ),
    ClassNames = require( 'classnames' );

var AjaxOverlay = React.createClass( {

    getInitialState: function() {
        return {
            active: false
        }
    },

    componentDidMount: function() {
        Api.addRequestOpenedListener( this._requestSent );
        Api.addRequestFulfilledListener( this._responseReceived );
    },

    componentWillUnmount: function() {
        Api.removeRequestOpenedListener( this._requestSent );
        Api.removeRequestFulfilledListener( this._responseReceived );
    },

    _requestSent: function() {
        this.setState( {
            active: true
        } );
    },

    _responseReceived: function() {
        this.setState( {
            active: false
        } );
    },

    render: function() {
        var classes = ClassNames( {
            'ajaxOverlay': true,
            'active': this.state.active
        } );
        return( <div className = { classes } >
            <span className = "ajaxSpinner" />
        </div> );
    }

} );

module.exports = AjaxOverlay;