<commit_before>import React, { Component, PropTypes } from 'react';
import GlyphButton from '../GlyphButton.js';
import { Alert } from 'react-bootstrap';
import FormGroup from '../FormGroup';
import ArrayContainerItem from '../ArrayContainerItem';

class ArrayContainer extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        addText: PropTypes.string
    };

    handleAdd = () => {
        let { reduxFormProps } = this.props;
        reduxFormProps.addField({});
    };

    handleItemAction = (index, eventKey) => {
        let { id, value, fields, onChange, reduxFormProps: { swapFields, removeField } } = this.props;
        let { events } = this;

        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 (onChange) {
            let values = {
                id: id,
                value: value
            };
            
            onChange(values);
        }
    };
    
    getComponents = () => {
        let { fields, componentFactory, layout } = this.props;
        const groupComponentProps = {
            component: layout.component,
            layout: layout,
            fields: fields,
            componentFactory: componentFactory
        };
        
        return fields.map((fields, index) => (
            <ArrayContainerItem key={index} index={index} onAction={this.handleItemAction}>
                { componentFactory.buildGroupComponent(groupComponentProps) }
            </ArrayContainerItem>
        ));
    };
    
    getAddBar = () => {
        let { addText } = this.props;
        
        let text = addText ? addText : "Add";
        let components = this.getComponents();

        if (components.length) {
            return (
                <div className="add-bar">
                    <span>
                        <GlyphButton glyph="plus" text={text} bsSize="small" onClick={ this.handleAdd }/>
                    </span>
                </div>
            ); 
            
        } else {
            return null;
        }
    };
    
    getAllComponents = () => {
        let components = this.getComponents();
        
        if (components.length) {
            return components;
        } else {
            return (
                <Alert bsStyle="warning">
                    This array is empty. Consider 
                    <a href="#" onClick={ this.handleAdd }>adding a new item</a>.
                </Alert>
            );
        }
    };

    render() {
        let { displayName, fieldLayout, innerSize, name } = this.props;
        let formGroupProps = { displayName, name, fieldLayout, innerSize };
        let components = this.getAllComponents();
        let addBar = this.getAddBar();

        return (
            <FormGroup {...formGroupProps}>
                <div className="array-container-content">
                    { components }
                </div>
                { addBar }
            </FormGroup>
        );
    }
}

export default ArrayContainer;<commit_msg>Start es6-refactor: - Keep on updating to fix troubles on refactor<commit_after>import React, { Component, PropTypes } from 'react';
import GlyphButton from '../GlyphButton.js';
import Alert from 'react-bootstrap/lib/Alert';
import FormGroup from '../FormGroup';
import ArrayContainerItem from '../ArrayContainerItem';

class ArrayContainer extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        addText: PropTypes.string
    };

    handleAdd = () => {
        let { reduxFormProps } = this.props;
        reduxFormProps.addField({});
    };

    handleItemAction = (index, eventKey) => {
        let { id, value, fields, onChange, 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 (onChange) {
            let values = {
                id: id,
                value: value
            };
            
            onChange(values);
        }
    };
    
    getComponents = () => {
        let { fields, componentFactory, layout } = this.props;
        let groupComponentProps = {
            component: layout.component,
            layout: layout,
            fields: fields,
            componentFactory: componentFactory
        };
        
        return fields.map((fields, index) => (
            <ArrayContainerItem key={index} index={index} onAction={this.handleItemAction}>
                { componentFactory.buildGroupComponent(groupComponentProps) }
            </ArrayContainerItem>
        ));
    };
    
    getAddBar = () => {
        let { addText } = this.props;
        
        let text = addText ? addText : "Add";
        let components = this.getComponents();

        if (components.length) {
            return (
                <div className="add-bar">
                    <span>
                        <GlyphButton glyph="plus" text={text} bsSize="small" onClick={ this.handleAdd }/>
                    </span>
                </div>
            ); 
            
        } else {
            return null;
        }
    };
    
    getAllComponents = () => {
        let components = this.getComponents();
        
        if (components.length) {
            return components;
        } else {
            return (
                <Alert bsStyle="warning">
                    This array is empty. Consider <a href="#" onClick={ this.handleAdd }>adding a new item</a>.
                </Alert>
            );
        }
    };

    render() {
        let { displayName, fieldLayout, innerSize, name } = this.props;
        let formGroupProps = { displayName, name, fieldLayout, innerSize };
        let components = this.getAllComponents();
        let addBar = this.getAddBar();

        return (
            <FormGroup {...formGroupProps}>
                <div className="array-container-content">
                    { components }
                </div>
                { addBar }
            </FormGroup>
        );
    }
}

export default ArrayContainer;
{'fraction_non_alphanumeric': 0.10888610763454318, 'fraction_numerical': 0.001807815324711445, 'mean_word_length': 1.3642340565417488, 'pattern_counts': {'":': 10, '<': 35, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2133949', 'n_tokens_mistral': 1846, 'n_tokens_neox': 1758, 'n_words': 421}