shineout/es/Progress/Circle.js

Shein 前端组件库

import React from 'react';
import classnames from 'classnames';
import { progressClass } from './styles';
import analyzeColor from './analyzeColor';
import { isRTL } from '../config';
var DefaultValue = {
  strokeLinecap: 'round',
  strokeWidth: 8,
  size: 100,
  value: 0
};

function Circle(props) {
  var children = props.children,
      _props$strokeWidth = props.strokeWidth,
      strokeWidth = _props$strokeWidth === void 0 ? DefaultValue.strokeWidth : _props$strokeWidth,
      type = props.type,
      color = props.color,
      _props$size = props.size,
      size = _props$size === void 0 ? DefaultValue.size : _props$size,
      value = props.value,
      background = props.background,
      strokeLinecap = props.strokeLinecap;
  var className = classnames(progressClass('circle', type, isRTL() && 'rtl'), props.className);
  var r = 100 - Math.ceil(strokeWidth / size * 100);
  var p = Math.PI * 2 * r;
  var dasharray = [p * (value / 100), p * (1 - value / 100)];
  var style = Object.assign({
    width: size,
    height: size
  }, props.style);
  var width = value === 0 && strokeLinecap === 'round' ? 0 : strokeWidth * 2;
  var objColor = color && typeof color === 'object';
  return React.createElement("div", {
    className: className,
    style: style
  }, React.createElement("svg", {
    viewBox: "0 0 200 200"
  }, objColor ? React.createElement("defs", null, React.createElement("linearGradient", {
    id: "progress-linear",
    x1: "50%",
    x2: "50%",
    y1: "0%",
    y2: "100%"
  }, analyzeColor(color).map(function (c) {
    return React.createElement("stop", {
      key: c.pos,
      offset: c.pos,
      stopColor: c.color
    });
  }))) : null, React.createElement("circle", {
    className: progressClass('background'),
    cx: "100",
    cy: "100",
    r: r,
    strokeWidth: strokeWidth * 2,
    fill: "transparent",
    style: {
      stroke: background
    }
  }), React.createElement("circle", {
    className: progressClass('front'),
    cx: "100",
    cy: "100",
    r: r,
    fill: "transparent",
    style: {
      stroke: objColor ? "url('#progress-linear')" : color
    },
    strokeDasharray: dasharray,
    strokeLinecap: strokeLinecap,
    strokeWidth: width
  })), children && React.createElement("div", {
    className: progressClass('content')
  }, children));
}

Circle.defaultProps = DefaultValue;
export default Circle;