@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
78 lines (77 loc) • 2.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CircularProgress = void 0;
var _react = require("react");
var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
class CircularProgress extends _react.Component {
render() {
const {
circleStrokeColor,
circleBackgroundColor,
type,
forwardedRef,
fill = 'transparent',
viewBox = '0 0 100 100',
...props
} = this.props,
size = mapSize[type];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
ref: forwardedRef,
...props,
width: size,
height: size,
viewBox: viewBox,
fill: fill,
children: [type == 'small' &&
/*#__PURE__*/
// Background
(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
cx: "50%",
cy: "50%",
r: radius,
strokeLinecap: "butt",
strokeDasharray: circleStrokeDasharray,
stroke: circleBackgroundColor,
strokeWidth: mapCircleStrokeWidth.small,
strokeDashoffset: -radius
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
cx: "50%",
cy: "50%",
r: radius,
strokeLinecap: "butt",
strokeDasharray: circleStrokeDasharray,
stroke: circleStrokeColor,
strokeWidth: mapCircleStrokeWidth[type],
strokeDashoffset: mapCircleStrokeDashoffset[type]
})]
});
}
}
exports.CircularProgress = CircularProgress;
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