related-ui-components 2.5.8 → 2.6.0
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/app.js +5 -2
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/ProgressBar/CircularProgressBar.js +95 -35
- package/lib/module/components/ProgressBar/CircularProgressBar.js.map +1 -1
- package/lib/module/contexts/BottomSheetStackContext.js.map +1 -1
- package/lib/module/contexts/BottomSheetStackProvider.js +2 -1
- package/lib/module/contexts/BottomSheetStackProvider.js.map +1 -1
- package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts +7 -3
- package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts.map +1 -1
- package/lib/typescript/src/contexts/BottomSheetStackContext.d.ts +2 -0
- package/lib/typescript/src/contexts/BottomSheetStackContext.d.ts.map +1 -1
- package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/app.tsx +1 -1
- package/src/components/ProgressBar/CircularProgressBar.tsx +117 -39
- package/src/contexts/BottomSheetStackContext.tsx +3 -0
- package/src/contexts/BottomSheetStackProvider.tsx +2 -1
- package/src/index.ts +1 -1
package/lib/module/app.js
CHANGED
|
@@ -64,8 +64,11 @@ const App = () => {
|
|
|
64
64
|
}), /*#__PURE__*/_jsx(SafeAreaView, {
|
|
65
65
|
style: styles.appContainer,
|
|
66
66
|
children: /*#__PURE__*/_jsx(CircularProgressBar, {
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
variant: "steps",
|
|
68
|
+
totalSteps: 4,
|
|
69
|
+
currentStep: 4,
|
|
70
|
+
size: 43,
|
|
71
|
+
strokeWidth: 2,
|
|
69
72
|
progressColor: "#9CA0A3"
|
|
70
73
|
})
|
|
71
74
|
})]
|
package/lib/module/app.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","strokeWidth","progressColor","create","backgroundColor","justifyContent"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AACgB;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAUrE,SAASC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC/D,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;;AAEjE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,MAAMC,UAAU,GAAG,CACjB;EACEC,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,CACD;AAED,MAAMC,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAChDyB,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAAqByB,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAM8B,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EACD,oBACEnB,IAAA,CAAAI,SAAA;IAAAmB,QAAA,eACAvB,IAAA,CAACF,gBAAgB;MAAAyB,QAAA,eACfvB,IAAA,CAACR,sBAAsB;QAACgC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzCvB,IAAA,CAACN,eAAe;UAACgB,KAAK,EAAEjB,UAAW;UAAA8B,QAAA,eACjCrB,KAAA,CAACL,wBAAwB;YAAA0B,QAAA,gBACvBvB,IAAA,CAACT,SAAS;cAACmC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC1B,IAAA,CAACX,YAAY;cAACmC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eA+CvCvB,IAAA,CAACJ,mBAAmB;
|
|
1
|
+
{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","variant","totalSteps","currentStep","size","strokeWidth","progressColor","create","backgroundColor","justifyContent"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AACgB;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAUrE,SAASC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC/D,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;;AAEjE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,MAAMC,UAAU,GAAG,CACjB;EACEC,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,CACD;AAED,MAAMC,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAChDyB,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAAqByB,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAM8B,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EACD,oBACEnB,IAAA,CAAAI,SAAA;IAAAmB,QAAA,eACAvB,IAAA,CAACF,gBAAgB;MAAAyB,QAAA,eACfvB,IAAA,CAACR,sBAAsB;QAACgC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzCvB,IAAA,CAACN,eAAe;UAACgB,KAAK,EAAEjB,UAAW;UAAA8B,QAAA,eACjCrB,KAAA,CAACL,wBAAwB;YAAA0B,QAAA,gBACvBvB,IAAA,CAACT,SAAS;cAACmC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC1B,IAAA,CAACX,YAAY;cAACmC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eA+CvCvB,IAAA,CAACJ,mBAAmB;gBAACiC,OAAO,EAAC,OAAO;gBAACC,UAAU,EAAE,CAAE;gBAACC,WAAW,EAAE,CAAE;gBAACC,IAAI,EAAE,EAAG;gBAAEC,WAAW,EAAE,CAAE;gBAACC,aAAa,EAAC;cAAS,CAAsB;YAAC,CAEjI,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACP;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMP,MAAM,GAAGrC,UAAU,CAAC6C,MAAM,CAAC;EAC/BP,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPW,eAAe,EAAC,MAAM;IACtBC,cAAc,EAAE,QAAQ,CAAE;EAC5B;AACF,CAAC,CAAC;AAEF,eAAe5B,GAAG","ignoreList":[]}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from "react";
|
|
4
|
-
import { Canvas, matchFont, Path, Shadow, Skia, Text, useFont } from "@shopify/react-native-skia";
|
|
4
|
+
import { Canvas, matchFont, Path, Shadow, Skia, Text, useFont, DashPathEffect } from "@shopify/react-native-skia";
|
|
5
5
|
import { useSharedValue, withTiming, useDerivedValue, Easing } from "react-native-reanimated";
|
|
6
6
|
import { Platform } from "react-native";
|
|
7
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
8
8
|
const CircularProgressBar = ({
|
|
9
9
|
size = 120,
|
|
10
10
|
strokeWidth = 8,
|
|
11
|
-
progress = 0,
|
|
12
|
-
duration = 1000,
|
|
13
11
|
backgroundColor = "#E5E7EB",
|
|
14
12
|
progressColor = "#3B82F6",
|
|
15
13
|
lineCap = "round",
|
|
@@ -18,10 +16,16 @@ const CircularProgressBar = ({
|
|
|
18
16
|
fontSize = size / 4,
|
|
19
17
|
textFont,
|
|
20
18
|
style,
|
|
19
|
+
innerShadowColor,
|
|
20
|
+
duration = 1000,
|
|
21
|
+
variant = "progress",
|
|
22
|
+
progress = 0,
|
|
21
23
|
progressPadding = 0,
|
|
22
|
-
|
|
24
|
+
currentStep = 0,
|
|
25
|
+
totalSteps = 4,
|
|
26
|
+
stepGap = 15 // Gap of 15 degrees between steps
|
|
23
27
|
}) => {
|
|
24
|
-
const
|
|
28
|
+
const animatedValue = useSharedValue(0);
|
|
25
29
|
const customFont = useFont(textFont, fontSize);
|
|
26
30
|
const font = textFont ? customFont : matchFont({
|
|
27
31
|
fontFamily: Platform.select({
|
|
@@ -31,53 +35,109 @@ const CircularProgressBar = ({
|
|
|
31
35
|
fontSize: fontSize
|
|
32
36
|
});
|
|
33
37
|
const radius = (size - strokeWidth) / 2;
|
|
38
|
+
const circumference = 2 * Math.PI * radius;
|
|
34
39
|
const path = Skia.Path.Make();
|
|
35
40
|
path.addCircle(size / 2, size / 2, radius);
|
|
36
41
|
const progressStrokeWidth = Math.max(0, strokeWidth - progressPadding * 2);
|
|
37
42
|
useEffect(() => {
|
|
38
|
-
|
|
43
|
+
const targetValue = variant === "steps" ? currentStep / (totalSteps || 1) : progress / 100;
|
|
44
|
+
animatedValue.value = withTiming(targetValue, {
|
|
39
45
|
duration,
|
|
40
46
|
easing: Easing.out(Easing.cubic)
|
|
41
47
|
});
|
|
42
|
-
}, [progress, duration]);
|
|
43
|
-
|
|
44
|
-
|
|
48
|
+
}, [progress, currentStep, totalSteps, duration, variant]);
|
|
49
|
+
|
|
50
|
+
// --- Text Logic ---
|
|
51
|
+
const textToDisplay = useDerivedValue(() => {
|
|
52
|
+
if (customText !== undefined) {
|
|
53
|
+
return customText;
|
|
54
|
+
}
|
|
55
|
+
if (variant === "steps") {
|
|
56
|
+
// Round the animated value to the nearest step for display
|
|
57
|
+
const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
|
|
58
|
+
return `${displayStep}/${totalSteps}`;
|
|
59
|
+
}
|
|
60
|
+
return `${Math.round(animatedValue.value * 100)}%`;
|
|
45
61
|
});
|
|
46
|
-
const textToDisplay = customText !== undefined ? customText : percentageText;
|
|
47
62
|
const textX = useDerivedValue(() => {
|
|
48
63
|
if (!font) return 0;
|
|
49
|
-
const
|
|
50
|
-
const textWidth = font.measureText(text).width;
|
|
64
|
+
const textWidth = font.measureText(textToDisplay.value).width;
|
|
51
65
|
return size / 2 - textWidth / 2;
|
|
52
66
|
});
|
|
53
67
|
const textY = size / 2 + fontSize / 3;
|
|
68
|
+
|
|
69
|
+
// --- Steps Variant Logic ---
|
|
70
|
+
const renderSteps = () => {
|
|
71
|
+
// Calculate the total gap length in the circumference
|
|
72
|
+
const totalGapDegrees = (totalSteps || 1) * stepGap;
|
|
73
|
+
const totalArcDegrees = 360 - totalGapDegrees;
|
|
74
|
+
const stepArcLength = totalArcDegrees / (totalSteps || 1) / 360 * circumference;
|
|
75
|
+
const gapLength = stepGap / 360 * circumference;
|
|
76
|
+
const dashPattern = [stepArcLength, gapLength];
|
|
77
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
78
|
+
children: [/*#__PURE__*/_jsx(Path, {
|
|
79
|
+
path: path,
|
|
80
|
+
style: "stroke",
|
|
81
|
+
strokeWidth: strokeWidth,
|
|
82
|
+
strokeCap: lineCap,
|
|
83
|
+
color: backgroundColor,
|
|
84
|
+
children: /*#__PURE__*/_jsx(DashPathEffect, {
|
|
85
|
+
intervals: dashPattern
|
|
86
|
+
})
|
|
87
|
+
}), /*#__PURE__*/_jsxs(Path, {
|
|
88
|
+
path: path,
|
|
89
|
+
style: "stroke",
|
|
90
|
+
strokeWidth: strokeWidth,
|
|
91
|
+
strokeCap: lineCap,
|
|
92
|
+
color: progressColor,
|
|
93
|
+
start: 0,
|
|
94
|
+
end: animatedValue,
|
|
95
|
+
children: [/*#__PURE__*/_jsx(DashPathEffect, {
|
|
96
|
+
intervals: dashPattern
|
|
97
|
+
}), innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
|
|
98
|
+
dx: 0,
|
|
99
|
+
dy: 0,
|
|
100
|
+
blur: 4,
|
|
101
|
+
color: innerShadowColor,
|
|
102
|
+
inner: true
|
|
103
|
+
})]
|
|
104
|
+
})]
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
// --- Progress Variant Logic ---
|
|
109
|
+
const renderProgress = () => {
|
|
110
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
111
|
+
children: [/*#__PURE__*/_jsx(Path, {
|
|
112
|
+
path: path,
|
|
113
|
+
style: "stroke",
|
|
114
|
+
strokeWidth: strokeWidth,
|
|
115
|
+
strokeCap: lineCap,
|
|
116
|
+
color: backgroundColor
|
|
117
|
+
}), /*#__PURE__*/_jsx(Path, {
|
|
118
|
+
path: path,
|
|
119
|
+
style: "stroke",
|
|
120
|
+
strokeWidth: progressStrokeWidth,
|
|
121
|
+
strokeCap: lineCap,
|
|
122
|
+
color: progressColor,
|
|
123
|
+
start: 0,
|
|
124
|
+
end: animatedValue,
|
|
125
|
+
children: innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
|
|
126
|
+
dx: 0,
|
|
127
|
+
dy: 0,
|
|
128
|
+
blur: 4,
|
|
129
|
+
color: innerShadowColor,
|
|
130
|
+
inner: true
|
|
131
|
+
})
|
|
132
|
+
})]
|
|
133
|
+
});
|
|
134
|
+
};
|
|
54
135
|
return /*#__PURE__*/_jsxs(Canvas, {
|
|
55
136
|
style: [{
|
|
56
137
|
width: size,
|
|
57
138
|
height: size
|
|
58
139
|
}, style],
|
|
59
|
-
children: [/*#__PURE__*/_jsx(
|
|
60
|
-
path: path,
|
|
61
|
-
style: "stroke",
|
|
62
|
-
strokeWidth: strokeWidth,
|
|
63
|
-
strokeCap: lineCap,
|
|
64
|
-
color: backgroundColor
|
|
65
|
-
}), /*#__PURE__*/_jsx(Path, {
|
|
66
|
-
path: path,
|
|
67
|
-
style: "stroke",
|
|
68
|
-
strokeWidth: progressStrokeWidth,
|
|
69
|
-
strokeCap: lineCap,
|
|
70
|
-
color: progressColor,
|
|
71
|
-
start: 0,
|
|
72
|
-
end: animatedProgress,
|
|
73
|
-
children: innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
|
|
74
|
-
dx: 0,
|
|
75
|
-
dy: 0,
|
|
76
|
-
blur: 4,
|
|
77
|
-
color: innerShadowColor,
|
|
78
|
-
inner: true
|
|
79
|
-
})
|
|
80
|
-
}), font && /*#__PURE__*/_jsx(Text, {
|
|
140
|
+
children: [variant === "steps" ? renderSteps() : renderProgress(), font && /*#__PURE__*/_jsx(Text, {
|
|
81
141
|
font: font,
|
|
82
142
|
color: textColor,
|
|
83
143
|
x: textX,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","Canvas","matchFont","Path","Shadow","Skia","Text","useFont","useSharedValue","withTiming","useDerivedValue","Easing","Platform","jsx","_jsx","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"names":["React","useEffect","Canvas","matchFont","Path","Shadow","Skia","Text","useFont","DashPathEffect","useSharedValue","withTiming","useDerivedValue","Easing","Platform","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","textFont","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","animatedValue","customFont","font","fontFamily","select","ios","default","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","textToDisplay","undefined","displayStep","round","textX","textWidth","measureText","width","textY","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","height","x","y","text"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useContext","BottomSheetStackContext","createContext","useBottomSheetStack","context","Error"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackContext.tsx"],"mappings":";;
|
|
1
|
+
{"version":3,"names":["React","useContext","BottomSheetStackContext","createContext","useBottomSheetStack","context","Error"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackContext.tsx"],"mappings":";;AACA,OAAOA,KAAK,IAAeC,UAAU,QAAQ,OAAO;AAmBpD,OAAO,MAAMC,uBAAuB,gBAClCF,KAAK,CAACG,aAAa,CAAqC,IAAI,CAAC;AAE/D,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMC,OAAO,GAAGJ,UAAU,CAACC,uBAAuB,CAAC;EAEnD,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,oEACF,CAAC;EACH;EAEA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -37,7 +37,7 @@ export const BottomSheetStackProvider = ({
|
|
|
37
37
|
const isOpen = stack.length > 0;
|
|
38
38
|
useEffect(() => {
|
|
39
39
|
if (isOpen && currentItem) {
|
|
40
|
-
sheetRef.current?.snapToIndex(0);
|
|
40
|
+
sheetRef.current?.snapToIndex(currentItem.initialSnapIndex ?? 0);
|
|
41
41
|
}
|
|
42
42
|
const backHandlerSubscription = BackHandler.addEventListener("hardwareBackPress", () => {
|
|
43
43
|
if (canGoBack) {
|
|
@@ -73,6 +73,7 @@ export const BottomSheetStackProvider = ({
|
|
|
73
73
|
canGoBack
|
|
74
74
|
},
|
|
75
75
|
children: [children, /*#__PURE__*/_jsx(BottomSheet, {
|
|
76
|
+
...currentItem?.bottomSheetProps,
|
|
76
77
|
ref: sheetRef,
|
|
77
78
|
index: -1,
|
|
78
79
|
snapPoints: currentItem?.snapPoints || ["100%"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","Provider","value","ref","index","snapPoints","enableDynamicSizing","dynamicSizing","enablePanDownToClose","android_keyboardInputMode","enableBlurKeyboardOnGesture","keyboardBlurBehavior","keyboardBehavior","onClose","backdropComponent","topInset","handleIndicatorStyle","styles","sheetContainer","entering","exiting","animatedView","component","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackProvider.tsx"],"mappings":";;AAAA,OAAOA,WAAW,IAChBC,mBAAmB,QAEd,sBAAsB;AAC7B,OAAOC,KAAK,IAEVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,WAAW,EAAEC,UAAU,QAAQ,cAAc;AACtD,OAAOC,QAAQ,IAAIC,MAAM,EAAEC,OAAO,QAAQ,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SACEC,uBAAuB,QAElB,8BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEnC,OAAO,MAAMC,wBAA2D,GAAGA,CAAC;EAC1EC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGf,QAAQ,CAAyB,EAAE,CAAC;EAC9D,MAAMgB,QAAQ,GAAGjB,MAAM,CAAc,IAAI,CAAC;EAC1C,MAAM;IAAEkB;EAAI,CAAC,GAAGX,iBAAiB,CAAC,CAAC;EAEnC,MAAMY,IAAI,GAAGtB,WAAW,CAAEuB,IAA0B,IAAK;IACvDJ,QAAQ,CAAEK,IAAI,IAAK,CAAC,GAAGA,IAAI,EAAED,IAAI,CAAC,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,KAAK,GAAGzB,WAAW,CAAC,MAAM;IAC9BoB,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAAC;IACzBR,QAAQ,CAAC,EAAE,CAAC;EACd,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,GAAG,GAAG5B,WAAW,CAAC,MAAM;IAC5B,IAAIkB,KAAK,CAACW,MAAM,IAAI,CAAC,EAAE;MACrBJ,KAAK,CAAC,CAAC;MACP;IACF;IACAN,QAAQ,CAAEK,IAAI,IAAKA,IAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;EACvC,CAAC,EAAE,CAACZ,KAAK,CAACW,MAAM,EAAEJ,KAAK,CAAC,CAAC;EAEzB,MAAMM,OAAO,GAAG/B,WAAW,CAAEuB,IAA0B,IAAK;IAC1DJ,QAAQ,CAAEK,IAAI,IAAK,CAAC,GAAGA,IAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAEP,IAAI,CAAC,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,WAAW,GAAG9B,OAAO,CAAC,MAAMgB,KAAK,CAACA,KAAK,CAACW,MAAM,GAAG,CAAC,CAAC,EAAE,CAACX,KAAK,CAAC,CAAC;EACnE,MAAMe,SAAS,GAAGf,KAAK,CAACW,MAAM,GAAG,CAAC;EAClC,MAAMK,MAAM,GAAGhB,KAAK,CAACW,MAAM,GAAG,CAAC;EAE/B5B,SAAS,CAAC,MAAM;IACd,IAAIiC,MAAM,IAAIF,WAAW,EAAE;MACzBZ,QAAQ,CAACM,OAAO,EAAES,WAAW,
|
|
1
|
+
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","initialSnapIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","Provider","value","bottomSheetProps","ref","index","snapPoints","enableDynamicSizing","dynamicSizing","enablePanDownToClose","android_keyboardInputMode","enableBlurKeyboardOnGesture","keyboardBlurBehavior","keyboardBehavior","onClose","backdropComponent","topInset","handleIndicatorStyle","styles","sheetContainer","entering","exiting","animatedView","component","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,8 +3,6 @@ import { ImageRequireSource, ViewStyle } from "react-native";
|
|
|
3
3
|
interface CircularProgressBarProps {
|
|
4
4
|
size?: number;
|
|
5
5
|
strokeWidth?: number;
|
|
6
|
-
progress: number;
|
|
7
|
-
duration?: number;
|
|
8
6
|
backgroundColor?: string;
|
|
9
7
|
progressColor?: string;
|
|
10
8
|
lineCap?: "butt" | "round" | "square";
|
|
@@ -13,8 +11,14 @@ interface CircularProgressBarProps {
|
|
|
13
11
|
fontSize?: number;
|
|
14
12
|
textFont?: ImageRequireSource;
|
|
15
13
|
style?: ViewStyle;
|
|
16
|
-
progressPadding?: number;
|
|
17
14
|
innerShadowColor?: string;
|
|
15
|
+
duration?: number;
|
|
16
|
+
variant?: "progress" | "steps";
|
|
17
|
+
progress?: number;
|
|
18
|
+
progressPadding?: number;
|
|
19
|
+
currentStep?: number;
|
|
20
|
+
totalSteps?: number;
|
|
21
|
+
stepGap?: number;
|
|
18
22
|
}
|
|
19
23
|
declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
|
|
20
24
|
export default CircularProgressBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAkBzC,OAAO,EAAE,kBAAkB,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvE,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,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAG/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA8J3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import { BottomSheetProps } from "@gorhom/bottom-sheet";
|
|
1
2
|
import React, { ReactNode } from "react";
|
|
2
3
|
export interface BottomSheetStackItem {
|
|
3
4
|
component: ReactNode;
|
|
4
5
|
snapPoints?: string[] | number[];
|
|
5
6
|
initialSnapIndex?: number;
|
|
6
7
|
dynamicSizing?: boolean;
|
|
8
|
+
bottomSheetProps?: Partial<Omit<BottomSheetProps, "children">>;
|
|
7
9
|
}
|
|
8
10
|
export interface BottomSheetStackContextType {
|
|
9
11
|
push: (item: BottomSheetStackItem) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetStackContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetStackContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC;CAChE;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC3C,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,mDAC2B,CAAC;AAEhE,eAAO,MAAM,mBAAmB,mCAU/B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA2GtE,CAAC"}
|
package/package.json
CHANGED
package/src/app.tsx
CHANGED
|
@@ -119,7 +119,7 @@ const App = () => {
|
|
|
119
119
|
{/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
|
|
120
120
|
{/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
|
|
121
121
|
{/* <CarouselCardStack data={DUMMY_DATA} /> */}
|
|
122
|
-
<CircularProgressBar
|
|
122
|
+
<CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43} strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
|
|
123
123
|
{/* <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput> */}
|
|
124
124
|
</SafeAreaView>
|
|
125
125
|
</BottomSheetStackProvider>
|
|
@@ -7,6 +7,8 @@ import {
|
|
|
7
7
|
Skia,
|
|
8
8
|
Text,
|
|
9
9
|
useFont,
|
|
10
|
+
PathOp,
|
|
11
|
+
DashPathEffect,
|
|
10
12
|
} from "@shopify/react-native-skia";
|
|
11
13
|
import {
|
|
12
14
|
useSharedValue,
|
|
@@ -19,8 +21,6 @@ import { ImageRequireSource, Platform, ViewStyle } from "react-native";
|
|
|
19
21
|
interface CircularProgressBarProps {
|
|
20
22
|
size?: number;
|
|
21
23
|
strokeWidth?: number;
|
|
22
|
-
progress: number; // 0 to 100
|
|
23
|
-
duration?: number;
|
|
24
24
|
backgroundColor?: string;
|
|
25
25
|
progressColor?: string;
|
|
26
26
|
lineCap?: "butt" | "round" | "square";
|
|
@@ -29,15 +29,25 @@ interface CircularProgressBarProps {
|
|
|
29
29
|
fontSize?: number;
|
|
30
30
|
textFont?: ImageRequireSource;
|
|
31
31
|
style?: ViewStyle;
|
|
32
|
+
innerShadowColor?: string;
|
|
33
|
+
duration?: number;
|
|
34
|
+
|
|
35
|
+
// New variant prop
|
|
36
|
+
variant?: "progress" | "steps";
|
|
37
|
+
|
|
38
|
+
// Props for 'progress' variant
|
|
39
|
+
progress?: number; // 0 to 100
|
|
32
40
|
progressPadding?: number;
|
|
33
|
-
|
|
41
|
+
|
|
42
|
+
// Props for 'steps' variant
|
|
43
|
+
currentStep?: number;
|
|
44
|
+
totalSteps?: number;
|
|
45
|
+
stepGap?: number; // The gap between steps in degrees
|
|
34
46
|
}
|
|
35
47
|
|
|
36
48
|
const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
37
49
|
size = 120,
|
|
38
50
|
strokeWidth = 8,
|
|
39
|
-
progress = 0,
|
|
40
|
-
duration = 1000,
|
|
41
51
|
backgroundColor = "#E5E7EB",
|
|
42
52
|
progressColor = "#3B82F6",
|
|
43
53
|
lineCap = "round",
|
|
@@ -46,13 +56,18 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
46
56
|
fontSize = size / 4,
|
|
47
57
|
textFont,
|
|
48
58
|
style,
|
|
59
|
+
innerShadowColor,
|
|
60
|
+
duration = 1000,
|
|
61
|
+
variant = "progress",
|
|
62
|
+
progress = 0,
|
|
49
63
|
progressPadding = 0,
|
|
50
|
-
|
|
64
|
+
currentStep = 0,
|
|
65
|
+
totalSteps = 4,
|
|
66
|
+
stepGap = 15, // Gap of 15 degrees between steps
|
|
51
67
|
}) => {
|
|
52
|
-
const
|
|
68
|
+
const animatedValue = useSharedValue(0);
|
|
53
69
|
|
|
54
70
|
const customFont = useFont(textFont, fontSize);
|
|
55
|
-
|
|
56
71
|
const font = textFont
|
|
57
72
|
? customFont
|
|
58
73
|
: matchFont({
|
|
@@ -61,57 +76,120 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
61
76
|
});
|
|
62
77
|
|
|
63
78
|
const radius = (size - strokeWidth) / 2;
|
|
79
|
+
const circumference = 2 * Math.PI * radius;
|
|
64
80
|
const path = Skia.Path.Make();
|
|
65
81
|
path.addCircle(size / 2, size / 2, radius);
|
|
66
82
|
|
|
67
83
|
const progressStrokeWidth = Math.max(0, strokeWidth - progressPadding * 2);
|
|
68
84
|
|
|
69
85
|
useEffect(() => {
|
|
70
|
-
|
|
86
|
+
const targetValue =
|
|
87
|
+
variant === "steps"
|
|
88
|
+
? currentStep / (totalSteps || 1)
|
|
89
|
+
: progress / 100;
|
|
90
|
+
animatedValue.value = withTiming(targetValue, {
|
|
71
91
|
duration,
|
|
72
92
|
easing: Easing.out(Easing.cubic),
|
|
73
93
|
});
|
|
74
|
-
}, [progress, duration]);
|
|
94
|
+
}, [progress, currentStep, totalSteps, duration, variant]);
|
|
75
95
|
|
|
76
|
-
|
|
77
|
-
|
|
96
|
+
// --- Text Logic ---
|
|
97
|
+
const textToDisplay = useDerivedValue(() => {
|
|
98
|
+
if (customText !== undefined) {
|
|
99
|
+
return customText;
|
|
100
|
+
}
|
|
101
|
+
if (variant === "steps") {
|
|
102
|
+
// Round the animated value to the nearest step for display
|
|
103
|
+
const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
|
|
104
|
+
return `${displayStep}/${totalSteps}`;
|
|
105
|
+
}
|
|
106
|
+
return `${Math.round(animatedValue.value * 100)}%`;
|
|
78
107
|
});
|
|
79
108
|
|
|
80
|
-
const textToDisplay = customText !== undefined ? customText : percentageText;
|
|
81
|
-
|
|
82
109
|
const textX = useDerivedValue(() => {
|
|
83
110
|
if (!font) return 0;
|
|
84
|
-
const
|
|
85
|
-
typeof textToDisplay === "string" ? textToDisplay : textToDisplay.value;
|
|
86
|
-
const textWidth = font.measureText(text).width;
|
|
111
|
+
const textWidth = font.measureText(textToDisplay.value).width;
|
|
87
112
|
return size / 2 - textWidth / 2;
|
|
88
113
|
});
|
|
89
114
|
|
|
90
115
|
const textY = size / 2 + fontSize / 3;
|
|
91
116
|
|
|
117
|
+
// --- Steps Variant Logic ---
|
|
118
|
+
const renderSteps = () => {
|
|
119
|
+
// Calculate the total gap length in the circumference
|
|
120
|
+
const totalGapDegrees = (totalSteps || 1) * stepGap;
|
|
121
|
+
const totalArcDegrees = 360 - totalGapDegrees;
|
|
122
|
+
const stepArcLength = (totalArcDegrees / (totalSteps || 1) / 360) * circumference;
|
|
123
|
+
const gapLength = (stepGap / 360) * circumference;
|
|
124
|
+
|
|
125
|
+
const dashPattern = [stepArcLength, gapLength];
|
|
126
|
+
|
|
127
|
+
return (
|
|
128
|
+
<>
|
|
129
|
+
{/* Background Dashed Path */}
|
|
130
|
+
<Path
|
|
131
|
+
path={path}
|
|
132
|
+
style="stroke"
|
|
133
|
+
strokeWidth={strokeWidth}
|
|
134
|
+
strokeCap={lineCap}
|
|
135
|
+
color={backgroundColor}
|
|
136
|
+
>
|
|
137
|
+
<DashPathEffect intervals={dashPattern} />
|
|
138
|
+
</Path>
|
|
139
|
+
|
|
140
|
+
{/* Progress Dashed Path */}
|
|
141
|
+
<Path
|
|
142
|
+
path={path}
|
|
143
|
+
style="stroke"
|
|
144
|
+
strokeWidth={strokeWidth}
|
|
145
|
+
strokeCap={lineCap}
|
|
146
|
+
color={progressColor}
|
|
147
|
+
start={0}
|
|
148
|
+
end={animatedValue}
|
|
149
|
+
>
|
|
150
|
+
<DashPathEffect intervals={dashPattern} />
|
|
151
|
+
{innerShadowColor && (
|
|
152
|
+
<Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
|
|
153
|
+
)}
|
|
154
|
+
</Path>
|
|
155
|
+
</>
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
// --- Progress Variant Logic ---
|
|
160
|
+
const renderProgress = () => {
|
|
161
|
+
return (
|
|
162
|
+
<>
|
|
163
|
+
{/* Background Path */}
|
|
164
|
+
<Path
|
|
165
|
+
path={path}
|
|
166
|
+
style="stroke"
|
|
167
|
+
strokeWidth={strokeWidth}
|
|
168
|
+
strokeCap={lineCap}
|
|
169
|
+
color={backgroundColor}
|
|
170
|
+
/>
|
|
171
|
+
|
|
172
|
+
{/* Progress Path */}
|
|
173
|
+
<Path
|
|
174
|
+
path={path}
|
|
175
|
+
style="stroke"
|
|
176
|
+
strokeWidth={progressStrokeWidth}
|
|
177
|
+
strokeCap={lineCap}
|
|
178
|
+
color={progressColor}
|
|
179
|
+
start={0}
|
|
180
|
+
end={animatedValue}
|
|
181
|
+
>
|
|
182
|
+
{innerShadowColor && (
|
|
183
|
+
<Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
|
|
184
|
+
)}
|
|
185
|
+
</Path>
|
|
186
|
+
</>
|
|
187
|
+
);
|
|
188
|
+
};
|
|
189
|
+
|
|
92
190
|
return (
|
|
93
191
|
<Canvas style={[{ width: size, height: size }, style]}>
|
|
94
|
-
|
|
95
|
-
path={path}
|
|
96
|
-
style="stroke"
|
|
97
|
-
strokeWidth={strokeWidth}
|
|
98
|
-
strokeCap={lineCap}
|
|
99
|
-
color={backgroundColor}
|
|
100
|
-
/>
|
|
101
|
-
|
|
102
|
-
<Path
|
|
103
|
-
path={path}
|
|
104
|
-
style="stroke"
|
|
105
|
-
strokeWidth={progressStrokeWidth}
|
|
106
|
-
strokeCap={lineCap}
|
|
107
|
-
color={progressColor}
|
|
108
|
-
start={0}
|
|
109
|
-
end={animatedProgress}
|
|
110
|
-
>
|
|
111
|
-
{innerShadowColor && (
|
|
112
|
-
<Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
|
|
113
|
-
)}
|
|
114
|
-
</Path>
|
|
192
|
+
{variant === "steps" ? renderSteps() : renderProgress()}
|
|
115
193
|
|
|
116
194
|
{/* Text */}
|
|
117
195
|
{font && (
|
|
@@ -127,4 +205,4 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
|
|
|
127
205
|
);
|
|
128
206
|
};
|
|
129
207
|
|
|
130
|
-
export default CircularProgressBar;
|
|
208
|
+
export default CircularProgressBar;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BottomSheetProps } from "@gorhom/bottom-sheet";
|
|
1
2
|
import React, { ReactNode, useContext } from "react";
|
|
2
3
|
|
|
3
4
|
export interface BottomSheetStackItem {
|
|
@@ -5,6 +6,8 @@ export interface BottomSheetStackItem {
|
|
|
5
6
|
snapPoints?: string[] | number[];
|
|
6
7
|
initialSnapIndex?: number;
|
|
7
8
|
dynamicSizing?: boolean;
|
|
9
|
+
|
|
10
|
+
bottomSheetProps?: Partial<Omit<BottomSheetProps, "children">>;
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
export interface BottomSheetStackContextType {
|
|
@@ -52,7 +52,7 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
|
|
|
52
52
|
|
|
53
53
|
useEffect(() => {
|
|
54
54
|
if (isOpen && currentItem) {
|
|
55
|
-
sheetRef.current?.snapToIndex(0);
|
|
55
|
+
sheetRef.current?.snapToIndex(currentItem.initialSnapIndex ?? 0);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
const backHandlerSubscription = BackHandler.addEventListener(
|
|
@@ -96,6 +96,7 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
|
|
|
96
96
|
>
|
|
97
97
|
{children}
|
|
98
98
|
<BottomSheet
|
|
99
|
+
{...currentItem?.bottomSheetProps}
|
|
99
100
|
ref={sheetRef}
|
|
100
101
|
index={-1}
|
|
101
102
|
snapPoints={currentItem?.snapPoints || ["100%"]}
|
package/src/index.ts
CHANGED