piano/js/components/Channel/Board.js

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

(function () {
    'use strict';

    /**
     * Modal for managing channels
     *
     * @prop {channels: Array}      List of channels
     * @prop {switch: func}         Called to switch a param on given channel
     * @prop {open: func}           Called to open the window
     * @prop {close: func}          Called to close the window
     */
    App.components.modal('Channel', {
        displayName: 'Board',
        mixins: [React.addons.PureRenderMixin],
        
        propTypes: {
            channels: React.PropTypes.array,
            
            switch: React.PropTypes.func,
            open: React.PropTypes.func,
            close: React.PropTypes.func
        },

        getDefaultProps: function () {
            return {
                channels: [],
                
                switch: function () {},
                open: function () {},
                close: function () {}
            };
        },

        /**
         * Creates a function to switch a param on given channel
         *
         * @param {channel: object} Channel object
         */
        switch: function (channel) {
            return function (param) {
                this.props.switch(param, channel.id);
            }.bind(this);
        },
        
        /**
         * Render modal
         */
        render: function () {
            var title = 'Instruments', channels;
            
            console.log('rendering!');
            
            channels = this.props.channels.map(function (channel) {
                channel.key = 'channel-' + channel.id;
                channel.switch = this.switch(channel);
                
                return App.components.Channel.Channel(channel);
            }, this);
            
            return React.DOM.form({
                className: 'vex-dialog-form channels'
            }, [
                React.DOM.h4({
                    key: 'title',
                    className: 'main-title'
                }, title),
                React.DOM.ul({
                    key: 'channels'
                }, channels)
            ]);
        }
    });
}());