shineout/lib/Progress/Circle.js

Shein 前端组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _styles = require("./styles");

var _analyzeColor = _interopRequireDefault(require("./analyzeColor"));

var _config = require("../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 = (0, _classnames.default)((0, _styles.progressClass)('circle', type, (0, _config.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.default.createElement("div", {
    className: className,
    style: style
  }, _react.default.createElement("svg", {
    viewBox: "0 0 200 200"
  }, objColor ? _react.default.createElement("defs", null, _react.default.createElement("linearGradient", {
    id: "progress-linear",
    x1: "50%",
    x2: "50%",
    y1: "0%",
    y2: "100%"
  }, (0, _analyzeColor.default)(color).map(function (c) {
    return _react.default.createElement("stop", {
      key: c.pos,
      offset: c.pos,
      stopColor: c.color
    });
  }))) : null, _react.default.createElement("circle", {
    className: (0, _styles.progressClass)('background'),
    cx: "100",
    cy: "100",
    r: r,
    strokeWidth: strokeWidth * 2,
    fill: "transparent",
    style: {
      stroke: background
    }
  }), _react.default.createElement("circle", {
    className: (0, _styles.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.default.createElement("div", {
    className: (0, _styles.progressClass)('content')
  }, children));
}

Circle.defaultProps = DefaultValue;
var _default = Circle;
exports.default = _default;