@nutui/nutui-react/dist/esm/CircleProgress.js

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

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