@hedverse-ui/native-circular-progress
Version:
Animated circular progress component for React Native applications with customizable properties
89 lines (88 loc) • 4.68 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var react_native_1 = require("react-native");
var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
var react_native_svg_1 = require("react-native-svg");
var AnimatedCircle = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Circle);
function CircularProgress(props) {
var _a = props.value, value = _a === void 0 ? 0 : _a, _b = props.radius, radius = _b === void 0 ? 28 : _b, _c = props.duration, duration = _c === void 0 ? 2000 : _c, _d = props.strokeWidth, strokeWidth = _d === void 0 ? 4 : _d, _e = props.showLabel, showLabel = _e === void 0 ? true : _e, _f = props.activeStrokeColor, activeStrokeColor = _f === void 0 ? "#f97316" : _f, _g = props.inActiveStrokeColor, inActiveStrokeColor = _g === void 0 ? "#fed7aa" : _g, _h = props.inActiveStrokeOpacity, inActiveStrokeOpacity = _h === void 0 ? 0.2 : _h, _j = props.progressValueColor, progressValueColor = _j === void 0 ? "#f97316" : _j, progressValueStyle = props.progressValueStyle, _k = props.valueSuffix, valueSuffix = _k === void 0 ? "%" : _k;
var size = radius * 2;
var circleRadius = (size - strokeWidth) / 2;
var circumference = circleRadius * 2 * Math.PI;
var _l = (0, react_1.useState)(0), labelText = _l[0], setLabelText = _l[1];
var progressValue = (0, react_native_reanimated_1.useDerivedValue)(function () {
if (showLabel) {
(0, react_native_reanimated_1.runOnJS)(setLabelText)(Math.min(Math.round(value), 100));
}
return (0, react_native_reanimated_1.withTiming)(value, { duration: duration });
}, [value]);
var circleAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () {
var progressPercent = (0, react_native_reanimated_1.interpolate)(progressValue.value, [0, 100], [100, 0], react_native_reanimated_1.Extrapolate.CLAMP);
return {
strokeDashoffset: circleRadius * Math.PI * 2 * (progressPercent / 100),
};
});
var labelViewStyle = [
styles.labelView,
{
width: size,
height: size,
},
];
var defaultValueStyle = {
color: progressValueColor,
fontSize: 14,
fontWeight: "500",
};
var labelTextStyle = [
defaultValueStyle,
progressValueStyle,
];
return (<react_native_1.View>
<react_native_svg_1.Svg width={size} height={size}>
<react_native_svg_1.Circle stroke={inActiveStrokeColor} fill="none" cx={size / 2} cy={size / 2} r={circleRadius} strokeWidth={strokeWidth} opacity={inActiveStrokeOpacity}/>
<AnimatedCircle stroke={activeStrokeColor} fill="none" cx={size / 2} cy={size / 2} r={circleRadius} strokeDasharray={"".concat(circumference, " ").concat(circumference)} strokeLinecap="round" transform={"rotate(-90, ".concat(size / 2, ", ").concat(size / 2, ")")} strokeWidth={strokeWidth} animatedProps={circleAnimatedProps}/>
</react_native_svg_1.Svg>
{showLabel && (<react_native_1.View style={labelViewStyle}>
<react_native_reanimated_1.default.Text style={labelTextStyle}>
{"".concat(labelText).concat(valueSuffix)}
</react_native_reanimated_1.default.Text>
</react_native_1.View>)}
</react_native_1.View>);
}
var styles = react_native_1.StyleSheet.create({
labelView: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
},
});
exports.default = CircularProgress;