var React = require('react'); var TextInput = require('../form/TextInput'); var FeatureForm = React.createClass({ getInitialState: function() { return { strategyOptions: this.props.strategies, requiredParams: [], currentStrategy: this.props.feature ? this.props.feature.strategy : "default" }; }, componentWillMount: function() { if(this.props.feature) { this.setSelectedStrategy(this.props.feature.strategy); } }, onStrategyChange: function(e) { this.setSelectedStrategy(e.target.value); this.setState({currentStrategy: e.target.value}); }, getParameterValue: function(name) { if(this.props.feature && this.props.feature.parameters) { return this.props.feature.parameters[name]; } else { return ""; } }, setSelectedStrategy: function(name) { var selectedStrategy = this.state.strategyOptions.filter(function(strategy) { return strategy.name === name; })[0]; if(selectedStrategy) { this.setStrategyParams(selectedStrategy); } else { var updatedStrategyName = name + " (deleted)"; this.setState({ currentStrategy: updatedStrategyName, strategyOptions: this.state.strategyOptions.concat([{name: updatedStrategyName}]) }); } }, setStrategyParams: function(strategy) { var requiredParams = []; var key; for(key in strategy.parametersTemplate) { requiredParams.push({name: key, value: this.getParameterValue(key)}); } this.setState({requiredParams: requiredParams}); }, render: function() { var feature = this.props.feature || { name: '', strategy: 'default', enabled: false }; var idPrefix = this.props.feature ? this.props.feature.name : 'new'; return (
{this.props.feature ? "" : Create new toggle}
{this.renderStrategyProperties()}
); }, renderStrategyOptions: function() { return this.state.strategyOptions.map(function(strategy) { return ( ); }.bind(this)); }, renderStrategyProperties: function() { return this.state.requiredParams.map(function(param) { return }); }, saveFeature: function(e) { e.preventDefault(); var feature = { name: this.refs.name.getValue(), description: this.refs.description.getValue(), strategy: this.state.currentStrategy, enabled: this.refs.enabled.getDOMNode().checked, parameters: this.getParameters() }; this.props.onSubmit(feature); }, cancelFeature: function(e) { e.preventDefault(); this.props.onCancel(); }, getParameters: function() { var parameters = {}; this.state.requiredParams.forEach(function(param) { parameters[param.name] = this.refs[param.name].getValue(); }.bind(this)); return parameters; } }); module.exports = FeatureForm;