locker-factory/src/BillboardItem.react.js

Content Locker UI Builder

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

var BillboardItem = React.createClass( {

    propTypes: {
        campaign: React.PropTypes.object.isRequired,
        locker: React.PropTypes.object.isRequired,
        left: React.PropTypes.string.isRequired,
        active: React.PropTypes.bool.isRequired,
        clickCallback: React.PropTypes.func
    },

    _handleClick: function( e ) {
        e.preventDefault();
        if( this.props.clickCallback ) {
            this.props.clickCallback( e );
        }
    },

    render: function() {
        var classNames = ClassNames( {
            billboardItem: true,
            active: this.props.active
        } ),
            campaign = this.props.campaign;

        return( <div className = { classNames } style = { { left: this.props.left + '%' } } >
            <div className = "item" >
                <div className = "thumb" >
                    <img src = { campaign.thumb } style = { { width: '100%', height: 'auto' } } />
                </div>
                <div className = "name" >
                    <p> { campaign.name } </p>
                </div>
                <div className = "description" >
                    <p> { campaign.description } </p>
                </div>
            </div>
        </div> );
    }

} );

module.exports = BillboardItem;