zarm-web/es/progress/index.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import classnames from 'classnames';

class Progress extends Component {
  textRender(percent) {
    const {
      prefixCls,
      render
    } = this.props;
    const renderNode = 'render' in this.props ? render(percent) : React.createElement("span", {
      className: `${prefixCls}-line-text`
    }, percent, "%");
    return renderNode;
  }

  render() {
    const {
      prefixCls,
      isRadius,
      isRound,
      percent,
      theme,
      size,
      className,
      style
    } = this.props;
    const cls = classnames({
      [prefixCls]: true,
      radius: 'radius' in this.props || isRadius,
      round: 'round' in this.props || isRound,
      [`theme-${theme}`]: !!theme,
      [`size-${size}`]: !!size,
      [className]: !!className
    });
    return React.createElement("div", {
      className: cls,
      style: style
    }, React.createElement("div", {
      className: `${prefixCls}-line-outer`
    }, React.createElement("div", {
      className: `${prefixCls}-line-inner`
    }, React.createElement("div", {
      className: `${prefixCls}-bg`,
      style: {
        width: `${percent}%`
      }
    }))), this.textRender(percent));
  }

}

Progress.defaultProps = {
  prefixCls: 'ui-progress',
  theme: 'default',
  size: null,
  isBlock: false,
  isRadius: false,
  isRound: false,
  className: null,
  percent: 0
};
export default Progress;