related-ui-components 3.0.2 → 3.0.3
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/lib/module/components/ProgressBar/CircularProgressBar.js +10 -7
- package/lib/module/components/ProgressBar/CircularProgressBar.js.map +1 -1
- package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts +1 -0
- package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ProgressBar/CircularProgressBar.tsx +34 -14
|
@@ -24,7 +24,8 @@ const CircularProgressBar = ({
|
|
|
24
24
|
progressPadding = 0,
|
|
25
25
|
currentStep = 0,
|
|
26
26
|
totalSteps = 4,
|
|
27
|
-
stepGap = 15
|
|
27
|
+
stepGap = 15,
|
|
28
|
+
fontFamily
|
|
28
29
|
}) => {
|
|
29
30
|
const {
|
|
30
31
|
theme
|
|
@@ -62,7 +63,7 @@ const CircularProgressBar = ({
|
|
|
62
63
|
});
|
|
63
64
|
const getInitialText = () => {
|
|
64
65
|
if (customText !== undefined) return customText;
|
|
65
|
-
if (variant ===
|
|
66
|
+
if (variant === "steps") return `${currentStep}/${totalSteps}`;
|
|
66
67
|
return `${progress}%`;
|
|
67
68
|
};
|
|
68
69
|
const renderSteps = () => {
|
|
@@ -129,8 +130,8 @@ const CircularProgressBar = ({
|
|
|
129
130
|
style: [{
|
|
130
131
|
width: size,
|
|
131
132
|
height: size,
|
|
132
|
-
justifyContent:
|
|
133
|
-
alignItems:
|
|
133
|
+
justifyContent: "center",
|
|
134
|
+
alignItems: "center"
|
|
134
135
|
}, style],
|
|
135
136
|
children: [/*#__PURE__*/_jsx(Canvas, {
|
|
136
137
|
style: StyleSheet.absoluteFill,
|
|
@@ -138,12 +139,14 @@ const CircularProgressBar = ({
|
|
|
138
139
|
}), /*#__PURE__*/_jsx(AnimatedTextInput, {
|
|
139
140
|
editable: false,
|
|
140
141
|
defaultValue: getInitialText(),
|
|
141
|
-
style: {
|
|
142
|
+
style: [{
|
|
142
143
|
color: finalTextColor,
|
|
143
144
|
fontSize: fontSize,
|
|
144
|
-
textAlign:
|
|
145
|
+
textAlign: "center",
|
|
145
146
|
padding: 0
|
|
146
|
-
},
|
|
147
|
+
}, fontFamily && {
|
|
148
|
+
fontFamily
|
|
149
|
+
}],
|
|
147
150
|
animatedProps: animatedProps
|
|
148
151
|
})]
|
|
149
152
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","StyleSheet","TextInput","View","Canvas","DashPathEffect","Path","Shadow","Skia","Animated","Easing","useAnimatedProps","useDerivedValue","useSharedValue","withTiming","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AnimatedTextInput","createAnimatedComponent","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","theme","animatedValue","finalProgressColor","primary","finalBackgroundColor","disabled","finalTextColor","onSurface","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","textToDisplay","undefined","displayStep","round","animatedProps","text","getInitialText","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","width","height","justifyContent","alignItems","absoluteFill","editable","defaultValue","textAlign","padding"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,SAAS,EAAEC,IAAI,QAAmB,cAAc;AACrE,
|
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","TextInput","View","Canvas","DashPathEffect","Path","Shadow","Skia","Animated","Easing","useAnimatedProps","useDerivedValue","useSharedValue","withTiming","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AnimatedTextInput","createAnimatedComponent","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","fontFamily","theme","animatedValue","finalProgressColor","primary","finalBackgroundColor","disabled","finalTextColor","onSurface","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","textToDisplay","undefined","displayStep","round","animatedProps","text","getInitialText","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","width","height","justifyContent","alignItems","absoluteFill","editable","defaultValue","textAlign","padding"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;AAmBtE,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgK3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import React, { useEffect } from "react";
|
|
2
2
|
import { StyleSheet, TextInput, View, ViewStyle } from "react-native";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
Canvas,
|
|
5
|
+
DashPathEffect,
|
|
6
|
+
Path,
|
|
7
|
+
Shadow,
|
|
8
|
+
Skia,
|
|
9
|
+
} from "@shopify/react-native-skia";
|
|
4
10
|
import Animated, {
|
|
5
11
|
Easing,
|
|
6
12
|
useAnimatedProps,
|
|
@@ -30,6 +36,7 @@ interface CircularProgressBarProps {
|
|
|
30
36
|
currentStep?: number;
|
|
31
37
|
totalSteps?: number;
|
|
32
38
|
stepGap?: number;
|
|
39
|
+
fontFamily?: string;
|
|
33
40
|
}
|
|
34
41
|
|
|
35
42
|
const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
@@ -50,6 +57,7 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
50
57
|
currentStep = 0,
|
|
51
58
|
totalSteps = 4,
|
|
52
59
|
stepGap = 15,
|
|
60
|
+
fontFamily,
|
|
53
61
|
}) => {
|
|
54
62
|
const { theme } = useTheme();
|
|
55
63
|
const animatedValue = useSharedValue(0);
|
|
@@ -67,9 +75,7 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
67
75
|
|
|
68
76
|
useEffect(() => {
|
|
69
77
|
const targetValue =
|
|
70
|
-
variant === "steps"
|
|
71
|
-
? currentStep / (totalSteps || 1)
|
|
72
|
-
: progress / 100;
|
|
78
|
+
variant === "steps" ? currentStep / (totalSteps || 1) : progress / 100;
|
|
73
79
|
animatedValue.value = withTiming(targetValue, {
|
|
74
80
|
duration,
|
|
75
81
|
easing: Easing.out(Easing.cubic),
|
|
@@ -90,12 +96,12 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
90
96
|
const animatedProps = useAnimatedProps(() => {
|
|
91
97
|
return {
|
|
92
98
|
text: textToDisplay.value,
|
|
93
|
-
} as any;
|
|
99
|
+
} as any;
|
|
94
100
|
});
|
|
95
101
|
|
|
96
102
|
const getInitialText = () => {
|
|
97
103
|
if (customText !== undefined) return customText;
|
|
98
|
-
if (variant ===
|
|
104
|
+
if (variant === "steps") return `${currentStep}/${totalSteps}`;
|
|
99
105
|
return `${progress}%`;
|
|
100
106
|
};
|
|
101
107
|
|
|
@@ -162,23 +168,37 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
162
168
|
);
|
|
163
169
|
|
|
164
170
|
return (
|
|
165
|
-
<View
|
|
171
|
+
<View
|
|
172
|
+
style={[
|
|
173
|
+
{
|
|
174
|
+
width: size,
|
|
175
|
+
height: size,
|
|
176
|
+
justifyContent: "center",
|
|
177
|
+
alignItems: "center",
|
|
178
|
+
},
|
|
179
|
+
style,
|
|
180
|
+
]}
|
|
181
|
+
>
|
|
166
182
|
<Canvas style={StyleSheet.absoluteFill}>
|
|
167
183
|
{variant === "steps" ? renderSteps() : renderProgress()}
|
|
168
184
|
</Canvas>
|
|
169
185
|
<AnimatedTextInput
|
|
170
186
|
editable={false}
|
|
171
187
|
defaultValue={getInitialText()}
|
|
172
|
-
style={
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
188
|
+
style={[
|
|
189
|
+
{
|
|
190
|
+
color: finalTextColor,
|
|
191
|
+
fontSize: fontSize,
|
|
192
|
+
|
|
193
|
+
textAlign: "center",
|
|
194
|
+
padding: 0,
|
|
195
|
+
},
|
|
196
|
+
fontFamily && { fontFamily },
|
|
197
|
+
]}
|
|
178
198
|
animatedProps={animatedProps}
|
|
179
199
|
/>
|
|
180
200
|
</View>
|
|
181
201
|
);
|
|
182
202
|
};
|
|
183
203
|
|
|
184
|
-
export default CircularProgressBar;
|
|
204
|
+
export default CircularProgressBar;
|