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