<commit_before>/** @jsx React.DOM */
/**
 * TabView
 *
 * @param {String} example  
    <TabView defaultTab={1}>

        <Tab>Tab 1</Tab>
        <Tab data-icon="&#xE086;">Tab 2</Tab>
        <Tab>Tab 3</Tab>

        <TabContent>
            <h3>Tab Content 1</h3>
            <p>Inert HTML Content here</p>
        </TabContent>

        <TabContent>
            <h3>Tab Content 2</h3>
            <p>Inert HTML Content here</p>
            <p>Inert HTML Content here</p>
        </TabContent>

        <TabContent>
            <h3>Tab Content 3</h3>
            <p>Inert HTML Content here</p>
            <p>Inert HTML Content here</p>
            <p>Inert HTML Content here</p>
        </TabContent>
        
    </TabView>

 */
var React = require('react/addons');
var Transition = React.addons.CSSTransitionGroup;
var ClassMixin = require('../mixins/ClassMixin.jsx');


var TabView = React.createClass({
    displayName: 'TabView',
    mixins: [ClassMixin],
    propTypes: {
        defaultTab: React.PropTypes.number,
        text: React.PropTypes.string,
        transition: React.PropTypes.bool
    },
    getInitialState: function() {
        return {
            tabindex: this.props.defaultTab || 1
        };
    },
    getDefaultProps: function() {
        return {
            transition: true,
            direction: 'right'
        };
    },
    componentWillReceiveProps: function(nextProps) {
        if (nextProps.defaultTab) {
            this.setState({tabindex: nextProps.defaultTab});
        }
    },
    onTabChange: function(tabindex) {
        if(this.props.onChange) {
            this.props.onChange(tabindex, this.updateChildProps(tabindex));
        }

        this.props.direction = (tabindex > this.state.tabindex) ? 'left' : 'right';
        this.setState({tabindex: tabindex});
    },
    updateChildProps: function(tabindex) {
        tabindex = tabindex || this.state.tabindex;
        var tabGroup = [];
        var tabContentGroup = [];
        var tabExcludedGroup = [];

        React.Children.forEach(this.props.children, function(c) {
            var t,
                type = c.type.displayName || c.type;

            if (type === 'Tab' && !c.props.exclude) {
                t = tabGroup.push(c);
                c.props.tabindex = t;
                c.props.onTabChange = this.onTabChange;
            }
            else if (c.props.exclude) {
                t = tabExcludedGroup.push(c);
            }
            else if (type === 'TabContent') {
                var isVisible = (tabContentGroup.length + 1) === tabindex;

                c.props.visible = isVisible;
                t = tabContentGroup.push(c);
            }
        }.bind(this));

        return {
            tabGroup: tabGroup,
            tabContentGroup: tabContentGroup,
            tabExcludedGroup: tabExcludedGroup
        };
    },
    render: function() {
        var groups = this.updateChildProps();
        var classes = this.ClassMixin_getClass('TabGroup');

        return (
            <div className="TabView">
                <ul className={classes.className}>
                    {this.renderTab(groups.tabGroup)}
                    {this.renderExcluded(groups.tabExcludedGroup)}
                </ul>

                {this.renderTabContent(groups.tabContentGroup)}
            </div>
        );
    },
    renderTab: function(tabGroup) {
        return tabGroup.map(function(t, i) {
            return <li key={i} className={this.state.tabindex === (i+1) ? 'is-active' : ''} onClick={this.onTabChange.bind(this, (i+1))}>{t}</li>;
        }.bind(this));
    },
    renderExcluded: function(tabExcludedGroup) {
        return tabExcludedGroup.map(function(t, i) {
            return <li className="is-excluded" key={i}>{t}</li>;
        }.bind(this));
    },
    renderTabContent: function(content) {
        if (this.props.transition) {
            // var transitionName = "slide-" + this.props.direction;

            return (
                <Transition transitionName="opacity" className="TabContentGroup" component={React.DOM.div}>
                    {content}
                </Transition>
            );
        }

        return content;
    }
});

module.exports = TabView;<commit_msg>Clone component correctly rather the directly modifying the props<commit_after>/** @jsx React.DOM */
/**
 * TabView
 *
 * @param {String} example  
    <TabView defaultTab={1}>

        <Tab>Tab 1</Tab>
        <Tab data-icon="&#xE086;">Tab 2</Tab>
        <Tab>Tab 3</Tab>

        <TabContent>
            <h3>Tab Content 1</h3>
            <p>Inert HTML Content here</p>
        </TabContent>

        <TabContent>
            <h3>Tab Content 2</h3>
            <p>Inert HTML Content here</p>
            <p>Inert HTML Content here</p>
        </TabContent>

        <TabContent>
            <h3>Tab Content 3</h3>
            <p>Inert HTML Content here</p>
            <p>Inert HTML Content here</p>
            <p>Inert HTML Content here</p>
        </TabContent>
        
    </TabView>

 */
var React = require('react/addons');
var Transition = React.addons.CSSTransitionGroup;
var ClassMixin = require('../mixins/ClassMixin.jsx');


var TabView = React.createClass({
    displayName: 'TabView',
    mixins: [ClassMixin],
    propTypes: {
        defaultTab: React.PropTypes.number,
        text: React.PropTypes.string,
        transition: React.PropTypes.bool
    },
    getInitialState: function() {
        return {
            tabindex: this.props.defaultTab || 1
        };
    },
    getDefaultProps: function() {
        return {
            transition: true,
            direction: 'right'
        };
    },
    componentWillReceiveProps: function(nextProps) {
        if (nextProps.defaultTab) {
            this.setState({tabindex: nextProps.defaultTab});
        }
    },
    onTabChange: function(tabindex) {
        if(this.props.onChange) {
            this.props.onChange(tabindex, this.updateChildProps(tabindex));
        }

        this.props.direction = (tabindex > this.state.tabindex) ? 'left' : 'right';

        this.setState({tabindex: tabindex});
    },
    updateChildProps: function(tabindex) {
        tabindex = tabindex || this.state.tabindex;

        var _this = this;
        var tabGroup = [];
        var tabContentGroup = [];
        var tabExcludedGroup = [];

        React.Children.forEach(this.props.children, function(c) {
            var type = c.type.displayName || c.type;

            if (type === 'Tab' && !c.props.exclude) {
                var nextTab = React.addons.cloneWithProps(c, {
                    tabindex: tabGroup.length - 1,
                    onTabChange: _this.onTabChange
                });

                tabGroup.push(nextTab);
            }
            else if (c.props.exclude) {
                tabExcludedGroup.push(c);
            }
            else if (type === 'TabContent') {
                var nextTabContent = React.addons.cloneWithProps(c, {
                    visible: (tabContentGroup.length + 1) === tabindex
                });

                tabContentGroup.push(nextTabContent);
            }
        });

        return {
            tabGroup: tabGroup,
            tabContentGroup: tabContentGroup,
            tabExcludedGroup: tabExcludedGroup
        };
    },
    render: function() {
        var groups = this.updateChildProps();
        var classes = this.ClassMixin_getClass('TabGroup');

        return (
            <div className="TabView">
                <ul className={classes.className}>
                    {this.renderTab(groups.tabGroup)}
                    {this.renderExcluded(groups.tabExcludedGroup)}
                </ul>

                {this.renderTabContent(groups.tabContentGroup)}
            </div>
        );
    },
    renderTab: function(tabGroup) {
        return tabGroup.map(function(t, i) {
            return <li key={i} className={this.state.tabindex === (i+1) ? 'is-active' : ''} onClick={this.onTabChange.bind(this, (i+1))}>{t}</li>;
        }.bind(this));
    },
    renderExcluded: function(tabExcludedGroup) {
        return tabExcludedGroup.map(function(t, i) {
            return <li className="is-excluded" key={i}>{t}</li>;
        }.bind(this));
    },
    renderTabContent: function(content) {
        // if (this.props.transition) {
        //     // var transitionName = "slide-" + this.props.direction;

        //     return (
        //         <Transition transitionName="opacity" className="TabContentGroup" component={'div'}>
        //             {content}
        //         </Transition>
        //     );
        // }

        return content;
    }
});

module.exports = TabView;
{'fraction_non_alphanumeric': 0.13306451612903225, 'fraction_numerical': 0.004723502304147465, 'mean_word_length': 1.767293592604399, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 89, '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': '2321032', 'n_tokens_mistral': 2568, 'n_tokens_neox': 2472, 'n_words': 459}