@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
140 lines (139 loc) • 6.21 kB
JavaScript
;
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 _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
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_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _components = require("@tarojs/components");
var _utils = require("../../utils");
var _typings = require("../../utils/typings");
var _useforceupdate = require("../../hooks/use-force-update");
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 _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, percent = _ref.percent, className = _ref.className, radius = _ref.radius, background = _ref.background, clockwise = _ref.clockwise, color = _ref.color, strokeWidth = _ref.strokeWidth, style = _ref.style, strokeLinecap = _ref.strokeLinecap, restProps = (0, _object_without_properties._)(_ref, [
"children",
"percent",
"className",
"radius",
"background",
"clockwise",
"color",
"strokeWidth",
"style",
"strokeLinecap"
]);
var oldValue = (0, _react.useRef)(percent);
var forceUpdate = (0, _useforceupdate.useForceUpdate)();
var classes = (0, _classnames.default)(classPrefix, className);
var refRandomId = Math.random().toString(36).slice(-8);
var animateIdRef = (0, _react.useRef)(0);
var styles = (0, _object_spread._)({
height: "".concat(Number(radius) * 2, "px"),
width: "".concat(Number(radius) * 2, "px")
}, style);
(0, _react.useEffect)(function() {
var startTime = Date.now();
var startRate = Number(oldValue.current) // 30
;
var endRate = Number(percent) // 40
;
var duration = Math.abs((startRate - endRate) * 1000 / +100) // 100
;
var animate = function animate1() {
var now = Date.now();
var progress = Math.min((now - startTime) / duration, 1);
var rate = progress * (endRate - startRate) + startRate;
oldValue.current = Math.min(Math.max(+rate, 0), 100);
if (endRate > startRate ? rate < endRate : rate > endRate) {
forceUpdate();
animateIdRef.current = window.requestAnimationFrame(animate);
} else {
window.cancelAnimationFrame(animateIdRef.current);
}
};
animateIdRef.current = window.requestAnimationFrame(animate);
return function() {
return window.cancelAnimationFrame(animateIdRef.current);
};
}, [
percent
]);
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;
};
var transColor = function transColor(color) {
return color && color.replace('#', '%23');
};
var format = function format(progress) {
return Math.min(Math.max(+progress, 0), 100);
};
var circleStyle = function circleStyle() {
var stopArr = stop();
var stopDom = [];
if (stopArr) {
stopArr.forEach(function(item) {
var obj = '';
obj = "%3Cstop offset='".concat(item.key, "' stop-color='").concat(transColor(item.value), "'/%3E");
stopDom.push(obj);
});
}
var perimeter = 283;
var progress = +oldValue.current;
var offset = perimeter * Number(format(parseFloat(progress.toFixed(1)))) / 100;
var isWise = clockwise ? 1 : 0;
var realColor = (0, _utils.isObject)(color) ? "url(%23".concat(refRandomId, ")") : transColor(color);
var d = "M 50 50 m 0 -45 a 45 45 0 1 ".concat(isWise, " 0 90 a 45 45 0 1, ").concat(isWise, " 0 -90");
var pa = "%3Cdefs%3E%3ClinearGradient id='".concat(refRandomId, "' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E").concat(stopDom, "%3C/linearGradient%3E%3C/defs%3E");
var path = "%3Cpath d='".concat(d, "' stroke-width='").concat(strokeWidth, "' stroke='").concat(transColor(background), "' fill='none'/%3E");
var path1 = "%3Cpath d='".concat(d, "' stroke-width='").concat(strokeWidth, "' stroke-dasharray='").concat(offset, ",").concat(perimeter, "' stroke-linecap='round' stroke='").concat(transColor(realColor), "' fill='none'/%3E");
return {
background: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E".concat(pa).concat(path).concat(path1, '%3C/svg%3E")'),
width: '100%',
height: '100%'
};
};
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: classes,
style: styles
}, restProps), /*#__PURE__*/ _react.default.createElement(_components.View, {
style: circleStyle()
}), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-circleprogress-text"
}, children));
};
CircleProgress.displayName = 'NutCircleProgress';