related-ui-components 3.0.0 → 3.0.2

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.
Files changed (9) hide show
  1. package/lib/module/app.js +11 -22
  2. package/lib/module/app.js.map +1 -1
  3. package/lib/module/components/ProgressBar/CircularProgressBar.js +69 -67
  4. package/lib/module/components/ProgressBar/CircularProgressBar.js.map +1 -1
  5. package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts +1 -2
  6. package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts.map +1 -1
  7. package/package.json +1 -1
  8. package/src/app.tsx +5 -5
  9. package/src/components/ProgressBar/CircularProgressBar.tsx +75 -99
package/lib/module/app.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  import React, { useState } from "react";
4
4
  import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
5
- import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack.js"; // Adjust path as needed
5
+ // Adjust path as needed
6
6
  import { GestureHandlerRootView } from "react-native-gesture-handler";
7
- import { SelaDealCard } from "./components/index.js";
8
7
  import { lightTheme, RelatedProvider, useTheme } from "./theme/index.js";
8
+ import CircularProgressBar from "./components/ProgressBar/CircularProgressBar.js";
9
9
  import { BottomSheetStackProvider } from "./contexts/index.js";
10
10
  import { SafeAreaProvider } from "react-native-safe-area-context";
11
11
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -40,27 +40,16 @@ const App = () => {
40
40
  children: /*#__PURE__*/_jsxs(BottomSheetStackProvider, {
41
41
  children: [/*#__PURE__*/_jsx(StatusBar, {
42
42
  barStyle: "light-content"
43
- }), /*#__PURE__*/_jsxs(SafeAreaView, {
43
+ }), /*#__PURE__*/_jsx(SafeAreaView, {
44
44
  style: styles.appContainer,
45
- children: [/*#__PURE__*/_jsx(CarouselCardStack, {
46
- data: DUMMY_DATA
47
- // backgroundColor="#333" // Set a background color for the component area
48
- // onActiveIndexChange={(index) => {
49
- // console.log("Active item index:", index);
50
- // }}
51
- }), /*#__PURE__*/_jsx(SelaDealCard, {
52
- variant: "horizontal",
53
- width: 300,
54
- height: 300,
55
- label: "discount",
56
- description: "HELLO",
57
- providerName: "Riva Club",
58
- price: "100",
59
- lockOverlay: true
60
- // grayscaleIntensity={80}
61
- ,
62
- backgroundImage: require("./assets/images/namshi-banner.png")
63
- })]
45
+ children: /*#__PURE__*/_jsx(CircularProgressBar, {
46
+ progress: 0,
47
+ totalSteps: 4,
48
+ currentStep: 1,
49
+ size: 43,
50
+ strokeWidth: 2,
51
+ progressColor: "blue"
52
+ })
64
53
  })]
65
54
  })
66
55
  })
package/lib/module/app.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","SelaDealCard","lightTheme","RelatedProvider","useTheme","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","data","variant","width","height","label","description","providerName","price","lockOverlay","backgroundImage","require","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","totalSteps","currentStep","size","strokeWidth","progressColor","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAeC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAkC,cAAc;AACV;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAarE,SAAoBC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC1E,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAIlE,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAE;AAAG,CAAC,EAAE,CAACC,CAAC,EAAEC,CAAC,MAAM;EACvDC,EAAE,EAAE,SAASD,CAAC,GAAG,CAAC,EAAE;EACpB;EACAE,KAAK,EAAE,2CAA2C;EAClDC,KAAK,EAAE,UAAUH,CAAC,GAAG,CAAC;AACxB,CAAC,CAAC,CAAC;AAEH,MAAMI,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACqB,aAAa,EAAEC,gBAAgB,CAAC,GAAG7B,QAAQ,CAChD8B,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGhC,QAAQ,CAAqB8B,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGlC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMmC,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;EAED,oBACExB,IAAA,CAAAI,SAAA;IAAAwB,QAAA,eACE5B,IAAA,CAACF,gBAAgB;MAAA8B,QAAA,eACf5B,IAAA,CAACR,sBAAsB;QAACqC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzC5B,IAAA,CAACN,eAAe;UAACqB,KAAK,EAAEtB,UAAW;UAAAmC,QAAA,eACjC1B,KAAA,CAACL,wBAAwB;YAAA+B,QAAA,gBACvB5B,IAAA,CAACT,SAAS;cAACwC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC/B,IAAA,CAACX,YAAY;cAACwC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eAuDvC5B,IAAA,CAACJ,mBAAmB;gBAAEyB,QAAQ,EAAE,CAAE;gBAACa,UAAU,EAAE,CAAE;gBAACC,WAAW,EAAE,CAAE;gBAACC,IAAI,EAAE,EAAG;gBAAEC,WAAW,EAAE,CAAE;gBAACC,aAAa,EAAC;cAAM,CAAsB;YAAC,CAqB5H,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACT;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMN,MAAM,GAAG1C,UAAU,CAACiD,MAAM,CAAC;EAC/BN,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPU,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,QAAQ;IAAE;IAC1BC,UAAU,EAAC;EACb;AACF,CAAC,CAAC;AAEF,eAAe5B,GAAG","ignoreList":[]}
package/lib/module/components/ProgressBar/CircularProgressBar.js CHANGED
@@ -1,20 +1,21 @@
1
1
  "use strict";
2
2
 
3
3
  import React, { useEffect } from "react";
4
- import { Canvas, matchFont, Path, Shadow, Skia, Text, useFont, DashPathEffect } from "@shopify/react-native-skia";
5
- import { useSharedValue, withTiming, useDerivedValue, Easing } from "react-native-reanimated";
6
- import { Platform } from "react-native";
4
+ import { StyleSheet, TextInput, View } from "react-native";
5
+ import { Canvas, DashPathEffect, Path, Shadow, Skia } from "@shopify/react-native-skia";
6
+ import Animated, { Easing, useAnimatedProps, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
7
+ import { useTheme } from "../../theme/index.js";
7
8
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
9
+ const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
8
10
  const CircularProgressBar = ({
9
11
  size = 120,
10
12
  strokeWidth = 8,
11
- backgroundColor = "#E5E7EB",
12
- progressColor = "#3B82F6",
13
+ backgroundColor,
14
+ progressColor,
13
15
  lineCap = "round",
14
16
  customText,
15
- textColor = "white",
17
+ textColor,
16
18
  fontSize = size / 4,
17
- textFont,
18
19
  style,
19
20
  innerShadowColor,
20
21
  duration = 1000,
@@ -23,17 +24,15 @@ const CircularProgressBar = ({
23
24
  progressPadding = 0,
24
25
  currentStep = 0,
25
26
  totalSteps = 4,
26
- stepGap = 15 // Gap of 15 degrees between steps
27
+ stepGap = 15
27
28
  }) => {
29
+ const {
30
+ theme
31
+ } = useTheme();
28
32
  const animatedValue = useSharedValue(0);
29
- const customFont = useFont(textFont, fontSize);
30
- const font = textFont ? customFont : matchFont({
31
- fontFamily: Platform.select({
32
- ios: "Helvetica",
33
- default: "serif"
34
- }),
35
- fontSize: fontSize
36
- });
33
+ const finalProgressColor = progressColor || theme.primary;
34
+ const finalBackgroundColor = backgroundColor || theme.disabled;
35
+ const finalTextColor = textColor || theme.onSurface;
37
36
  const radius = (size - strokeWidth) / 2;
38
37
  const circumference = 2 * Math.PI * radius;
39
38
  const path = Skia.Path.Make();
@@ -45,30 +44,28 @@ const CircularProgressBar = ({
45
44
  duration,
46
45
  easing: Easing.out(Easing.cubic)
47
46
  });
48
- }, [progress, currentStep, totalSteps, duration, variant]);
49
-
50
- // --- Text Logic ---
47
+ }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);
51
48
  const textToDisplay = useDerivedValue(() => {
52
49
  if (customText !== undefined) {
53
50
  return customText;
54
51
  }
55
52
  if (variant === "steps") {
56
- // Round the animated value to the nearest step for display
57
53
  const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
58
54
  return `${displayStep}/${totalSteps}`;
59
55
  }
60
56
  return `${Math.round(animatedValue.value * 100)}%`;
57
+ }, [customText, variant, animatedValue, totalSteps]);
58
+ const animatedProps = useAnimatedProps(() => {
59
+ return {
60
+ text: textToDisplay.value
61
+ };
61
62
  });
62
- const textX = useDerivedValue(() => {
63
- if (!font) return 0;
64
- const textWidth = font.measureText(textToDisplay.value).width;
65
- return size / 2 - textWidth / 2;
66
- });
67
- const textY = size / 2 + fontSize / 3;
68
-
69
- // --- Steps Variant Logic ---
63
+ const getInitialText = () => {
64
+ if (customText !== undefined) return customText;
65
+ if (variant === 'steps') return `${currentStep}/${totalSteps}`;
66
+ return `${progress}%`;
67
+ };
70
68
  const renderSteps = () => {
71
- // Calculate the total gap length in the circumference
72
69
  const totalGapDegrees = (totalSteps || 1) * stepGap;
73
70
  const totalArcDegrees = 360 - totalGapDegrees;
74
71
  const stepArcLength = totalArcDegrees / (totalSteps || 1) / 360 * circumference;
@@ -80,7 +77,7 @@ const CircularProgressBar = ({
80
77
  style: "stroke",
81
78
  strokeWidth: strokeWidth,
82
79
  strokeCap: lineCap,
83
- color: backgroundColor,
80
+ color: finalBackgroundColor,
84
81
  children: /*#__PURE__*/_jsx(DashPathEffect, {
85
82
  intervals: dashPattern
86
83
  })
@@ -89,7 +86,7 @@ const CircularProgressBar = ({
89
86
  style: "stroke",
90
87
  strokeWidth: strokeWidth,
91
88
  strokeCap: lineCap,
92
- color: progressColor,
89
+ color: finalProgressColor,
93
90
  start: 0,
94
91
  end: animatedValue,
95
92
  children: [/*#__PURE__*/_jsx(DashPathEffect, {
@@ -104,45 +101,50 @@ const CircularProgressBar = ({
104
101
  })]
105
102
  });
106
103
  };
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
- };
135
- return /*#__PURE__*/_jsxs(Canvas, {
104
+ const renderProgress = () => /*#__PURE__*/_jsxs(_Fragment, {
105
+ children: [/*#__PURE__*/_jsx(Path, {
106
+ path: path,
107
+ style: "stroke",
108
+ strokeWidth: strokeWidth,
109
+ strokeCap: lineCap,
110
+ color: finalBackgroundColor
111
+ }), /*#__PURE__*/_jsx(Path, {
112
+ path: path,
113
+ style: "stroke",
114
+ strokeWidth: progressStrokeWidth,
115
+ strokeCap: lineCap,
116
+ color: finalProgressColor,
117
+ start: 0,
118
+ end: animatedValue,
119
+ children: innerShadowColor && /*#__PURE__*/_jsx(Shadow, {
120
+ dx: 0,
121
+ dy: 0,
122
+ blur: 4,
123
+ color: innerShadowColor,
124
+ inner: true
125
+ })
126
+ })]
127
+ });
128
+ return /*#__PURE__*/_jsxs(View, {
136
129
  style: [{
137
130
  width: size,
138
- height: size
131
+ height: size,
132
+ justifyContent: 'center',
133
+ alignItems: 'center'
139
134
  }, style],
140
- children: [variant === "steps" ? renderSteps() : renderProgress(), font && /*#__PURE__*/_jsx(Text, {
141
- font: font,
142
- color: textColor,
143
- x: textX,
144
- y: textY,
145
- text: textToDisplay
135
+ children: [/*#__PURE__*/_jsx(Canvas, {
136
+ style: StyleSheet.absoluteFill,
137
+ children: variant === "steps" ? renderSteps() : renderProgress()
138
+ }), /*#__PURE__*/_jsx(AnimatedTextInput, {
139
+ editable: false,
140
+ defaultValue: getInitialText(),
141
+ style: {
142
+ color: finalTextColor,
143
+ fontSize: fontSize,
144
+ textAlign: 'center',
145
+ padding: 0
146
+ },
147
+ animatedProps: animatedProps
146
148
  })]
147
149
  });
148
150
  };
package/lib/module/components/ProgressBar/CircularProgressBar.js.map CHANGED
@@ -1 +1 @@
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
+ {"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":"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","ignoreList":[]}
package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { ImageRequireSource, ViewStyle } from "react-native";
2
+ import { ViewStyle } from "react-native";
3
3
  interface CircularProgressBarProps {
4
4
  size?: number;
5
5
  strokeWidth?: number;
@@ -9,7 +9,6 @@ interface CircularProgressBarProps {
9
9
  customText?: string;
10
10
  textColor?: string;
11
11
  fontSize?: number;
12
- textFont?: ImageRequireSource;
13
12
  style?: ViewStyle;
14
13
  innerShadowColor?: string;
15
14
  duration?: number;
package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts.map CHANGED
@@ -1 +1 @@
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
+ {"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;AAatE,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;CAClB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmJ3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/app.tsx CHANGED
@@ -52,13 +52,13 @@ const App = () => {
52
52
  <BottomSheetStackProvider>
53
53
  <StatusBar barStyle="light-content" />
54
54
  <SafeAreaView style={styles.appContainer}>
55
- <CarouselCardStack
55
+ {/* <CarouselCardStack
56
56
  data={DUMMY_DATA}
57
57
  // backgroundColor="#333" // Set a background color for the component area
58
58
  // onActiveIndexChange={(index) => {
59
59
  // console.log("Active item index:", index);
60
60
  // }}
61
- />
61
+ /> */}
62
62
  {/* <CircularProgressBar
63
63
  progress={5}
64
64
  lineCap="round"
@@ -106,7 +106,7 @@ const App = () => {
106
106
  {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
107
107
  {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
108
108
  {/* <CarouselCardStack data={DUMMY_DATA} /> */}
109
- {/* <CircularProgressBar variant="steps" totalSteps={4} currentStep={4} size={43} strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar> */}
109
+ <CircularProgressBar progress={0} totalSteps={4} currentStep={1} size={43} strokeWidth={2} progressColor="blue"></CircularProgressBar>
110
110
  {/* <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={300} onValueChange={console.log}></RangeSlider> */}
111
111
  {/* <PhoneInput
112
112
  value=""
@@ -114,7 +114,7 @@ const App = () => {
114
114
  inputContainerStyle={{ height: 55 }}
115
115
  ></PhoneInput> */}
116
116
 
117
- <SelaDealCard
117
+ {/* <SelaDealCard
118
118
  variant="horizontal"
119
119
  width={300}
120
120
  height={300}
@@ -126,7 +126,7 @@ const App = () => {
126
126
  // grayscaleIntensity={80}
127
127
  backgroundImage={require("./assets/images/namshi-banner.png")}
128
128
  ></SelaDealCard>
129
-
129
+ */}
130
130
  </SafeAreaView>
131
131
  </BottomSheetStackProvider>
132
132
  </RelatedProvider>
package/src/components/ProgressBar/CircularProgressBar.tsx CHANGED
@@ -1,22 +1,16 @@
1
1
  import React, { useEffect } from "react";
2
- import {
3
- Canvas,
4
- matchFont,
5
- Path,
6
- Shadow,
7
- Skia,
8
- Text,
9
- useFont,
10
- PathOp,
11
- DashPathEffect,
12
- } from "@shopify/react-native-skia";
13
- import {
2
+ import { StyleSheet, TextInput, View, ViewStyle } from "react-native";
3
+ import { Canvas, DashPathEffect, Path, Shadow, Skia } from "@shopify/react-native-skia";
4
+ import Animated, {
5
+ Easing,
6
+ useAnimatedProps,
7
+ useDerivedValue,
14
8
  useSharedValue,
15
9
  withTiming,
16
- useDerivedValue,
17
- Easing,
18
10
  } from "react-native-reanimated";
19
- import { ImageRequireSource, Platform, ViewStyle } from "react-native";
11
+ import { useTheme } from "../../theme";
12
+
13
+ const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
20
14
 
21
15
  interface CircularProgressBarProps {
22
16
  size?: number;
@@ -27,34 +21,26 @@ interface CircularProgressBarProps {
27
21
  customText?: string;
28
22
  textColor?: string;
29
23
  fontSize?: number;
30
- textFont?: ImageRequireSource;
31
24
  style?: ViewStyle;
32
25
  innerShadowColor?: string;
33
26
  duration?: number;
34
-
35
- // New variant prop
36
27
  variant?: "progress" | "steps";
37
-
38
- // Props for 'progress' variant
39
- progress?: number; // 0 to 100
28
+ progress?: number;
40
29
  progressPadding?: number;
41
-
42
- // Props for 'steps' variant
43
30
  currentStep?: number;
44
31
  totalSteps?: number;
45
- stepGap?: number; // The gap between steps in degrees
32
+ stepGap?: number;
46
33
  }
47
34
 
48
35
  const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
49
36
  size = 120,
50
37
  strokeWidth = 8,
51
- backgroundColor = "#E5E7EB",
52
- progressColor = "#3B82F6",
38
+ backgroundColor,
39
+ progressColor,
53
40
  lineCap = "round",
54
41
  customText,
55
- textColor = "white",
42
+ textColor,
56
43
  fontSize = size / 4,
57
- textFont,
58
44
  style,
59
45
  innerShadowColor,
60
46
  duration = 1000,
@@ -63,17 +49,14 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
63
49
  progressPadding = 0,
64
50
  currentStep = 0,
65
51
  totalSteps = 4,
66
- stepGap = 15, // Gap of 15 degrees between steps
52
+ stepGap = 15,
67
53
  }) => {
54
+ const { theme } = useTheme();
68
55
  const animatedValue = useSharedValue(0);
69
56
 
70
- const customFont = useFont(textFont, fontSize);
71
- const font = textFont
72
- ? customFont
73
- : matchFont({
74
- fontFamily: Platform.select({ ios: "Helvetica", default: "serif" }),
75
- fontSize: fontSize,
76
- });
57
+ const finalProgressColor = progressColor || theme.primary;
58
+ const finalBackgroundColor = backgroundColor || theme.disabled;
59
+ const finalTextColor = textColor || theme.onSurface;
77
60
 
78
61
  const radius = (size - strokeWidth) / 2;
79
62
  const circumference = 2 * Math.PI * radius;
@@ -91,59 +74,56 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
91
74
  duration,
92
75
  easing: Easing.out(Easing.cubic),
93
76
  });
94
- }, [progress, currentStep, totalSteps, duration, variant]);
77
+ }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);
95
78
 
96
- // --- Text Logic ---
97
79
  const textToDisplay = useDerivedValue(() => {
98
80
  if (customText !== undefined) {
99
81
  return customText;
100
82
  }
101
83
  if (variant === "steps") {
102
- // Round the animated value to the nearest step for display
103
84
  const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
104
85
  return `${displayStep}/${totalSteps}`;
105
86
  }
106
87
  return `${Math.round(animatedValue.value * 100)}%`;
107
- });
88
+ }, [customText, variant, animatedValue, totalSteps]);
108
89
 
109
- const textX = useDerivedValue(() => {
110
- if (!font) return 0;
111
- const textWidth = font.measureText(textToDisplay.value).width;
112
- return size / 2 - textWidth / 2;
90
+ const animatedProps = useAnimatedProps(() => {
91
+ return {
92
+ text: textToDisplay.value,
93
+ } as any;
113
94
  });
114
95
 
115
- const textY = size / 2 + fontSize / 3;
96
+ const getInitialText = () => {
97
+ if (customText !== undefined) return customText;
98
+ if (variant === 'steps') return `${currentStep}/${totalSteps}`;
99
+ return `${progress}%`;
100
+ };
116
101
 
117
- // --- Steps Variant Logic ---
118
102
  const renderSteps = () => {
119
- // Calculate the total gap length in the circumference
120
103
  const totalGapDegrees = (totalSteps || 1) * stepGap;
121
104
  const totalArcDegrees = 360 - totalGapDegrees;
122
- const stepArcLength = (totalArcDegrees / (totalSteps || 1) / 360) * circumference;
105
+ const stepArcLength =
106
+ (totalArcDegrees / (totalSteps || 1) / 360) * circumference;
123
107
  const gapLength = (stepGap / 360) * circumference;
124
-
125
108
  const dashPattern = [stepArcLength, gapLength];
126
109
 
127
110
  return (
128
111
  <>
129
- {/* Background Dashed Path */}
130
112
  <Path
131
113
  path={path}
132
114
  style="stroke"
133
115
  strokeWidth={strokeWidth}
134
116
  strokeCap={lineCap}
135
- color={backgroundColor}
117
+ color={finalBackgroundColor}
136
118
  >
137
119
  <DashPathEffect intervals={dashPattern} />
138
120
  </Path>
139
-
140
- {/* Progress Dashed Path */}
141
121
  <Path
142
122
  path={path}
143
123
  style="stroke"
144
124
  strokeWidth={strokeWidth}
145
125
  strokeCap={lineCap}
146
- color={progressColor}
126
+ color={finalProgressColor}
147
127
  start={0}
148
128
  end={animatedValue}
149
129
  >
@@ -156,53 +136,49 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
156
136
  );
157
137
  };
158
138
 
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
- };
139
+ const renderProgress = () => (
140
+ <>
141
+ <Path
142
+ path={path}
143
+ style="stroke"
144
+ strokeWidth={strokeWidth}
145
+ strokeCap={lineCap}
146
+ color={finalBackgroundColor}
147
+ />
148
+ <Path
149
+ path={path}
150
+ style="stroke"
151
+ strokeWidth={progressStrokeWidth}
152
+ strokeCap={lineCap}
153
+ color={finalProgressColor}
154
+ start={0}
155
+ end={animatedValue}
156
+ >
157
+ {innerShadowColor && (
158
+ <Shadow dx={0} dy={0} blur={4} color={innerShadowColor} inner />
159
+ )}
160
+ </Path>
161
+ </>
162
+ );
189
163
 
190
164
  return (
191
- <Canvas style={[{ width: size, height: size }, style]}>
192
- {variant === "steps" ? renderSteps() : renderProgress()}
193
-
194
- {/* Text */}
195
- {font && (
196
- <Text
197
- font={font}
198
- color={textColor}
199
- x={textX}
200
- y={textY}
201
- text={textToDisplay}
202
- />
203
- )}
204
- </Canvas>
165
+ <View style={[{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }, style]}>
166
+ <Canvas style={StyleSheet.absoluteFill}>
167
+ {variant === "steps" ? renderSteps() : renderProgress()}
168
+ </Canvas>
169
+ <AnimatedTextInput
170
+ editable={false}
171
+ defaultValue={getInitialText()}
172
+ style={{
173
+ color: finalTextColor,
174
+ fontSize: fontSize,
175
+ textAlign: 'center',
176
+ padding: 0
177
+ }}
178
+ animatedProps={animatedProps}
179
+ />
180
+ </View>
205
181
  );
206
182
  };
207
183
 
208
- export default CircularProgressBar;
184
+ export default CircularProgressBar;