@nutui/nutui-react/dist/es/packages/circleprogress/circleprogress.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import React from "react";
import classNames from "classnames";
import { isObject } from "../../utils";
import { ComponentDefaults } from "../../utils/typings";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    strokeWidth: 5,
    radius: 50,
    strokeLinecap: 'round',
    color: '#FF0F23',
    background: '#e5e9f2',
    clockwise: true
});
var classPrefix = "nut-circleprogress";
export var CircleProgress = function(props) {
    var _stop;
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, percent = _ref.percent, className = _ref.className, radius = _ref.radius, clockwise = _ref.clockwise, strokeWidth = _ref.strokeWidth, color = _ref.color, background = _ref.background, style = _ref.style, strokeLinecap = _ref.strokeLinecap, restProps = _object_without_properties(_ref, [
        "children",
        "percent",
        "className",
        "radius",
        "clockwise",
        "strokeWidth",
        "color",
        "background",
        "style",
        "strokeLinecap"
    ]);
    var classes = classNames(classPrefix, className);
    var refRandomId = Math.random().toString(36).slice(-8);
    var styles = _object_spread({
        height: "".concat(Number(radius) * 2, "px"),
        width: "".concat(Number(radius) * 2, "px")
    }, style);
    var pathStyle = {
        stroke: background
    };
    var hoverStyle = function() {
        var perimeter = 283;
        var offset = perimeter * Number(percent) / 100;
        return {
            stroke: isObject(color) ? "url(#".concat(refRandomId, ")") : color,
            strokeDasharray: "".concat(offset, "px ").concat(perimeter, "px")
        };
    };
    var path = function() {
        var isWise = clockwise ? 1 : 0;
        return "M 50 50 m -45 0 a 45 45 0 1 ".concat(isWise, " 90 0  a 45 45 0 1 ").concat(isWise, " -90 0");
    };
    var stop = function() {
        if (!isObject(color)) {
            return;
        }
        var colorArr = Object.keys(color).sort(function(a, b) {
            return parseFloat(a) - parseFloat(b);
        });
        var stopArr = [];
        colorArr.forEach(function(item) {
            var obj = {
                key: '',
                value: ''
            };
            obj.key = item;
            obj.value = color[item];
            stopArr.push(obj);
        });
        return stopArr;
    };
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: classes,
        style: styles
    }, restProps), /*#__PURE__*/ React.createElement("svg", {
        viewBox: "0 0 100 100"
    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
        id: refRandomId,
        x1: "100%",
        y1: "0%",
        x2: "0%",
        y2: "0%"
    }, (_stop = stop()) === null || _stop === void 0 ? void 0 : _stop.map(function(item, index) {
        return /*#__PURE__*/ React.createElement("stop", {
            key: index,
            offset: item.key,
            stopColor: item.value
        });
    }))), /*#__PURE__*/ React.createElement("path", {
        className: "nut-circleprogress-path",
        d: path(),
        style: pathStyle,
        fill: "none",
        strokeWidth: strokeWidth
    }), /*#__PURE__*/ React.createElement("path", {
        className: "nut-circleprogress-hover",
        style: hoverStyle(),
        d: path(),
        fill: "none",
        strokeLinecap: strokeLinecap,
        transform: "rotate(90,50,50)",
        strokeWidth: strokeWidth
    })), /*#__PURE__*/ React.createElement("div", {
        className: "nut-circleprogress-text"
    }, children));
};
CircleProgress.displayName = 'NutCircleProgress';