Skip to content

Commit c5df8db

Browse files
committed
fix(types): CircularProgress type
In this PR, it is added CircularProgress type and made AnimatedCircularProgress type extend it. These types reflect those found in the `src/` directory in `CircularProgress.js` and `AnimatedCircularProgress.js` files.
1 parent a93b501 commit c5df8db

File tree

2 files changed

+85
-78
lines changed

2 files changed

+85
-78
lines changed

index.d.ts

Lines changed: 84 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,89 @@ declare module 'react-native-circular-progress' {
77
ViewStyle
88
} from 'react-native';
99

10-
export interface AnimatedCircularProgressProps {
10+
export interface AnimatedCircularProgressProps extends CircularProgressProps {
11+
12+
/**
13+
* Angle from which the progress starts from
14+
*
15+
* @type {number}
16+
* @default 90
17+
*/
18+
rotation?: number;
19+
20+
/**
21+
* Initial fill-value before animation starts
22+
*
23+
* @type {number}
24+
* @default 0
25+
*/
26+
prefill?: number;
27+
28+
/**
29+
* Duration of animation in ms
30+
*
31+
* @type {number}
32+
* @default 500
33+
*/
34+
duration?: number;
35+
36+
/**
37+
* Delay of animation in ms
38+
*
39+
* @type {number}
40+
* @default 0
41+
*/
42+
delay?: number;
43+
44+
/**
45+
*
46+
* @type {Function}
47+
* @default Easing.out(Easing.ease)
48+
*/
49+
easing?: EasingFunction;
50+
51+
/**
52+
* Function that's invoked when the animation completes (both on mount and if called with .animate())
53+
*
54+
*/
55+
onAnimationComplete?: (event: { finished: boolean }) => void;
56+
}
57+
58+
export class AnimatedCircularProgress extends React.Component<
59+
AnimatedCircularProgressProps
60+
> {
61+
/**
62+
* Animate the progress bar to a specific value
63+
*
64+
* @param {number} toVal
65+
* @param {number} duration
66+
* @param {Function} ease
67+
*/
68+
animate: (toVal: number, duration: number, ease?: EasingFunction) => Animated.CompositeAnimation;
69+
70+
/**
71+
* Re-run animation with a specified prefill-value
72+
*
73+
* @param {number} prefill
74+
* @param {number} toVal
75+
* @param {number} duration
76+
* @param {Function} ease
77+
*/
78+
reAnimate: (
79+
prefill: number,
80+
toVal: number,
81+
duration: number,
82+
ease?: EasingFunction
83+
) => void;
84+
}
85+
86+
export interface CircularProgressProps {
87+
/**
88+
* Style of the entire progress container
89+
*
90+
* @type {StyleProp<ViewStyle>}
91+
*/
92+
style?: StyleProp<ViewStyle>;
1193
/**
1294
* Width and height of circle
1395
*
@@ -45,13 +127,6 @@ declare module 'react-native-circular-progress' {
45127
*/
46128
tintColor?: string;
47129

48-
/**
49-
* Change the fill color from tintColor to tintColorSecondary as animation progresses.
50-
*
51-
* @type {string}
52-
* @default 'undefined'
53-
*/
54-
tintColorSecondary?: string;
55130

56131
/**
57132
* Current progress / tint transparency
@@ -100,13 +175,6 @@ declare module 'react-native-circular-progress' {
100175
*/
101176
arcSweepAngle?: number;
102177

103-
/**
104-
* Style of the entire progress container
105-
*
106-
* @type {StyleProp<ViewStyle>}
107-
*/
108-
style?: StyleProp<ViewStyle>;
109-
110178
/**
111179
* Pass a function as a child. It receiveds the current fill-value as an argument
112180
*
@@ -123,43 +191,6 @@ declare module 'react-native-circular-progress' {
123191
*/
124192
childrenContainerStyle?: StyleProp<ViewStyle>;
125193

126-
/**
127-
* Initial fill-value before animation starts
128-
*
129-
* @type {number}
130-
* @default 0
131-
*/
132-
prefill?: number;
133-
134-
/**
135-
* Duration of animation in ms
136-
*
137-
* @type {number}
138-
* @default 500
139-
*/
140-
duration?: number;
141-
142-
/**
143-
* Delay of animation in ms
144-
*
145-
* @type {number}
146-
* @default 0
147-
*/
148-
delay?: number;
149-
150-
/**
151-
*
152-
* @type {Function}
153-
* @default Easing.out(Easing.ease)
154-
*/
155-
easing?: EasingFunction;
156-
157-
/**
158-
* Function that's invoked when the animation completes (both on mount and if called with .animate())
159-
*
160-
*/
161-
onAnimationComplete?: (event: { finished: boolean }) => void;
162-
163194
/**
164195
* Padding applied around the circle to allow for a cap that bleeds outside its boundary
165196
*
@@ -193,31 +224,7 @@ declare module 'react-native-circular-progress' {
193224
dashedBackground?: { width: number; gap: number };
194225
}
195226

196-
export class AnimatedCircularProgress extends React.Component<
197-
AnimatedCircularProgressProps
198-
> {
199-
/**
200-
* Animate the progress bar to a specific value
201-
*
202-
* @param {number} toVal
203-
* @param {number} duration
204-
* @param {Function} ease
205-
*/
206-
animate: (toVal: number, duration: number, ease?: EasingFunction) => Animated.CompositeAnimation;
227+
export class CircularProgress extends React.Component<CircularProgressProps> {
207228

208-
/**
209-
* Re-run animation with a specified prefill-value
210-
*
211-
* @param {number} prefill
212-
* @param {number} toVal
213-
* @param {number} duration
214-
* @param {Function} ease
215-
*/
216-
reAnimate: (
217-
prefill: number,
218-
toVal: number,
219-
duration: number,
220-
ease?: EasingFunction
221-
) => void;
222229
}
223230
}

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-circular-progress",
3-
"version": "1.3.8",
3+
"version": "1.3.9",
44
"description": "React Native component for creating animated, circular progress with react-native-svg",
55
"main": "index.js",
66
"repository": {

0 commit comments

Comments
 (0)