@baby-journey/rn-segmented-progress-bar 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/lib/commonjs/index.js +27 -28
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/index.js +27 -28
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/index.d.ts +2 -2
- package/lib/typescript/index.d.ts.map +1 -1
- package/package.json +11 -4
- package/src/index.tsx +33 -35
package/README.md
CHANGED
|
@@ -15,12 +15,14 @@ The following are customizable:
|
|
|
15
15
|
With npm
|
|
16
16
|
|
|
17
17
|
```
|
|
18
|
+
npm install react-native-svg
|
|
18
19
|
npm install @baby-journey/rn-segmented-progress-bar --save
|
|
19
20
|
```
|
|
20
21
|
|
|
21
22
|
With yarn
|
|
22
23
|
|
|
23
24
|
```
|
|
25
|
+
yarn add react-native-svg
|
|
24
26
|
yarn add @baby-journey/rn-segmented-progress-bar
|
|
25
27
|
```
|
|
26
28
|
|
package/lib/commonjs/index.js
CHANGED
|
@@ -12,7 +12,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
12
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
13
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
14
14
|
const IndicatorCircle = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Circle);
|
|
15
|
-
const
|
|
15
|
+
const ProgressCircle = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Circle);
|
|
16
16
|
const max = 100;
|
|
17
17
|
const duration = 1200;
|
|
18
18
|
const RNSegmentedProgressBar = (props, ref) => {
|
|
@@ -28,14 +28,14 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
28
28
|
} = props;
|
|
29
29
|
const circleRef = (0, _react.useRef)([]);
|
|
30
30
|
const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
31
|
-
const
|
|
31
|
+
const progressAnimatedValues = (0, _react.useRef)([...Array(segments)].map(() => new _reactNative.Animated.Value(0))).current;
|
|
32
32
|
const indicatorCircleRef = (0, _react.useRef)(null);
|
|
33
33
|
const tSpanRef = (0, _react.useRef)(null);
|
|
34
34
|
const indicatorSegmentsGap = (indicator === null || indicator === void 0 ? void 0 : indicator.radius) ?? 0;
|
|
35
35
|
const halfCircle = radius + strokeWidth + indicatorSegmentsGap;
|
|
36
36
|
const circleCircumference = 2 * Math.PI * radius;
|
|
37
37
|
const rotation = -90 + 180 * (segmentsGap / 2 / radius) / Math.PI;
|
|
38
|
-
const
|
|
38
|
+
const getProgressValues = (0, _react.useCallback)(progress => (0, _helpers.getPathValues)(progress, max, segments), [segments]);
|
|
39
39
|
const progressDelay = 10;
|
|
40
40
|
const animation = (0, _react.useCallback)((animatedVal, toValue, delay, durationValue) => {
|
|
41
41
|
return _reactNative.Animated.timing(animatedVal, {
|
|
@@ -49,13 +49,13 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
49
49
|
(0, _react.useEffect)(() => {
|
|
50
50
|
() => {
|
|
51
51
|
animatedValue.removeAllListeners();
|
|
52
|
-
|
|
52
|
+
progressAnimatedValues.forEach(progressAnimatedValue => progressAnimatedValue.removeAllListeners());
|
|
53
53
|
};
|
|
54
|
-
}, [animatedValue,
|
|
54
|
+
}, [animatedValue, progressAnimatedValues]);
|
|
55
55
|
const getMeanSegmentsGap = (0, _react.useCallback)(progress => {
|
|
56
|
-
const pathValues =
|
|
56
|
+
const pathValues = getProgressValues(progress);
|
|
57
57
|
return (progress / pathValues.filter(val => val > 0).length || 1) * segments * segmentsGap / 100;
|
|
58
|
-
}, [
|
|
58
|
+
}, [getProgressValues, segments, segmentsGap]);
|
|
59
59
|
const runIndicator = (0, _react.useCallback)((calculatedStrokeDashoffset, val) => {
|
|
60
60
|
const {
|
|
61
61
|
x: cx,
|
|
@@ -81,7 +81,6 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
81
81
|
dy: cy + 5,
|
|
82
82
|
font: {
|
|
83
83
|
textAnchor: 'middle',
|
|
84
|
-
// fontFamily: Font.CircularMedium,
|
|
85
84
|
fontSize: 18
|
|
86
85
|
}
|
|
87
86
|
});
|
|
@@ -91,15 +90,15 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
91
90
|
let {
|
|
92
91
|
progress
|
|
93
92
|
} = _ref;
|
|
94
|
-
const
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
const circleProgressValues = getProgressValues(progress);
|
|
94
|
+
progressAnimatedValues.forEach((progressAnimated, index) => {
|
|
95
|
+
progressAnimated.addListener(v => {
|
|
97
96
|
if (circleRef !== null && circleRef !== void 0 && circleRef.current[index]) {
|
|
98
97
|
var _circleRef$current$in;
|
|
99
98
|
var strokeDashoffset = circleCircumference;
|
|
100
|
-
var val = v.value <= (
|
|
101
|
-
strokeDashoffset =
|
|
102
|
-
const paintedLength = circleCircumference - strokeDashoffset - segments * (
|
|
99
|
+
var val = v.value <= (circleProgressValues[index] ?? 0) ? v.value : circleProgressValues[index] ?? 0;
|
|
100
|
+
strokeDashoffset = circleProgressValues[index] ? circleCircumference - circleCircumference * val / 100 : circleCircumference;
|
|
101
|
+
const paintedLength = circleCircumference - strokeDashoffset - segments * (circleProgressValues[index] ?? 0) * segmentsGap / 100;
|
|
103
102
|
|
|
104
103
|
//@ts-ignore
|
|
105
104
|
circleRef === null || circleRef === void 0 ? void 0 : (_circleRef$current$in = circleRef.current[index]) === null || _circleRef$current$in === void 0 ? void 0 : _circleRef$current$in.setNativeProps({
|
|
@@ -120,14 +119,14 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
120
119
|
});
|
|
121
120
|
}
|
|
122
121
|
|
|
123
|
-
// Animate
|
|
124
|
-
const
|
|
122
|
+
// Animate circles sequentially
|
|
123
|
+
const progressAnimations = _reactNative.Animated.sequence(progressAnimatedValues.map((tav, index) => animation(tav,
|
|
125
124
|
// Animated value
|
|
126
|
-
|
|
125
|
+
circleProgressValues[index] ?? 0,
|
|
127
126
|
// To value
|
|
128
127
|
index === 0 ? progressDelay : 0,
|
|
129
128
|
// Delay
|
|
130
|
-
duration * (
|
|
129
|
+
duration * (circleProgressValues[index] ?? 0) / max // Duration
|
|
131
130
|
)));
|
|
132
131
|
|
|
133
132
|
if (indicator !== null && indicator !== void 0 && indicator.show) {
|
|
@@ -140,14 +139,14 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
140
139
|
// Delay
|
|
141
140
|
duration * progress / max // Duration
|
|
142
141
|
);
|
|
143
|
-
//
|
|
144
|
-
_reactNative.Animated.parallel([
|
|
142
|
+
// Progress Animations run parallelly with percentage circle
|
|
143
|
+
_reactNative.Animated.parallel([progressAnimations, percentageAnim]).start();
|
|
145
144
|
} else {
|
|
146
|
-
|
|
145
|
+
progressAnimations.start();
|
|
147
146
|
}
|
|
148
|
-
}, [animatedValue, animation, segments, circleCircumference, segmentsGap, getMeanSegmentsGap, indicator === null || indicator === void 0 ? void 0 : indicator.show,
|
|
149
|
-
const
|
|
150
|
-
const
|
|
147
|
+
}, [animatedValue, animation, segments, circleCircumference, segmentsGap, getMeanSegmentsGap, indicator === null || indicator === void 0 ? void 0 : indicator.show, getProgressValues, runIndicator, progressAnimatedValues]);
|
|
148
|
+
const getProgress = (0, _react.useMemo)(() => {
|
|
149
|
+
const progressConfig = {
|
|
151
150
|
stroke: progressColor,
|
|
152
151
|
cx: halfCircle,
|
|
153
152
|
cy: halfCircle,
|
|
@@ -157,16 +156,16 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
157
156
|
strokeDasharray: circleCircumference,
|
|
158
157
|
strokeDashoffset: circleCircumference
|
|
159
158
|
};
|
|
160
|
-
return
|
|
159
|
+
return progressAnimatedValues.map((_, key) => /*#__PURE__*/_react.default.createElement(ProgressCircle, _extends({
|
|
161
160
|
key: key
|
|
162
161
|
//@ts-ignore
|
|
163
162
|
,
|
|
164
163
|
ref: el => circleRef.current[key] = el
|
|
165
|
-
},
|
|
164
|
+
}, progressConfig, {
|
|
166
165
|
rotation: rotation + key * 360 / segments,
|
|
167
166
|
strokeLinecap: "round"
|
|
168
167
|
})));
|
|
169
|
-
}, [segments, circleCircumference, halfCircle, progressColor, radius, rotation, strokeWidth,
|
|
168
|
+
}, [segments, circleCircumference, halfCircle, progressColor, radius, rotation, strokeWidth, progressAnimatedValues]);
|
|
170
169
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
171
170
|
run
|
|
172
171
|
}));
|
|
@@ -191,7 +190,7 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
191
190
|
strokeDashoffset: circleCircumference - circleCircumference / segments + segmentsGap,
|
|
192
191
|
strokeLinecap: "round"
|
|
193
192
|
});
|
|
194
|
-
}),
|
|
193
|
+
}), getProgress, (indicator === null || indicator === void 0 ? void 0 : indicator.show) === true && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(IndicatorCircle, {
|
|
195
194
|
stroke: progressColor,
|
|
196
195
|
ref: indicatorCircleRef,
|
|
197
196
|
fill: "white"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["IndicatorCircle","Animated","createAnimatedComponent","Circle","
|
|
1
|
+
{"version":3,"names":["IndicatorCircle","Animated","createAnimatedComponent","Circle","ProgressCircle","max","duration","RNSegmentedProgressBar","props","ref","radius","strokeWidth","baseColor","progressColor","segments","segmentsGap","indicator","centerComponent","circleRef","useRef","animatedValue","Value","current","progressAnimatedValues","Array","map","indicatorCircleRef","tSpanRef","indicatorSegmentsGap","halfCircle","circleCircumference","Math","PI","rotation","getProgressValues","useCallback","progress","getPathValues","progressDelay","animation","animatedVal","toValue","delay","durationValue","timing","useNativeDriver","easing","Easing","linear","useEffect","removeAllListeners","forEach","progressAnimatedValue","getMeanSegmentsGap","pathValues","filter","val","length","runIndicator","calculatedStrokeDashoffset","x","cx","y","cy","getArcEndCoordinates","calculatedProgress","round","setNativeProps","r","children","dx","dy","font","textAnchor","fontSize","run","circleProgressValues","progressAnimated","index","addListener","v","strokeDashoffset","value","paintedLength","show","meanSegmentsGap","progressAnimations","sequence","tav","percentageAnim","parallel","start","getProgress","useMemo","progressConfig","stroke","origin","strokeDasharray","_","key","el","useImperativeHandle","styles","memo","forwardRef","StyleSheet","create","height","justifyContent","alignItems"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA;AAUA;AACA;AACA;AAAgE;AAAA;AAAA;AAwBhE,MAAMA,eAAe,GAAGC,qBAAQ,CAACC,uBAAuB,CAACC,sBAAM,CAAC;AAChE,MAAMC,cAAc,GAAGH,qBAAQ,CAACC,uBAAuB,CAACC,sBAAM,CAAC;AAE/D,MAAME,GAAG,GAAG,GAAG;AACf,MAAMC,QAAQ,GAAG,IAAI;AAErB,MAAMC,sBAGL,GAAG,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClB,MAAM;IACJC,MAAM;IACNC,WAAW,GAAG,EAAE;IAChBC,SAAS,GAAG,SAAS;IACrBC,aAAa,GAAG,SAAS;IACzBC,QAAQ,GAAG,CAAC;IACZC,WAAW,GAAG,CAAC;IACfC,SAAS;IACTC;EACF,CAAC,GAAGT,KAAK;EAET,MAAMU,SAAS,GAAG,IAAAC,aAAM,EAAC,EAAE,CAAC;EAE5B,MAAMC,aAAa,GAAG,IAAAD,aAAM,EAAC,IAAIlB,qBAAQ,CAACoB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAC3D,MAAMC,sBAAsB,GAAG,IAAAJ,aAAM,EACnC,CAAC,GAAGK,KAAK,CAACV,QAAQ,CAAC,CAAC,CAACW,GAAG,CAAC,MAAM,IAAIxB,qBAAQ,CAACoB,KAAK,CAAC,CAAC,CAAC,CAAC,CACtD,CAACC,OAAO;EAET,MAAMI,kBAAkB,GAAG,IAAAP,aAAM,EAAC,IAAI,CAAC;EACvC,MAAMQ,QAAQ,GAAG,IAAAR,aAAM,EAAC,IAAI,CAAC;EAE7B,MAAMS,oBAAoB,GAAG,CAAAZ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEN,MAAM,KAAI,CAAC;EACnD,MAAMmB,UAAU,GAAGnB,MAAM,GAAGC,WAAW,GAAGiB,oBAAoB;EAC9D,MAAME,mBAAmB,GAAG,CAAC,GAAGC,IAAI,CAACC,EAAE,GAAGtB,MAAM;EAChD,MAAMuB,QAAQ,GAAG,CAAC,EAAE,GAAI,GAAG,IAAIlB,WAAW,GAAG,CAAC,GAAGL,MAAM,CAAC,GAAIqB,IAAI,CAACC,EAAE;EAEnE,MAAME,iBAAiB,GAAG,IAAAC,kBAAW,EAClCC,QAAQ,IAAK,IAAAC,sBAAa,EAACD,QAAQ,EAAE/B,GAAG,EAAES,QAAQ,CAAC,EACpD,CAACA,QAAQ,CAAC,CACX;EAED,MAAMwB,aAAa,GAAG,EAAE;EAExB,MAAMC,SAAS,GAAG,IAAAJ,kBAAW,EAC3B,CACEK,WAA2B,EAC3BC,OAAe,EACfC,KAAa,EACbC,aAAqB,KAClB;IACH,OAAO1C,qBAAQ,CAAC2C,MAAM,CAACJ,WAAW,EAAE;MAClCC,OAAO;MACPnC,QAAQ,EAAEqC,aAAa;MACvBD,KAAK;MACLG,eAAe,EAAE,IAAI;MACrBC,MAAM,EAAEC,mBAAM,CAACC;IACjB,CAAC,CAAC;EACJ,CAAC,EACD,EAAE,CACH;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,MAAM;MACJ7B,aAAa,CAAC8B,kBAAkB,EAAE;MAClC3B,sBAAsB,CAAC4B,OAAO,CAAEC,qBAAqB,IACnDA,qBAAqB,CAACF,kBAAkB,EAAE,CAC3C;IACH,CAAC;EACH,CAAC,EAAE,CAAC9B,aAAa,EAAEG,sBAAsB,CAAC,CAAC;EAE3C,MAAM8B,kBAAkB,GAAG,IAAAlB,kBAAW,EACnCC,QAAgB,IAAK;IACpB,MAAMkB,UAAU,GAAGpB,iBAAiB,CAACE,QAAQ,CAAC;IAC9C,OACG,CAACA,QAAQ,GAAGkB,UAAU,CAACC,MAAM,CAAEC,GAAG,IAAKA,GAAG,GAAG,CAAC,CAAC,CAACC,MAAM,IAAI,CAAC,IAC1D3C,QAAQ,GACRC,WAAW,GACb,GAAG;EAEP,CAAC,EACD,CAACmB,iBAAiB,EAAEpB,QAAQ,EAAEC,WAAW,CAAC,CAC3C;EAED,MAAM2C,YAAY,GAAG,IAAAvB,kBAAW,EAC9B,CAACwB,0BAAkC,EAAEH,GAAW,KAAK;IACnD,MAAM;MAAEI,CAAC,EAAEC,EAAE;MAAEC,CAAC,EAAEC;IAAG,CAAC,GAAG,IAAAC,6BAAoB,EAC3CtD,MAAM,EACNiD,0BAA0B,EAC1B9B,UAAU,EACVA,UAAU,EACVI,QAAQ,CACT;IAED,IAAI,CAAC0B,0BAA0B,EAAE;MAC/B;IACF;IAEA,MAAMM,kBAAkB,GAAI,GAAElC,IAAI,CAACmC,KAAK,CAACV,GAAG,CAAE,GAAE;IAEhD,IAAI9B,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEJ,OAAO,IAAIK,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEL,OAAO,EAAE;MACpD;MACAI,kBAAkB,CAACJ,OAAO,CAAC6C,cAAc,CAAC;QACxCC,CAAC,EAAE,CAAApD,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEN,MAAM,KAAI,CAAC;QACzBC,WAAW,EAAE,CAAAK,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEL,WAAW,KAAI,CAAC;QACxCkD,EAAE;QACFE;MACF,CAAC,CAAC;;MAEF;MACApC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEL,OAAO,CAAC6C,cAAc,CAAC;QAC/BE,QAAQ,EAAEJ,kBAAkB;QAC5BK,EAAE,EAAET,EAAE;QACNU,EAAE,EAAER,EAAE,GAAG,CAAC;QACVS,IAAI,EAAE;UACJC,UAAU,EAAE,QAAQ;UACpBC,QAAQ,EAAE;QACZ;MACF,CAAC,CAAC;IACJ;EACF,CAAC,EACD,CAAChE,MAAM,EAAEmB,UAAU,EAAEI,QAAQ,EAAEjB,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEN,MAAM,EAAEM,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEL,WAAW,CAAC,CAC1E;EAED,MAAMgE,GAAG,GAAG,IAAAxC,kBAAW,EACrB,QAA8C;IAAA,IAA7C;MAAEC;IAA+B,CAAC;IACjC,MAAMwC,oBAAoB,GAAG1C,iBAAiB,CAACE,QAAQ,CAAC;IACxDb,sBAAsB,CAAC4B,OAAO,CAAC,CAAC0B,gBAAgB,EAAEC,KAAK,KAAK;MAC1DD,gBAAgB,CAACE,WAAW,CAAEC,CAAC,IAAK;QAClC,IAAI9D,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEI,OAAO,CAACwD,KAAK,CAAC,EAAE;UAAA;UAC7B,IAAIG,gBAAgB,GAAGnD,mBAAmB;UAE1C,IAAI0B,GAAG,GACLwB,CAAC,CAACE,KAAK,KAAKN,oBAAoB,CAACE,KAAK,CAAC,IAAI,CAAC,CAAC,GACzCE,CAAC,CAACE,KAAK,GACPN,oBAAoB,CAACE,KAAK,CAAC,IAAI,CAAC;UACtCG,gBAAgB,GAAGL,oBAAoB,CAACE,KAAK,CAAC,GAC1ChD,mBAAmB,GAAIA,mBAAmB,GAAG0B,GAAG,GAAI,GAAG,GACvD1B,mBAAmB;UAEvB,MAAMqD,aAAa,GACjBrD,mBAAmB,GACnBmD,gBAAgB,GACfnE,QAAQ,IAAI8D,oBAAoB,CAACE,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG/D,WAAW,GAC1D,GAAG;;UAEP;UACAG,SAAS,aAATA,SAAS,gDAATA,SAAS,CAAEI,OAAO,CAACwD,KAAK,CAAC,0DAAzB,sBAA2BX,cAAc,CAAC;YACxCc,gBAAgB,EACdnD,mBAAmB,GAAGqD,aAAa,GAAGrD,mBAAmB,GACrDA,mBAAmB,GACnBA,mBAAmB,GAAGqD;UAC9B,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;IACJ,CAAC,CAAC;IACF,IAAInE,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEoE,IAAI,EAAE;MACnBhE,aAAa,CAAC2D,WAAW,CAAEC,CAAC,IAAK;QAC/B,IAAIC,gBAAgB,GAAGnD,mBAAmB;QAC1C,IAAI0B,GAAG,GAAGwB,CAAC,CAACE,KAAK,IAAI9C,QAAQ,GAAG4C,CAAC,CAACE,KAAK,GAAG9C,QAAQ;QAClD6C,gBAAgB,GAAG7C,QAAQ,GACvBN,mBAAmB,GAAIA,mBAAmB,GAAG0B,GAAG,GAAI,GAAG,GACvD1B,mBAAmB;QAEvB,MAAMqD,aAAa,GAAGrD,mBAAmB,GAAGmD,gBAAgB;QAE5D,MAAMI,eAAe,GAAGhC,kBAAkB,CAACjB,QAAQ,CAAC;QACpD,MAAMuB,0BAA0B,GAAGwB,aAAa,GAAGE,eAAe;QAClE3B,YAAY,CAACC,0BAA0B,EAAEvB,QAAQ,CAAC;MACpD,CAAC,CAAC;IACJ;;IAEA;IACA,MAAMkD,kBAAkB,GAAGrF,qBAAQ,CAACsF,QAAQ,CAC1ChE,sBAAsB,CAACE,GAAG,CAAC,CAAC+D,GAAG,EAAEV,KAAK,KACpCvC,SAAS,CACPiD,GAAG;IAAE;IACLZ,oBAAoB,CAACE,KAAK,CAAC,IAAI,CAAC;IAAE;IAClCA,KAAK,KAAK,CAAC,GAAGxC,aAAa,GAAG,CAAC;IAAE;IAChChC,QAAQ,IAAIsE,oBAAoB,CAACE,KAAK,CAAC,IAAI,CAAC,CAAC,GAAIzE,GAAG,CAAC;IAAA,CACvD,CACF,CACF;;IAED,IAAIW,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEoE,IAAI,EAAE;MACnB;MACA,MAAMK,cAAc,GAAGlD,SAAS,CAC9BnB,aAAa;MAAE;MACfgB,QAAQ;MAAE;MACVE,aAAa;MAAE;MACdhC,QAAQ,GAAG8B,QAAQ,GAAI/B,GAAG,CAAC;MAAA,CAC7B;MACD;MACAJ,qBAAQ,CAACyF,QAAQ,CAAC,CAACJ,kBAAkB,EAAEG,cAAc,CAAC,CAAC,CAACE,KAAK,EAAE;IACjE,CAAC,MAAM;MACLL,kBAAkB,CAACK,KAAK,EAAE;IAC5B;EACF,CAAC,EACD,CACEvE,aAAa,EACbmB,SAAS,EACTzB,QAAQ,EACRgB,mBAAmB,EACnBf,WAAW,EACXsC,kBAAkB,EAClBrC,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEoE,IAAI,EACflD,iBAAiB,EACjBwB,YAAY,EACZnC,sBAAsB,CACvB,CACF;EAED,MAAMqE,WAAW,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,MAAMC,cAAc,GAAG;MACrBC,MAAM,EAAElF,aAAa;MACrBgD,EAAE,EAAEhC,UAAU;MACdkC,EAAE,EAAElC,UAAU;MACduC,CAAC,EAAE1D,MAAM;MACTsF,MAAM,EAAG,GAAEnE,UAAW,KAAIA,UAAW,EAAC;MACtClB,WAAW,EAAEA,WAAW;MACxBsF,eAAe,EAAEnE,mBAAmB;MACpCmD,gBAAgB,EAAEnD;IACpB,CAAC;IAED,OAAOP,sBAAsB,CAACE,GAAG,CAAC,CAACyE,CAAC,EAAEC,GAAG,kBACvC,6BAAC,cAAc;MACb,GAAG,EAAEA;MACL;MAAA;MACA,GAAG,EAAGC,EAAE,IAAMlF,SAAS,CAACI,OAAO,CAAC6E,GAAG,CAAC,GAAGC;IAAI,GACvCN,cAAc;MAClB,QAAQ,EAAE7D,QAAQ,GAAIkE,GAAG,GAAG,GAAG,GAAIrF,QAAS;MAC5C,aAAa,EAAC;IAAO,GAExB,CAAC;EACJ,CAAC,EAAE,CACDA,QAAQ,EACRgB,mBAAmB,EACnBD,UAAU,EACVhB,aAAa,EACbH,MAAM,EACNuB,QAAQ,EACRtB,WAAW,EACXY,sBAAsB,CACvB,CAAC;EAEF,IAAA8E,0BAAmB,EAAC5F,GAAG,EAAE,OAAO;IAAEkE;EAAI,CAAC,CAAC,CAAC;EAEzC,oBACE,6BAAC,uBAAG;IACF,OAAO,EAAG,OAAM9C,UAAU,GAAG,CAAE,IAAGA,UAAU,GAAG,CAAE,EAAE;IACnD,KAAK,EAAE,MAAO;IACd,IAAI,EAAC,MAAM;IACX,MAAM,EAAEnB,MAAM,GAAG;EAAE,GAElBO,eAAe,iBACd,6BAAC,iBAAI;IAAC,KAAK,EAAEqF,MAAM,CAACrF;EAAgB,GAAEA,eAAe,CACtD,eACD,6BAAC,iBAAC,QACC,CAAC,GAAGO,KAAK,CAACV,QAAQ,CAAC,CAAC,CAACW,GAAG,CAAC,CAACyE,CAAC,EAAEC,GAAG,KAAK;IACpC,oBACE,6BAAC,sBAAM;MACL,GAAG,EAAEA,GAAI;MACT,EAAE,EAAEtE,UAAW;MACf,EAAE,EAAEA,UAAW;MACf,CAAC,EAAEnB,MAAO;MACV,MAAM,EAAEE,SAAU;MAClB,QAAQ,EAAEqB,QAAQ,GAAIkE,GAAG,GAAG,GAAG,GAAIrF,QAAS;MAC5C,MAAM,EAAG,GAAEe,UAAW,KAAIA,UAAW,EAAE;MACvC,WAAW,EAAElB,WAAY;MACzB,eAAe,EAAEmB,mBAAoB;MACrC,gBAAgB,EACdA,mBAAmB,GACnBA,mBAAmB,GAAGhB,QAAQ,GAC9BC,WACD;MACD,aAAa,EAAC;IAAO,EACrB;EAEN,CAAC,CAAC,EACD6E,WAAW,EAEX,CAAA5E,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEoE,IAAI,MAAK,IAAI,iBACvB,yEACE,6BAAC,eAAe;IACd,MAAM,EAAEvE,aAAc;IACtB,GAAG,EAAEa,kBAAmB;IACxB,IAAI,EAAC;EAAO,EACZ,eACF,6BAAC,qBAAK;IAAC,MAAM,EAAEb,aAAc;IAAC,IAAI,EAAEA,aAAc;IAAC,GAAG,EAAEc;EAAS,EAAG,CAEvE,CACC,CACA;AAEV,CAAC;AAAC,4BAEa,IAAA4E,WAAI,gBAAC,IAAAC,iBAAU,EAACjG,sBAAsB,CAAC,CAAC;AAAA;AAEvD,MAAM+F,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BzF,eAAe,EAAE;IACf0F,MAAM,EAAE,MAAM;IACdC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}
|
package/lib/module/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { Animated, Easing, StyleSheet, View } from 'react-native';
|
|
|
4
4
|
import Svg, { Circle, G, TSpan } from 'react-native-svg';
|
|
5
5
|
import { getArcEndCoordinates, getPathValues } from './helpers';
|
|
6
6
|
const IndicatorCircle = Animated.createAnimatedComponent(Circle);
|
|
7
|
-
const
|
|
7
|
+
const ProgressCircle = Animated.createAnimatedComponent(Circle);
|
|
8
8
|
const max = 100;
|
|
9
9
|
const duration = 1200;
|
|
10
10
|
const RNSegmentedProgressBar = (props, ref) => {
|
|
@@ -20,14 +20,14 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
20
20
|
} = props;
|
|
21
21
|
const circleRef = useRef([]);
|
|
22
22
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
23
|
-
const
|
|
23
|
+
const progressAnimatedValues = useRef([...Array(segments)].map(() => new Animated.Value(0))).current;
|
|
24
24
|
const indicatorCircleRef = useRef(null);
|
|
25
25
|
const tSpanRef = useRef(null);
|
|
26
26
|
const indicatorSegmentsGap = (indicator === null || indicator === void 0 ? void 0 : indicator.radius) ?? 0;
|
|
27
27
|
const halfCircle = radius + strokeWidth + indicatorSegmentsGap;
|
|
28
28
|
const circleCircumference = 2 * Math.PI * radius;
|
|
29
29
|
const rotation = -90 + 180 * (segmentsGap / 2 / radius) / Math.PI;
|
|
30
|
-
const
|
|
30
|
+
const getProgressValues = useCallback(progress => getPathValues(progress, max, segments), [segments]);
|
|
31
31
|
const progressDelay = 10;
|
|
32
32
|
const animation = useCallback((animatedVal, toValue, delay, durationValue) => {
|
|
33
33
|
return Animated.timing(animatedVal, {
|
|
@@ -41,13 +41,13 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
41
41
|
useEffect(() => {
|
|
42
42
|
() => {
|
|
43
43
|
animatedValue.removeAllListeners();
|
|
44
|
-
|
|
44
|
+
progressAnimatedValues.forEach(progressAnimatedValue => progressAnimatedValue.removeAllListeners());
|
|
45
45
|
};
|
|
46
|
-
}, [animatedValue,
|
|
46
|
+
}, [animatedValue, progressAnimatedValues]);
|
|
47
47
|
const getMeanSegmentsGap = useCallback(progress => {
|
|
48
|
-
const pathValues =
|
|
48
|
+
const pathValues = getProgressValues(progress);
|
|
49
49
|
return (progress / pathValues.filter(val => val > 0).length || 1) * segments * segmentsGap / 100;
|
|
50
|
-
}, [
|
|
50
|
+
}, [getProgressValues, segments, segmentsGap]);
|
|
51
51
|
const runIndicator = useCallback((calculatedStrokeDashoffset, val) => {
|
|
52
52
|
const {
|
|
53
53
|
x: cx,
|
|
@@ -73,7 +73,6 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
73
73
|
dy: cy + 5,
|
|
74
74
|
font: {
|
|
75
75
|
textAnchor: 'middle',
|
|
76
|
-
// fontFamily: Font.CircularMedium,
|
|
77
76
|
fontSize: 18
|
|
78
77
|
}
|
|
79
78
|
});
|
|
@@ -83,15 +82,15 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
83
82
|
let {
|
|
84
83
|
progress
|
|
85
84
|
} = _ref;
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
const circleProgressValues = getProgressValues(progress);
|
|
86
|
+
progressAnimatedValues.forEach((progressAnimated, index) => {
|
|
87
|
+
progressAnimated.addListener(v => {
|
|
89
88
|
if (circleRef !== null && circleRef !== void 0 && circleRef.current[index]) {
|
|
90
89
|
var _circleRef$current$in;
|
|
91
90
|
var strokeDashoffset = circleCircumference;
|
|
92
|
-
var val = v.value <= (
|
|
93
|
-
strokeDashoffset =
|
|
94
|
-
const paintedLength = circleCircumference - strokeDashoffset - segments * (
|
|
91
|
+
var val = v.value <= (circleProgressValues[index] ?? 0) ? v.value : circleProgressValues[index] ?? 0;
|
|
92
|
+
strokeDashoffset = circleProgressValues[index] ? circleCircumference - circleCircumference * val / 100 : circleCircumference;
|
|
93
|
+
const paintedLength = circleCircumference - strokeDashoffset - segments * (circleProgressValues[index] ?? 0) * segmentsGap / 100;
|
|
95
94
|
|
|
96
95
|
//@ts-ignore
|
|
97
96
|
circleRef === null || circleRef === void 0 ? void 0 : (_circleRef$current$in = circleRef.current[index]) === null || _circleRef$current$in === void 0 ? void 0 : _circleRef$current$in.setNativeProps({
|
|
@@ -112,14 +111,14 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
112
111
|
});
|
|
113
112
|
}
|
|
114
113
|
|
|
115
|
-
// Animate
|
|
116
|
-
const
|
|
114
|
+
// Animate circles sequentially
|
|
115
|
+
const progressAnimations = Animated.sequence(progressAnimatedValues.map((tav, index) => animation(tav,
|
|
117
116
|
// Animated value
|
|
118
|
-
|
|
117
|
+
circleProgressValues[index] ?? 0,
|
|
119
118
|
// To value
|
|
120
119
|
index === 0 ? progressDelay : 0,
|
|
121
120
|
// Delay
|
|
122
|
-
duration * (
|
|
121
|
+
duration * (circleProgressValues[index] ?? 0) / max // Duration
|
|
123
122
|
)));
|
|
124
123
|
|
|
125
124
|
if (indicator !== null && indicator !== void 0 && indicator.show) {
|
|
@@ -132,14 +131,14 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
132
131
|
// Delay
|
|
133
132
|
duration * progress / max // Duration
|
|
134
133
|
);
|
|
135
|
-
//
|
|
136
|
-
Animated.parallel([
|
|
134
|
+
// Progress Animations run parallelly with percentage circle
|
|
135
|
+
Animated.parallel([progressAnimations, percentageAnim]).start();
|
|
137
136
|
} else {
|
|
138
|
-
|
|
137
|
+
progressAnimations.start();
|
|
139
138
|
}
|
|
140
|
-
}, [animatedValue, animation, segments, circleCircumference, segmentsGap, getMeanSegmentsGap, indicator === null || indicator === void 0 ? void 0 : indicator.show,
|
|
141
|
-
const
|
|
142
|
-
const
|
|
139
|
+
}, [animatedValue, animation, segments, circleCircumference, segmentsGap, getMeanSegmentsGap, indicator === null || indicator === void 0 ? void 0 : indicator.show, getProgressValues, runIndicator, progressAnimatedValues]);
|
|
140
|
+
const getProgress = useMemo(() => {
|
|
141
|
+
const progressConfig = {
|
|
143
142
|
stroke: progressColor,
|
|
144
143
|
cx: halfCircle,
|
|
145
144
|
cy: halfCircle,
|
|
@@ -149,16 +148,16 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
149
148
|
strokeDasharray: circleCircumference,
|
|
150
149
|
strokeDashoffset: circleCircumference
|
|
151
150
|
};
|
|
152
|
-
return
|
|
151
|
+
return progressAnimatedValues.map((_, key) => /*#__PURE__*/React.createElement(ProgressCircle, _extends({
|
|
153
152
|
key: key
|
|
154
153
|
//@ts-ignore
|
|
155
154
|
,
|
|
156
155
|
ref: el => circleRef.current[key] = el
|
|
157
|
-
},
|
|
156
|
+
}, progressConfig, {
|
|
158
157
|
rotation: rotation + key * 360 / segments,
|
|
159
158
|
strokeLinecap: "round"
|
|
160
159
|
})));
|
|
161
|
-
}, [segments, circleCircumference, halfCircle, progressColor, radius, rotation, strokeWidth,
|
|
160
|
+
}, [segments, circleCircumference, halfCircle, progressColor, radius, rotation, strokeWidth, progressAnimatedValues]);
|
|
162
161
|
useImperativeHandle(ref, () => ({
|
|
163
162
|
run
|
|
164
163
|
}));
|
|
@@ -183,7 +182,7 @@ const RNSegmentedProgressBar = (props, ref) => {
|
|
|
183
182
|
strokeDashoffset: circleCircumference - circleCircumference / segments + segmentsGap,
|
|
184
183
|
strokeLinecap: "round"
|
|
185
184
|
});
|
|
186
|
-
}),
|
|
185
|
+
}), getProgress, (indicator === null || indicator === void 0 ? void 0 : indicator.show) === true && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IndicatorCircle, {
|
|
187
186
|
stroke: progressColor,
|
|
188
187
|
ref: indicatorCircleRef,
|
|
189
188
|
fill: "white"
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","memo","useCallback","useEffect","useImperativeHandle","useMemo","useRef","Animated","Easing","StyleSheet","View","Svg","Circle","G","TSpan","getArcEndCoordinates","getPathValues","IndicatorCircle","createAnimatedComponent","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","memo","useCallback","useEffect","useImperativeHandle","useMemo","useRef","Animated","Easing","StyleSheet","View","Svg","Circle","G","TSpan","getArcEndCoordinates","getPathValues","IndicatorCircle","createAnimatedComponent","ProgressCircle","max","duration","RNSegmentedProgressBar","props","ref","radius","strokeWidth","baseColor","progressColor","segments","segmentsGap","indicator","centerComponent","circleRef","animatedValue","Value","current","progressAnimatedValues","Array","map","indicatorCircleRef","tSpanRef","indicatorSegmentsGap","halfCircle","circleCircumference","Math","PI","rotation","getProgressValues","progress","progressDelay","animation","animatedVal","toValue","delay","durationValue","timing","useNativeDriver","easing","linear","removeAllListeners","forEach","progressAnimatedValue","getMeanSegmentsGap","pathValues","filter","val","length","runIndicator","calculatedStrokeDashoffset","x","cx","y","cy","calculatedProgress","round","setNativeProps","r","children","dx","dy","font","textAnchor","fontSize","run","circleProgressValues","progressAnimated","index","addListener","v","strokeDashoffset","value","paintedLength","show","meanSegmentsGap","progressAnimations","sequence","tav","percentageAnim","parallel","start","getProgress","progressConfig","stroke","origin","strokeDasharray","_","key","el","styles","create","height","justifyContent","alignItems"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
interface Indicator {
|
|
3
3
|
show?: boolean;
|
|
4
4
|
radius?: number;
|
|
@@ -12,7 +12,7 @@ interface RNSegmentedProgressBarProps {
|
|
|
12
12
|
progressColor?: string;
|
|
13
13
|
segments?: number;
|
|
14
14
|
segmentsGap?: number;
|
|
15
|
-
centerComponent?:
|
|
15
|
+
centerComponent?: JSX.Element;
|
|
16
16
|
indicator?: Indicator;
|
|
17
17
|
}
|
|
18
18
|
export type RunAnimationHandler = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAKf,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnD,CAAC;;AAySF,wBAAwD"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@baby-journey/rn-segmented-progress-bar",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.5",
|
|
4
|
+
"description": "Animated circular progress bar with segments",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
7
7
|
"types": "lib/typescript/index.d.ts",
|
|
@@ -38,11 +38,18 @@
|
|
|
38
38
|
"keywords": [
|
|
39
39
|
"react-native",
|
|
40
40
|
"ios",
|
|
41
|
-
"android"
|
|
41
|
+
"android",
|
|
42
|
+
"progress",
|
|
43
|
+
"segmented",
|
|
44
|
+
"circular",
|
|
45
|
+
"animated",
|
|
46
|
+
"animation",
|
|
47
|
+
"svg",
|
|
48
|
+
"babyjourney"
|
|
42
49
|
],
|
|
43
50
|
"repository": "https://github.com/baby-journey/rn-segmented-progress-bar",
|
|
44
51
|
"author": "charithAmila <dkcadissanayaka@gmail.com> (https://github.com/charithAmila)",
|
|
45
|
-
"license": "
|
|
52
|
+
"license": "GPL-3.0",
|
|
46
53
|
"bugs": {
|
|
47
54
|
"url": "https://github.com/baby-journey/rn-segmented-progress-bar/issues"
|
|
48
55
|
},
|
package/src/index.tsx
CHANGED
|
@@ -2,7 +2,6 @@ import React, {
|
|
|
2
2
|
forwardRef,
|
|
3
3
|
ForwardRefRenderFunction,
|
|
4
4
|
memo,
|
|
5
|
-
ReactNode,
|
|
6
5
|
useCallback,
|
|
7
6
|
useEffect,
|
|
8
7
|
useImperativeHandle,
|
|
@@ -27,7 +26,7 @@ interface RNSegmentedProgressBarProps {
|
|
|
27
26
|
progressColor?: string;
|
|
28
27
|
segments?: number;
|
|
29
28
|
segmentsGap?: number;
|
|
30
|
-
centerComponent?:
|
|
29
|
+
centerComponent?: JSX.Element;
|
|
31
30
|
indicator?: Indicator;
|
|
32
31
|
}
|
|
33
32
|
|
|
@@ -36,7 +35,7 @@ export type RunAnimationHandler = {
|
|
|
36
35
|
};
|
|
37
36
|
|
|
38
37
|
const IndicatorCircle = Animated.createAnimatedComponent(Circle);
|
|
39
|
-
const
|
|
38
|
+
const ProgressCircle = Animated.createAnimatedComponent(Circle);
|
|
40
39
|
|
|
41
40
|
const max = 100;
|
|
42
41
|
const duration = 1200;
|
|
@@ -59,7 +58,7 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
59
58
|
const circleRef = useRef([]);
|
|
60
59
|
|
|
61
60
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
62
|
-
const
|
|
61
|
+
const progressAnimatedValues = useRef(
|
|
63
62
|
[...Array(segments)].map(() => new Animated.Value(0))
|
|
64
63
|
).current;
|
|
65
64
|
|
|
@@ -71,7 +70,7 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
71
70
|
const circleCircumference = 2 * Math.PI * radius;
|
|
72
71
|
const rotation = -90 + (180 * (segmentsGap / 2 / radius)) / Math.PI;
|
|
73
72
|
|
|
74
|
-
const
|
|
73
|
+
const getProgressValues = useCallback(
|
|
75
74
|
(progress) => getPathValues(progress, max, segments),
|
|
76
75
|
[segments]
|
|
77
76
|
);
|
|
@@ -99,15 +98,15 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
99
98
|
useEffect(() => {
|
|
100
99
|
() => {
|
|
101
100
|
animatedValue.removeAllListeners();
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
progressAnimatedValues.forEach((progressAnimatedValue) =>
|
|
102
|
+
progressAnimatedValue.removeAllListeners()
|
|
104
103
|
);
|
|
105
104
|
};
|
|
106
|
-
}, [animatedValue,
|
|
105
|
+
}, [animatedValue, progressAnimatedValues]);
|
|
107
106
|
|
|
108
107
|
const getMeanSegmentsGap = useCallback(
|
|
109
108
|
(progress: number) => {
|
|
110
|
-
const pathValues =
|
|
109
|
+
const pathValues = getProgressValues(progress);
|
|
111
110
|
return (
|
|
112
111
|
((progress / pathValues.filter((val) => val > 0).length || 1) *
|
|
113
112
|
segments *
|
|
@@ -115,7 +114,7 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
115
114
|
100
|
|
116
115
|
);
|
|
117
116
|
},
|
|
118
|
-
[
|
|
117
|
+
[getProgressValues, segments, segmentsGap]
|
|
119
118
|
);
|
|
120
119
|
|
|
121
120
|
const runIndicator = useCallback(
|
|
@@ -150,7 +149,6 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
150
149
|
dy: cy + 5,
|
|
151
150
|
font: {
|
|
152
151
|
textAnchor: 'middle',
|
|
153
|
-
// fontFamily: Font.CircularMedium,
|
|
154
152
|
fontSize: 18,
|
|
155
153
|
},
|
|
156
154
|
});
|
|
@@ -161,24 +159,24 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
161
159
|
|
|
162
160
|
const run = useCallback(
|
|
163
161
|
({ progress }: { progress: number }): void => {
|
|
164
|
-
const
|
|
165
|
-
|
|
166
|
-
|
|
162
|
+
const circleProgressValues = getProgressValues(progress);
|
|
163
|
+
progressAnimatedValues.forEach((progressAnimated, index) => {
|
|
164
|
+
progressAnimated.addListener((v) => {
|
|
167
165
|
if (circleRef?.current[index]) {
|
|
168
166
|
var strokeDashoffset = circleCircumference;
|
|
169
167
|
|
|
170
168
|
var val =
|
|
171
|
-
v.value <= (
|
|
169
|
+
v.value <= (circleProgressValues[index] ?? 0)
|
|
172
170
|
? v.value
|
|
173
|
-
:
|
|
174
|
-
strokeDashoffset =
|
|
171
|
+
: circleProgressValues[index] ?? 0;
|
|
172
|
+
strokeDashoffset = circleProgressValues[index]
|
|
175
173
|
? circleCircumference - (circleCircumference * val) / 100
|
|
176
174
|
: circleCircumference;
|
|
177
175
|
|
|
178
176
|
const paintedLength =
|
|
179
177
|
circleCircumference -
|
|
180
178
|
strokeDashoffset -
|
|
181
|
-
(segments * (
|
|
179
|
+
(segments * (circleProgressValues[index] ?? 0) * segmentsGap) /
|
|
182
180
|
100;
|
|
183
181
|
|
|
184
182
|
//@ts-ignore
|
|
@@ -207,14 +205,14 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
207
205
|
});
|
|
208
206
|
}
|
|
209
207
|
|
|
210
|
-
// Animate
|
|
211
|
-
const
|
|
212
|
-
|
|
208
|
+
// Animate circles sequentially
|
|
209
|
+
const progressAnimations = Animated.sequence(
|
|
210
|
+
progressAnimatedValues.map((tav, index) =>
|
|
213
211
|
animation(
|
|
214
212
|
tav, // Animated value
|
|
215
|
-
|
|
213
|
+
circleProgressValues[index] ?? 0, // To value
|
|
216
214
|
index === 0 ? progressDelay : 0, // Delay
|
|
217
|
-
(duration * (
|
|
215
|
+
(duration * (circleProgressValues[index] ?? 0)) / max // Duration
|
|
218
216
|
)
|
|
219
217
|
)
|
|
220
218
|
);
|
|
@@ -227,10 +225,10 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
227
225
|
progressDelay, // Delay
|
|
228
226
|
(duration * progress) / max // Duration
|
|
229
227
|
);
|
|
230
|
-
//
|
|
231
|
-
Animated.parallel([
|
|
228
|
+
// Progress Animations run parallelly with percentage circle
|
|
229
|
+
Animated.parallel([progressAnimations, percentageAnim]).start();
|
|
232
230
|
} else {
|
|
233
|
-
|
|
231
|
+
progressAnimations.start();
|
|
234
232
|
}
|
|
235
233
|
},
|
|
236
234
|
[
|
|
@@ -241,14 +239,14 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
241
239
|
segmentsGap,
|
|
242
240
|
getMeanSegmentsGap,
|
|
243
241
|
indicator?.show,
|
|
244
|
-
|
|
242
|
+
getProgressValues,
|
|
245
243
|
runIndicator,
|
|
246
|
-
|
|
244
|
+
progressAnimatedValues,
|
|
247
245
|
]
|
|
248
246
|
);
|
|
249
247
|
|
|
250
|
-
const
|
|
251
|
-
const
|
|
248
|
+
const getProgress = useMemo(() => {
|
|
249
|
+
const progressConfig = {
|
|
252
250
|
stroke: progressColor,
|
|
253
251
|
cx: halfCircle,
|
|
254
252
|
cy: halfCircle,
|
|
@@ -259,12 +257,12 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
259
257
|
strokeDashoffset: circleCircumference,
|
|
260
258
|
};
|
|
261
259
|
|
|
262
|
-
return
|
|
263
|
-
<
|
|
260
|
+
return progressAnimatedValues.map((_, key) => (
|
|
261
|
+
<ProgressCircle
|
|
264
262
|
key={key}
|
|
265
263
|
//@ts-ignore
|
|
266
264
|
ref={(el) => (circleRef.current[key] = el)}
|
|
267
|
-
{...
|
|
265
|
+
{...progressConfig}
|
|
268
266
|
rotation={rotation + (key * 360) / segments}
|
|
269
267
|
strokeLinecap="round"
|
|
270
268
|
/>
|
|
@@ -277,7 +275,7 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
277
275
|
radius,
|
|
278
276
|
rotation,
|
|
279
277
|
strokeWidth,
|
|
280
|
-
|
|
278
|
+
progressAnimatedValues,
|
|
281
279
|
]);
|
|
282
280
|
|
|
283
281
|
useImperativeHandle(ref, () => ({ run }));
|
|
@@ -314,7 +312,7 @@ const RNSegmentedProgressBar: ForwardRefRenderFunction<
|
|
|
314
312
|
/>
|
|
315
313
|
);
|
|
316
314
|
})}
|
|
317
|
-
{
|
|
315
|
+
{getProgress}
|
|
318
316
|
|
|
319
317
|
{indicator?.show === true && (
|
|
320
318
|
<>
|