var React = require('react/addons');

var MultipleSelectBox = React.createClass({
	buildSelectOptions: function () {
		return this.props.options.map(function (option) {
			return (
				<option value={option} onChange={this.props.changeCallback(this.props.fieldKey)}>{option}</option>
			)
		}, this);
	},

	render: function () {
		return (
			<div className="form-group">
				<label className="control-label">{this.props.label}</label>

				<select multiple className="form-control">
					{this.buildSelectOptions()}
				</select>
			</div>
		)
	}
});

module.exports = MultipleSelectBox;

@@ -1,12 +1,37 @@
+// External Requirements%0A
 var React = 
@@ -60,51 +60,876 @@
 );%0A%0A
-var MultipleSelectBox = React.createClass(%7B
+/**%0A * MultipleSelectBox Component%0A * A simple Component to manage multi-select user-input%0A *%0A * @class MultipleSelectBox%0A * @type %7BReactComponent%7D%0A *%0A * @prop %7BString%7D fieldKey%09The key for the property on the object getting edited.%0A * @prop %7BArray%7D%09options%09%09The options that will turn into the multi-select.%0A * @prop %7BString%7D%09label %09%09Label for the entire multi-select component.%0A *%0A * @memberOf FormComponents%0A * @see %7B@link FormComponents%7D%0A */%0Avar MultipleSelectBox = React.createClass(%7B%0A%09propTypes: %7B%0A%09%09fieldKey: React.PropTypes.string.isRequired,%0A%09%09options: React.PropTypes.array,%0A%09%09label: React.PropTypes.string,%0A%09%7D,%0A%0A%09/**%0A%09 * Builds the multi-select options by iterating over the %60options%60 array from the component props.%0A%09 *%0A%09 * @memberOf FormComponents.MultipleSelectBox%0A%09 *%0A%09 * @return %7BArray%7D%09Array containing the multi-select options as JSX components.%0A%09 */
 %0A%09bu
@@ -1149,16 +1149,144 @@
 );%0A%09%7D,%0A%0A
+%09/**%0A%09 * Renders the MultipleSelectBox component.%0A%09 *%0A%09 * @memberOf FormComponents.MultipleSelectBox%0A%09 *%0A%09 * @return %7BJSX%7D%0A%09 */%0A
 %09render:

add docs to MultipleSelectBox component