@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
72 lines (71 loc) • 1.85 kB
JavaScript
"use strict";
import { Component } from 'react';
import Svg, { Circle } from 'react-native-svg';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export class CircularProgress extends Component {
render() {
const {
circleStrokeColor,
circleBackgroundColor,
type,
forwardedRef,
fill = 'transparent',
viewBox = '0 0 100 100',
...props
} = this.props,
size = mapSize[type];
return /*#__PURE__*/_jsxs(Svg, {
ref: forwardedRef,
...props,
width: size,
height: size,
viewBox: viewBox,
fill: fill,
children: [type == 'small' &&
/*#__PURE__*/
// Background
_jsx(Circle, {
cx: "50%",
cy: "50%",
r: radius,
strokeLinecap: "butt",
strokeDasharray: circleStrokeDasharray,
stroke: circleBackgroundColor,
strokeWidth: mapCircleStrokeWidth.small,
strokeDashoffset: -radius
}), /*#__PURE__*/_jsx(Circle, {
cx: "50%",
cy: "50%",
r: radius,
strokeLinecap: "butt",
strokeDasharray: circleStrokeDasharray,
stroke: circleStrokeColor,
strokeWidth: mapCircleStrokeWidth[type],
strokeDashoffset: mapCircleStrokeDashoffset[type]
})]
});
}
}
const mapSize = {
small: 16,
large: 88
},
radius = 44,
circumference = radius * 2 * Math.PI,
circleStrokeDasharray = [circumference, circumference],
mapCircleStrokeDashoffset = {
small: loadingProgress(circumference, 50),
large: loadingProgress(circumference, 81)
},
mapCircleStrokeWidth = {
small: 16,
large: 10
};
function loadingProgress(circumference,
/**
* 0 - 100
*/
percentage) {
return circumference - percentage * 0.01 * circumference;
}
//# sourceMappingURL=CircularProgress.js.map