How to use rc-progress - 8 common examples

import React, {Component} from 'react'
import PropTypes from 'prop-types';
import Icon from '../Icon'
import _rcProgress from 'rc-progress'
import ClassNames from 'classnames'
import './style.less'

const statusColorMap = {
    normal: '#108ee9',
    exception: '#ff5500',
    success: '#87d068'
}
const Circle = _rcProgress.Circle

export default class App extends Component {
    static defaultProps = {
        size: 'default',
        percent: 0,
        showInfo: true,
        trailColor: '#f3f3f3',
        type: 'line',
        prefixCls: 'material-progress',
        //  prefixCls: 'yhProgress',
    }

    /*
     遇到符号"-"首字母大写转驼峰
     */
    transformStr = (str)=>{

var circleSize = width || 120;
  var circleStyle = {
    width: circleSize,
    height: circleSize,
    fontSize: circleSize * 0.15 + 6
  };
  var circleWidth = strokeWidth || 6;
  var gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top';
  var gapDeg = gapDegree || (type === 'dashboard' ? 75 : undefined);
  var strokeColor = getStrokeColor(props);
  var isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
  var wrapperClassName = (0, _classnames["default"])("".concat(prefixCls, "-inner"), _defineProperty({}, "".concat(prefixCls, "-circle-gradient"), isGradient));
  return React.createElement("div", {
    className: wrapperClassName,
    style: circleStyle
  }, React.createElement(_rcProgress.Circle, {
    percent: getPercentage(props),
    strokeWidth: circleWidth,
    trailWidth: circleWidth,
    strokeColor: strokeColor,
    strokeLinecap: strokeLinecap,
    trailColor: trailColor,
    prefixCls: prefixCls,
    gapDegree: gapDeg,
    gapPosition: gapPos
  }), children);
};

* The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * Ian Boyes
 *
 * @exports ProgressEntry
 */

"use strict";

import React from "react";
import Moment from "moment";
import {capitalize} from "lodash";

var Progress = require("rc-progress").Circle;

var ProgressEntry = React.createClass({

    render: function () {
        var progress = this.props.state === "complete" ? 100: 100 * this.props.progress;

        return (
            
                
                    <span>
                        {Moment(this.props.date).format("MMM Do YYYY - hh:mm:ss")}
                    </span>
                
                
                    <span>
                        {capitalize(this.props.state)}</span>

progressInfo
                );
            } else if (type === 'circle' || type === 'dashboard') {
                var circleSize = width || 132;
                var circleStyle = {
                    width: circleSize,
                    height: circleSize,
                    fontSize: circleSize * 0.16 + 6
                };
                var circleWidth = strokeWidth || 6;
                var gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top';
                var gapDeg = gapDegree || type === 'dashboard' && 75;
                progress = _react2['default'].createElement(
                    'div',
                    { className: prefixCls + '-inner', style: circleStyle },
                    _react2['default'].createElement(_rcProgress.Circle, { percent: percent, strokeWidth: circleWidth, trailWidth: circleWidth, strokeColor: statusColorMap[progressStatus], trailColor: trailColor, prefixCls: prefixCls, gapDegree: gapDeg, gapPosition: gapPos }),
                    progressInfo
                );
            }
            var classString = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + (type === 'dashboard' && 'circle' || type), true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-status-' + progressStatus, true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-show-info', showInfo), _classNames), className);
            return _react2['default'].createElement(
                'div',
                (0, _extends3['default'])({}, restProps, { className: classString }),
                progress
            );
        }
    }]);

import React from 'react';
import { connect } from 'react-redux';
import { hashHistory } from 'react-router';
import RCProgress from 'rc-progress';

const Circle = RCProgress.Circle;

class Stats extends React.Component {

  constructor(props) {
    super(props);
    this.masteryPercent = this.masteryPercent.bind(this);
  }

  handleDoneClick () {
    hashHistory.push('/library');
  }

  masteryPercent() {
    let sumRating = 0;
    this.props.cards.forEach(card => sumRating += card.rating);
    return Math.floor((sumRating / (this.props.cards.length * 5)) * 100);

* @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * Ian Boyes
 *
 * @exports HostEntry
 */

'use strict';

import React from "react";
import { sortBy} from "lodash";
import { Flex, FlexItem, ListGroupItem }from "virtool/js/components/Base";
var Progress = require('rc-progress').Circle;

/**
 * A component that serves as an document row in the hosts table.
 */
var HostEntry = React.createClass({

    getInitialState: function () {
        return {
            progress: this.getProgress()
        };
    },

    componentDidMount: function () {
        if (this.state.progress !== 1) dispatcher.db.jobs.on('update', this.onJobChange);
    },

var Progress = require('rc-progress').Line;
var React = require('react');
var TimerMixin = require('react-timer-mixin');
var TransitionGroup = require('react-addons-css-transition-group');

var _ = require('lodash');
var chroma = require('chroma-js');
var cx = require('classnames');

var Audio = require('./Audio.js');
var CapsLock = require('./CapsLock.react.js');
var Chef = require('./Chef.js');
var Inst = require('./Instruction.react.js');
var RecipeStep = require('./RecipeStep.react.js');

const RESCUE_TEXT = ['save', 'rescue', 'help', 'assist', 'support', 'inspire', 'bail', 'hug', 'heal', 'comfort', 'tickle', 'calm', 'feed'];

_react2.default.createElement(
                                    'div',
                                    { className: 'weditor-uploader-file-inner' },
                                    _react2.default.createElement(
                                        'p',
                                        { className: 'weditor-image-tips',
                                            style: { display: progress === 0 || progress === 100 ? 'block' : 'none' } },
                                        '\u6700\u5927\u4E0A\u4F2020M\u7684\u56FE\u7247'
                                    ),
                                    _react2.default.createElement(
                                        _button2.default,
                                        { id: 'weditorUploaderPick',
                                            style: { display: progress === 0 || progress === 100 ? 'block' : 'none' } },
                                        '\u70B9\u51FB\u4E0A\u4F20'
                                    ),
                                    _react2.default.createElement(_rcProgress.Line, { percent: progress, trailWidth: '2', strokeWidth: '2', strokeColor: '#118bfb',
                                        style: { display: progress > 0 && progress < 100 ? 'block' : 'none' } })
                                )
                            ),
                            _react2.default.createElement(
                                _rcTabs.TabPane,
                                { tab: '插入外链', key: '2' },
                                _react2.default.createElement(
                                    'div',
                                    { className: 'weditor-uploader-file-inner' },
                                    _react2.default.createElement(
                                        'div',
                                        null,
                                        _react2.default.createElement(_input2.default, { onChange: this.onLinkUrlChange }),
                                        _react2.default.createElement(
                                            _button2.default,
                                            { onClick: this.insertLink },