gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
143 lines (142 loc) • 6.58 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/typeof";
var _excluded = ["children", "progress", "className", "radius", "pathColor", "clockwise", "circleColor", "strokeWidth", "style", "strokeLinecap"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { c as cn } from './bem-893ad28d.js';
var isObject = function isObject(val) {
return val !== null && _typeof(val) === 'object';
};
var defaultProps = {
strokeWidth: 5,
radius: 50,
strokeLinecap: 'round',
circleColor: '#fa2c19',
pathColor: '#e5e9f2',
clockwise: true
};
var CircleProgress = function CircleProgress(props) {
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
children = _defaultProps$props.children,
progress = _defaultProps$props.progress,
className = _defaultProps$props.className,
radius = _defaultProps$props.radius,
pathColor = _defaultProps$props.pathColor,
clockwise = _defaultProps$props.clockwise,
circleColor = _defaultProps$props.circleColor,
strokeWidth = _defaultProps$props.strokeWidth,
style = _defaultProps$props.style,
strokeLinecap = _defaultProps$props.strokeLinecap,
restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
var _useState = useState(progress),
_useState2 = _slicedToArray(_useState, 2),
oldValue = _useState2[0],
setOldValue = _useState2[1];
var b = cn('circleprogress');
var classes = classNames(className, b(''));
var refRandomId = Math.random().toString(36).slice(-8);
var lastTime = 0;
var styles = _objectSpread({
height: "".concat(Number(radius) * 2, "px"),
width: "".concat(Number(radius) * 2, "px")
}, style);
useEffect(function () {
var rafId;
var startTime = Date.now();
var startRate = Number(oldValue); // 30
var endRate = Number(progress); // 40
var duration = Math.abs((startRate - endRate) * 1000 / +100); // 100
var animate = function animate() {
var now = Date.now();
var progress = Math.min((now - startTime) / duration, 1);
var rate = progress * (endRate - startRate) + startRate;
setOldValue(Math.min(Math.max(+rate, 0), 100));
if (endRate > startRate ? rate < endRate : rate > endRate) {
rafId = requestAnimationFrame(animate);
}
};
if (rafId) {
cancelAnimationFrame(rafId);
}
rafId = requestAnimationFrame(animate);
}, [progress]);
var requestAnimationFrame = function requestAnimationFrame(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
lastTime = currTime + timeToCall;
var id = setTimeout(function () {
callback();
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
var cancelAnimationFrame = function cancelAnimationFrame(id) {
clearTimeout(id);
};
var stop = function stop() {
if (!isObject(circleColor)) {
return [];
}
var color = circleColor;
var colorArr = Object.keys(color).sort(function (a, b) {
return parseFloat(a) - parseFloat(b);
});
var stopArr = [];
colorArr.map(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.map(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;
var offset = perimeter * Number(format(parseFloat(progress.toFixed(1)))) / 100;
var isWise = props.clockwise ? 1 : 0;
var color = isObject(circleColor) ? "url(%23".concat(refRandomId, ")") : transColor(circleColor);
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(props.pathColor), "' 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(color), "' 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 React__default.createElement("div", _objectSpread({
className: classes,
style: styles
}, restProps), React__default.createElement("div", {
style: circleStyle()
}), React__default.createElement("div", {
className: "nut-circleprogress-text"
}, children || React__default.createElement("div", null, progress, "%")));
};
CircleProgress.defaultProps = defaultProps;
CircleProgress.displayName = 'NutCircleProgress';
export { CircleProgress as C };