cluedin-widget/core/components/generics/cluedinprogress.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react';

export default class CluedInProgress extends Component {
    buildWithBigNumber() {
        const { withBigNumber, percentage } = this.props;
        if ( withBigNumber ) {
            return (<div>
                <span className="cluedin_progress_bigNumber">{percentage}</span>
                <span className="cluedin_progress_percent">%</span>
            </div>)
        } else {
            return (<span></span>);
        }
    }

    progressBar() {
        const { percentage } = this.props;

        var barStyle = {
            width: percentage + '%'
        };

        return (
            <div className="cluedin_progress_bar">
                <div style={barStyle} className="cluedin_progress_perentage">

                </div>
            </div>
        )
    }

    render() {
        return (
            <div className="cluedin_progress">
                {this.buildWithBigNumber()}
                {this.progressBar()}
            </div>
        );
    }
}

CluedInProgress.propTypes = {
    percentage: React.PropTypes.number,
    withBigNumber: React.PropTypes.bool
};