<commit_before>import React from 'react';
import { Form, FormGroup, FormControl, Button, Col, Grid, Row } from 'react-bootstrap'
import { observer } from 'mobx-react';
import MobxReactForm from 'mobx-react-form';
import validatorjs from 'validatorjs';
import './index.css';

const plugins = { dvr: validatorjs };

const fields = [
    'title',
    'lines',
    'lines[]'
];

const labels = {
    'title': 'Title',
    'lines': 'New lines',
    'lines[]': 'New line'
};

const placeholders = {
    'title': 'Title',
    'lines': 'New lines',
    'lines[]': 'New line'
};

const rules = {
    'title': 'required|string|between:1,140',
    'lines': 'required|array|between:1,10',
    'lines[]': 'required|string|between:1,140'
};

class CreateNewListForm extends MobxReactForm {
    onSuccess(form) {
        console.log('form');
        console.log(form);
        console.log('form.values');
        console.log(form.values());
    }
    onError(form) {
        console.log('form');
        console.log(form);
        console.log('errors');
        console.log(form.errors());
        form.invalidate('Error!');
    }
}

const createNewListForm = new CreateNewListForm({ fields, labels, placeholders, rules }, { plugins });

createNewListForm.update({
    lines: ['']
});

export default observer(class extends React.Component {

    componentWillMount() {
        createNewListForm.user = this.props.user;
    }

    render() {
        return (
            <Grid>
                <Row>
                    <Col xs={12}>
                        <Form onSubmit={createNewListForm.onSubmit} horizontal>
                            <p>{createNewListForm.error}</p>
                            <Col sm={8} smOffset={2}>
                                {createNewListForm.$('title').label}
                            </Col>
                            <FormGroup>
                                <Col sm={8} smOffset={2}>
                                    <FormControl {...createNewListForm.$('title').bind()} />
                                </Col>
                            </FormGroup>
                            <br/>
                            { createNewListForm.$('lines').map(
                                line =>
                                    <FormGroup key={line.key}>
                                        <Col sm={8} smOffset={2}>
                                            {/*TODO: I want this to auto grow*/}
                                            <FormControl componentClass="textarea" {...line.bind()} />
                                            <Button type="button" onClick={line.onClear}>clear</Button>
                                            <Button type="button" onClick={line.onDel}>delete</Button>
                                        </Col>
                                    </FormGroup>
                            )}
                            <br/>
                            <FormGroup>
                                <Col sm={8} smOffset={2}>
                                    <Button type="button" onClick={createNewListForm.$('lines').onAdd}>add</Button>
                                </Col>
                            </FormGroup>
                            <br/>
                            <FormGroup>
                                <Col smOffset={2} sm={10}>
                                    <Button type="submit" onClick={createNewListForm.onSubmit}>
                                        Create new list
                                    </Button>
                                </Col>
                            </FormGroup>
                        </Form>
                    </Col>
                </Row>
            </Grid>
        );
    }

})<commit_msg>corrected behavior when adding blank fields<commit_after>import React from 'react';
import { Form, FormGroup, FormControl, Button, ButtonGroup, Glyphicon, Col, Grid, Row } from 'react-bootstrap'
import { observer } from 'mobx-react';
import MobxReactForm from 'mobx-react-form';
import validatorjs from 'validatorjs';
import './index.css';

const plugins = { dvr: validatorjs };

const fields = [
    'title',
    'lines',
    'lines[]'
];

const labels = {
    'title': 'Title',
    'lines': 'New lines',
    'lines[]': 'New line'
};

const placeholders = {
    'title': 'Title',
    'lines': 'New lines',
    'lines[]': 'New line'
};

const rules = {
    'title': 'required|string|between:1,140',
    'lines': 'required|array|between:1,10',
    'lines[]': 'required|string|between:1,140'
};

class CreateNewListForm extends MobxReactForm {
    onSuccess(form) {
        console.log('form');
        console.log(form);
        console.log('form.values');
        console.log(form.values());
    }
    onError(form) {
        console.log('form');
        console.log(form);
        console.log('errors');
        console.log(form.errors());
        form.invalidate('Error!');
    }
}

const createNewListForm = new CreateNewListForm({ fields, labels, placeholders, rules }, { plugins });

createNewListForm.update({
    lines: ['']
});

export default observer(class extends React.Component {

    componentWillMount() {
        createNewListForm.user = this.props.user;
    }

    render() {
        return (
            <Grid>
                <Form onSubmit={createNewListForm.onSubmit} horizontal>
                    <Row>
                        <Col xs={12}>
                            <p>{createNewListForm.error}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col sm={8} smOffset={2}>
                            {createNewListForm.$('title').label}
                        </Col>
                    </Row>
                    <Row>
                        <Col sm={8} smOffset={2}>
                            <FormGroup>
                                <FormControl {...createNewListForm.$('title').bind()} />
                            </FormGroup>
                        </Col>
                    </Row>
                    <br/>
                    { createNewListForm.$('lines').map(
                        (line, index) =>
                        <Row key={line.key}>
                            <Col sm={10} smOffset={1}>
                                {/*TODO: I want this to auto grow*/}
                                <FormGroup>
                                    <Row>
                                        <Col xs={2} sm={1}>
                                            {   createNewListForm.$('lines').fields.size === 1 ? null :
                                                <ButtonGroup vertical>
                                                    <Button type="button">
                                                        <Glyphicon glyph="arrow-up"/>
                                                    </Button>
                                                    <Button type="button">
                                                        <Glyphicon glyph="arrow-down"/>
                                                    </Button>
                                                </ButtonGroup>
                                            }
                                        </Col>
                                        <Col xs={8} sm={10}>
                                            <FormControl componentClass="textarea" {...line.bind()} />
                                        </Col>
                                        <Col xs={2} sm={1}>
                                            <ButtonGroup vertical>
                                                <Button type="button" onClick={line.onClear}>
                                                    <Glyphicon glyph="erase" />
                                                </Button>
                                                {
                                                    /*if there's only one field we don't want to be able to delete it*/
                                                    createNewListForm.$('lines').fields.size === 1 ?
                                                    null :
                                                    <Button type="button" onClick={line.onDel}>
                                                        <Glyphicon glyph="remove" />
                                                    </Button>
                                                }
                                            </ButtonGroup>
                                        </Col>
                                    </Row>
                                </FormGroup>
                                <FormGroup>
                                    <Row>
                                        <Col xs={10} xsOffset={1} className="text-center">
                                            <Button type="button" bsSize="xsmall" onClick={() => {
                                                let lines = [];
                                                createNewListForm.$('lines').fields
                                                    .forEach(field => lines.push(field.value));
                                                lines.splice(index+1, 0, '');
                                                createNewListForm.update({
                                                    lines: lines
                                                });
                                            }}>
                                                <Glyphicon glyph="plus" />
                                            </Button>
                                        </Col>
                                    </Row>
                                </FormGroup>
                            </Col>
                        </Row>
                    )}
                    <br/>
                    <Row>
                        <Col smOffset={2} sm={10}>
                            <FormGroup>
                                <Button type="submit" onClick={createNewListForm.onSubmit}>
                                    Create new list
                                </Button>
                            </FormGroup>
                        </Col>
                    </Row>
                </Form>
            </Grid>
        );
    }

})
{'fraction_non_alphanumeric': 0.11297354907470207, 'fraction_numerical': 0.005910280011626781, 'mean_word_length': 0.8194958575709501, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 119, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 105, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4445972', 'n_tokens_mistral': 2209, 'n_tokens_neox': 2113, 'n_words': 440}