<commit_before>import React from 'react';
import GlyphButton from '../GlyphButton.js';
import {Alert, Glyphicon, MenuItem, Dropdown} from 'react-bootstrap';
import FormGroup from '../FormGroup';

const ArrayContainerItem = React.createClass({

    propTypes: {
        index: React.PropTypes.number.isRequired,
        onAction: React.PropTypes.func.isRequired,
        itemWidth: React.PropTypes.number.isRequired
    },

    handleAction: function (eventKey) {
        this.props.onAction(this.props.index, eventKey);
    },

    render: function () {

        let {index, itemWidth} = this.props;

        return <div className="array-container-item">
            <div className="row">
                <div className={`col-xs-${itemWidth}`}>
                    <div className="array-container-item-content">
                        {this.props.children}
                    </div>
                </div>
                <div className="col-xs-1">
                    <div className="array-container-item-options">
                        <Dropdown id={index + '-dropdown'} pullRight onSelect={this.handleAction}>
                            <Dropdown.Toggle noCaret bsStyle="link" bsSize="small">
                                <Glyphicon glyph="menu-hamburger"/>
                            </Dropdown.Toggle>
                            <Dropdown.Menu >
                                <MenuItem eventKey="remove"><Glyphicon glyph="remove" className="text-danger"/><span
                                    className="glyphicon-text text-danger">Remove</span></MenuItem>
                                <MenuItem divider/>
                                <MenuItem eventKey="moveUp"><Glyphicon glyph="chevron-up"/><span
                                    className="glyphicon-text">Move up</span></MenuItem>
                                <MenuItem eventKey="moveDown"><Glyphicon glyph="chevron-down"/><span
                                    className="glyphicon-text">Move down</span></MenuItem>
                                <MenuItem divider/>
                                <MenuItem eventKey="moveFirst"><Glyphicon glyph="chevron-up"/><span
                                    className="glyphicon-text">Move first</span></MenuItem>
                                <MenuItem eventKey="moveLast"><Glyphicon glyph="chevron-down"/><span
                                    className="glyphicon-text">Move last</span></MenuItem>
                            </Dropdown.Menu>
                        </Dropdown>
                    </div>
                </div>
            </div>
        </div>;
    }
});

const ArrayContainer = React.createClass({

    propTypes: {
        name: React.PropTypes.string.isRequired,
        addText: React.PropTypes.string,
        itemWidth: React.PropTypes.number
    },

    getDefaultProps: function () {
        return {
            itemWidth: 11
        }
    },

    handleAdd: function () {
        this.props.reduxFormProps.addField();
    },

    handleItemAction: function (index, eventKey) {

        let {value, fields, reduxFormProps: {swapFields, removeField}} = this.props;

        switch (eventKey) {
            case "remove":
                removeField(index);
                break;
            case 'moveUp':
                if (index > 0)
                    swapFields(index, index - 1);
                break;
            case 'moveDown':
                if (index < fields.length - 1)
                    swapFields(index, index + 1);
                break;
            case 'moveFirst':
                swapFields(index, 0);
                break;
            case 'moveLast':
                swapFields(index, fields.length - 1);
                break;
        }
        if (this.props.onChange) {
            this.props.onChange({id: this.props.id, value: value});
        }
    },

    render: function () {

        let {
            itemWidth,
            displayName,
            fields,
            componentFactory,
            layout,
            addText,
            fieldLayout,
            innerSize
        } = this.props;

        let components = fields.map((fields, index) => {
            return <ArrayContainerItem index={index} onAction={this.handleItemAction} key={index} itemWidth={itemWidth}>
                {
                    componentFactory.buildGroupComponent({
                        component: layout.component,
                        layout: layout,
                        fields: fields,
                        componentFactory: componentFactory
                    })
                }<commit_msg>Removing the itemWidth property of the ArrayContainer<commit_after>import React from 'react';
import GlyphButton from '../GlyphButton.js';
import {Alert, Glyphicon, MenuItem, Dropdown} from 'react-bootstrap';
import FormGroup from '../FormGroup';

const ArrayContainerItem = React.createClass({

    propTypes: {
        index: React.PropTypes.number.isRequired,
        onAction: React.PropTypes.func.isRequired
    },

    handleAction: function (eventKey) {
        this.props.onAction(this.props.index, eventKey);
    },

    render: function () {

        let {index} = this.props;

        return <div className="array-container-item">
            <div className="row">
                <div className={`col-xs-11`}>
                    <div className="array-container-item-content">
                        {this.props.children}
                    </div>
                </div>
                <div className="col-xs-1">
                    <div className="array-container-item-options">
                        <Dropdown id={index + '-dropdown'} pullRight onSelect={this.handleAction}>
                            <Dropdown.Toggle noCaret bsStyle="link" bsSize="small">
                                <Glyphicon glyph="menu-hamburger"/>
                            </Dropdown.Toggle>
                            <Dropdown.Menu >
                                <MenuItem eventKey="remove"><Glyphicon glyph="remove" className="text-danger"/><span
                                    className="glyphicon-text text-danger">Remove</span></MenuItem>
                                <MenuItem divider/>
                                <MenuItem eventKey="moveUp"><Glyphicon glyph="chevron-up"/><span
                                    className="glyphicon-text">Move up</span></MenuItem>
                                <MenuItem eventKey="moveDown"><Glyphicon glyph="chevron-down"/><span
                                    className="glyphicon-text">Move down</span></MenuItem>
                                <MenuItem divider/>
                                <MenuItem eventKey="moveFirst"><Glyphicon glyph="chevron-up"/><span
                                    className="glyphicon-text">Move first</span></MenuItem>
                                <MenuItem eventKey="moveLast"><Glyphicon glyph="chevron-down"/><span
                                    className="glyphicon-text">Move last</span></MenuItem>
                            </Dropdown.Menu>
                        </Dropdown>
                    </div>
                </div>
            </div>
        </div>;
    }
});

const ArrayContainer = React.createClass({

    propTypes: {
        name: React.PropTypes.string.isRequired,
        addText: React.PropTypes.string
    },

    handleAdd: function () {
        this.props.reduxFormProps.addField();
    },

    handleItemAction: function (index, eventKey) {

        let {value, fields, reduxFormProps: {swapFields, removeField}} = this.props;

        switch (eventKey) {
            case "remove":
                removeField(index);
                break;
            case 'moveUp':
                if (index > 0)
                    swapFields(index, index - 1);
                break;
            case 'moveDown':
                if (index < fields.length - 1)
                    swapFields(index, index + 1);
                break;
            case 'moveFirst':
                swapFields(index, 0);
                break;
            case 'moveLast':
                swapFields(index, fields.length - 1);
                break;
        }
        if (this.props.onChange) {
            this.props.onChange({id: this.props.id, value: value});
        }
    },

    render: function () {

        let {
            displayName,
            fields,
            componentFactory,
            layout,
            addText,
            fieldLayout,
            innerSize,
            name
        } = this.props;

        let components = fields.map((fields, index) => {
            return <ArrayContainerItem index={index} onAction={this.handleItemAction} key={index}>
                {
                    componentFactory.buildGroupComponent({
                        component: layout.component,
                        layout: layout,
                        fields: fields,
                        componentFactory: componentFactory
                    })
                }
{'fraction_non_alphanumeric': 0.10983043333702759, 'fraction_numerical': 0.0019949019173223985, 'mean_word_length': 1.3481654957064793, 'pattern_counts': {'":': 2, '<': 99, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '407952', 'n_tokens_mistral': 2262, 'n_tokens_neox': 2091, 'n_words': 409}