@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
118 lines (117 loc) • 4.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CircleProgress", {
enumerable: true,
get: function() {
return CircleProgress;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _utils = require("../../utils");
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
strokeWidth: 5,
radius: 50,
strokeLinecap: 'round',
color: '#FF0F23',
background: '#e5e9f2',
clockwise: true
});
var classPrefix = "nut-circleprogress";
var CircleProgress = function CircleProgress(props) {
var _stop;
var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
"children",
"percent",
"className",
"radius",
"clockwise",
"strokeWidth",
"color",
"background",
"style",
"strokeLinecap"
]);
var classes = (0, _classnames.default)(classPrefix, className);
var refRandomId = Math.random().toString(36).slice(-8);
var styles = (0, _object_spread._)({
height: "".concat(Number(radius) * 2, "px"),
width: "".concat(Number(radius) * 2, "px")
}, style);
var pathStyle = {
stroke: background
};
var hoverStyle = function hoverStyle() {
var perimeter = 283;
var offset = perimeter * Number(percent) / 100;
return {
stroke: (0, _utils.isObject)(color) ? "url(#".concat(refRandomId, ")") : color,
strokeDasharray: "".concat(offset, "px ").concat(perimeter, "px")
};
};
var path = function path() {
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 stop() {
if (!(0, _utils.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.default.createElement("div", (0, _object_spread._)({
className: classes,
style: styles
}, restProps), /*#__PURE__*/ _react.default.createElement("svg", {
viewBox: "0 0 100 100"
}, /*#__PURE__*/ _react.default.createElement("defs", null, /*#__PURE__*/ _react.default.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.default.createElement("stop", {
key: index,
offset: item.key,
stopColor: item.value
});
}))), /*#__PURE__*/ _react.default.createElement("path", {
className: "nut-circleprogress-path",
d: path(),
style: pathStyle,
fill: "none",
strokeWidth: strokeWidth
}), /*#__PURE__*/ _react.default.createElement("path", {
className: "nut-circleprogress-hover",
style: hoverStyle(),
d: path(),
fill: "none",
strokeLinecap: strokeLinecap,
transform: "rotate(90,50,50)",
strokeWidth: strokeWidth
})), /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-circleprogress-text"
}, children));
};
CircleProgress.displayName = 'NutCircleProgress';