zent/es/progress/components/CircleProgress.js

一套前端设计语言和基于React的实现

import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { DEFAULT_WIDTH } from '../constants';
import AnimatedArc from './AnimatedArc';
import ProgressInfo from './ProgressInfo';
var CircleProgress = function (props) {
    var percent = props.percent, showInfo = props.showInfo, format = props.format, strokeWidth = props.strokeWidth, width = props.width, bgColor = props.bgColor, color = props.color, state = props.state, strokeLinecap = props.strokeLinecap;
    var progressWidth = width || DEFAULT_WIDTH.CIRCLE;
    var mid = progressWidth / 2;
    var diameter = progressWidth - strokeWidth;
    var radius = diameter / 2;
    var circumference = diameter * Math.PI;
    var offset = (circumference * (100 - percent)) / 100;
    return (_jsxs("div", __assign({ className: "zent-progress-container", style: {
            width: progressWidth,
            height: progressWidth,
        }, "data-zv": '10.0.17' }, { children: [_jsx("div", { className: "zent-progress-wrapper", style: {
                    borderWidth: strokeWidth,
                    borderColor: bgColor,
                    width: progressWidth,
                    height: progressWidth,
                }, "data-zv": '10.0.17' }, void 0), _jsxs("svg", __assign({ className: "zent-progress-inner", viewBox: "0 0 " + progressWidth + " " + progressWidth, width: progressWidth, height: progressWidth, "data-zv": '10.0.17' }, { children: [_jsx("g", __assign({ transform: "rotate(-90 " + mid + " " + mid + ")", "data-zv": '10.0.17' }, { children: _jsx("circle", { className: cx('zent-progress-inner-path', "zent-progress-inner-path--" + strokeLinecap), cx: mid, cy: mid, r: radius, style: { stroke: color, strokeWidth: strokeWidth }, strokeDasharray: circumference, strokeDashoffset: offset, "data-zv": '10.0.17' }, void 0) }), void 0), state === 'normal' && (_jsx(AnimatedArc, { className: cx('zent-progress-path-mask', "zent-progress-path-mask--" + strokeLinecap), radius: radius, arcLength: circumference - offset, strokeWidth: strokeWidth }, void 0))] }), void 0), showInfo && (_jsx("div", __assign({ className: "zent-progress-info", "data-zv": '10.0.17' }, { children: _jsx(ProgressInfo, { type: "circle", percent: percent, format: format, state: state, color: color }, void 0) }), void 0))] }), void 0));
};
export default CircleProgress;