unleash.unleash/packages/unleash-frontend/public/js/components/strategy/StrategyForm.jsx

'use strict';
const React          = require('react');
const TextInput      = require('../form/TextInput');

const StrategyForm = React.createClass({

    getDefaultProps () {
        return {
            maxParams: 4,
        };
    },

    getInitialState () {
        return {
            parameters: [],
        };
    },

    onSubmit (event) {
        event.preventDefault();

        const strategy = {};
        strategy.name = this.refs.name.getValue();
        strategy.description = this.refs.description.getValue();
        strategy.parametersTemplate = {};

        this.state.parameters.forEach(parameter => {
            const name = this.refs[parameter.name].getDOMNode().value.trim();
            if (name) {
                strategy.parametersTemplate[name] = 'string';
            }
        });

        this.props.onSave(strategy);
    },

    onCancel (event) {
        event.preventDefault();

        this.props.onCancelNewStrategy();
    },

    onAddParam (event) {
        event.preventDefault();
        const id = this.state.parameters.length + 1;
        const params = this.state.parameters.concat([{ id, name: `param_${id}`, label: `Parameter ${id}` }]);
        this.setState({ parameters: params });
    },

    onRemoveParam (event) {
        event.preventDefault();
        const params = this.state.parameters.slice(0, -1);

        this.setState({ parameters: params });
    },

    render () {
        return (
            <div className="line r-pam bg-lilac-xlt">
                <div className="unit r-size1of2">
                    <form onSubmit={this.onSubmit}>
                        <fieldset>
                            <legend>Create strategy</legend>

                            <TextInput
                                id="name"
                                name="name"
                                label="Name"
                                ref="name"
                                placeholder="Strategy name" />

                            <TextInput
                                id="description"
                                name="description"
                                label="Description"
                                ref="description"
                                placeholder="Please write a short description" />

                            {this.renderParameters()}
                            {this.renderRemoveLink()}

                            <div className="actions">
                                <input type="submit" value="Save" className="primary mrs" />
                                <button onClick={this.onCancel} className="mrs">Cancel</button>
                                {this.renderAddLink()}
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        );
    },

    renderParameters () {
        return this.state.parameters.map(param => <div className="formelement" key={param.name}>
            <label className="t4">{param.label}</label>
            <div className="input">
                <div className="line">

                    <div className="unit size2of3">
                        <input
                            type="text"
                            name={param.name}
                            ref={param.name}
                            placeholder="Parameter name"
                        />
                    </div>

                    <div className="unit size1of3">
                        <select defaultValue="string">
                            <option value="string">string</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>);
    },

    renderAddLink () {
        if (this.state.parameters.length < this.props.maxParams) {
            return <a href="#add" onClick={this.onAddParam}>+ Add required parameter</a>;
        }
    },
    renderRemoveLink () {
        if (this.state.parameters.length > 0) {
            return (
                <div className="formelement mtn">
                    <a href="#add"
                        className="negative"
                        onClick={this.onRemoveParam}>
                        - Remove parameter
                    </a>
                </div>
                );
        }
    },
});

module.exports = StrategyForm;