piano/js/components/Channel/Board.js

76 lines
2.1 KiB
JavaScript

/*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)
]);
}
});
}());