<commit_before>const React = require('react');
const { bool, number } = React.PropTypes;

/**
 * Displays a progress bar (YouTube-like) at the top of container
 */
const ProgressBar = React.createClass({
    propTypes: {
        show:  bool,
        // 0 < percent < 1
        percent: number
    },

    getDefaultProps: function () {
        return {
            show: false,
            percent: 0.3
        };
    },

    getInitialState: function () {
        return {
            percent: 0
        };
    },

    getBarStyle: function () {
        const { show, percent } = this.props;

        return {
            width: percent * 100 + '%',
            display: show && percent > 0 ? 'block': 'none'
        };
    },

    getShadowStyle: function () {
        const { show, percent } = this.props;

        return {
            display: show && percent > 0 ? 'block': 'none'
        };
    },

    render: function () {
        return <div className="progress-bar">
            <div className="bar" style={this.getBarStyle()}>
                <div className="progress-bar-shadow"
                     style={this.getShadowStyle()}>
                </div>
            </div>
        </div>;
    }
});

module.exports = ProgressBar;<commit_msg>Add proper ProgressBar animation<commit_after>const React = require('react');
const { bool, number } = React.PropTypes;

/**
 * Displays a progress bar (YouTube-like) at the top of container
 * Based on https://github.com/lonelyclick/react-loading-bar/blob/master/src/Loading.jsx
 */
const ProgressBar = React.createClass({
    propTypes: {
        show:  bool
    },

    getDefaultProps: function () {
        return {
            show: false
        };
    },

    getInitialState: function () {
        return {
            size: 0,
            disappearDelayHide: false, // when dispappear, first transition then display none
            percent: 0,
            appearDelayWidth: 0 // when appear, first display block then transition width
        };
    },

    componentWillReceiveProps: function (nextProps) {
        const { show } = nextProps;

        if (show) {
            this.show();
        } else {
            this.hide();
        }
    },

    shouldComponentUpdate: function (nextProps, nextState) {
        return true; // !shallowEqual(nextState, this.state)
    },

    show: function () {
        let { size, percent } = this.state;

        const appearDelayWidth = size === 0;
        percent = calculatePercent(percent);

        this.setState({
            size: ++size,
            appearDelayWidth,
            percent
        });

        if (appearDelayWidth) {
            setTimeout(() => {
                this.setState({
                    appearDelayWidth: false
                });
            });
        }
    },

    hide: function () {
        let { size } = this.state;

        if (--size < 0) {
            this.setState({ size: 0 });
            return;
        }

        this.setState({
            size: 0,
            disappearDelayHide: true,
            percent: 1
        });

        setTimeout(() => {
            this.setState({
                disappearDelayHide: false,
                percent: 0
            });
        }, 500);
    },

    getBarStyle: function () {
        const { disappearDelayHide, appearDelayWidth, percent } = this.state;

        return {
            width: appearDelayWidth ? 0 : percent * 100 + '%',
            display: disappearDelayHide || percent > 0 ? 'block': 'none'
        };
    },

    getShadowStyle: function () {
        const { percent, disappearDelayHide } = this.state;

        return {
            display: disappearDelayHide || percent > 0 ? 'block': 'none'
        };
    },

    render: function () {
        return <div className="progress-bar">
            <div className="bar" style={this.getBarStyle()}>
                <div className="progress-bar-shadow"
                     style={this.getShadowStyle()}>
                </div>
            </div>
        </div>;
    }
});

function calculatePercent(percent) {
    percent = percent || 0;

    // How much of remaining bar we advance
    let progress = 0.1 + Math.random() * 0.2;

    return percent +  progress * (1 - percent);
}



module.exports = ProgressBar;
{'fraction_non_alphanumeric': 0.12421200093392482, 'fraction_numerical': 0.007938360961942564, 'mean_word_length': 1.5947910357359176, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 21, 'https://': 1, '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': '5959893', 'n_tokens_mistral': 1189, 'n_tokens_neox': 1130, 'n_words': 282}