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.
This commit is contained in:
Enrico Balsamo 2023-06-15 11:26:20 +02:00
parent a93b501aea
commit c5df8db866
2 changed files with 85 additions and 78 deletions

161
index.d.ts vendored
View File

@ -7,7 +7,89 @@ declare module 'react-native-circular-progress' {
ViewStyle
} from 'react-native';
export interface AnimatedCircularProgressProps {
export interface AnimatedCircularProgressProps extends CircularProgressProps {
/**
* Angle from which the progress starts from
*
* @type {number}
* @default 90
*/
rotation?: number;
/**
* Initial fill-value before animation starts
*
* @type {number}
* @default 0
*/
prefill?: number;
/**
* Duration of animation in ms
*
* @type {number}
* @default 500
*/
duration?: number;
/**
* Delay of animation in ms
*
* @type {number}
* @default 0
*/
delay?: number;
/**
*
* @type {Function}
* @default Easing.out(Easing.ease)
*/
easing?: EasingFunction;
/**
* Function that's invoked when the animation completes (both on mount and if called with .animate())
*
*/
onAnimationComplete?: (event: { finished: boolean }) => void;
}
export class AnimatedCircularProgress extends React.Component<
AnimatedCircularProgressProps
> {
/**
* Animate the progress bar to a specific value
*
* @param {number} toVal
* @param {number} duration
* @param {Function} ease
*/
animate: (toVal: number, duration: number, ease?: EasingFunction) => Animated.CompositeAnimation;
/**
* Re-run animation with a specified prefill-value
*
* @param {number} prefill
* @param {number} toVal
* @param {number} duration
* @param {Function} ease
*/
reAnimate: (
prefill: number,
toVal: number,
duration: number,
ease?: EasingFunction
) => void;
}
export interface CircularProgressProps {
/**
* Style of the entire progress container
*
* @type {StyleProp<ViewStyle>}
*/
style?: StyleProp<ViewStyle>;
/**
* Width and height of circle
*
@ -45,13 +127,6 @@ declare module 'react-native-circular-progress' {
*/
tintColor?: string;
/**
* Change the fill color from tintColor to tintColorSecondary as animation progresses.
*
* @type {string}
* @default 'undefined'
*/
tintColorSecondary?: string;
/**
* Current progress / tint transparency
@ -100,13 +175,6 @@ declare module 'react-native-circular-progress' {
*/
arcSweepAngle?: number;
/**
* Style of the entire progress container
*
* @type {StyleProp<ViewStyle>}
*/
style?: StyleProp<ViewStyle>;
/**
* Pass a function as a child. It receiveds the current fill-value as an argument
*
@ -123,43 +191,6 @@ declare module 'react-native-circular-progress' {
*/
childrenContainerStyle?: StyleProp<ViewStyle>;
/**
* Initial fill-value before animation starts
*
* @type {number}
* @default 0
*/
prefill?: number;
/**
* Duration of animation in ms
*
* @type {number}
* @default 500
*/
duration?: number;
/**
* Delay of animation in ms
*
* @type {number}
* @default 0
*/
delay?: number;
/**
*
* @type {Function}
* @default Easing.out(Easing.ease)
*/
easing?: EasingFunction;
/**
* Function that's invoked when the animation completes (both on mount and if called with .animate())
*
*/
onAnimationComplete?: (event: { finished: boolean }) => void;
/**
* Padding applied around the circle to allow for a cap that bleeds outside its boundary
*
@ -193,31 +224,7 @@ declare module 'react-native-circular-progress' {
dashedBackground?: { width: number; gap: number };
}
export class AnimatedCircularProgress extends React.Component<
AnimatedCircularProgressProps
> {
/**
* Animate the progress bar to a specific value
*
* @param {number} toVal
* @param {number} duration
* @param {Function} ease
*/
animate: (toVal: number, duration: number, ease?: EasingFunction) => Animated.CompositeAnimation;
export class CircularProgress extends React.Component<CircularProgressProps> {
/**
* Re-run animation with a specified prefill-value
*
* @param {number} prefill
* @param {number} toVal
* @param {number} duration
* @param {Function} ease
*/
reAnimate: (
prefill: number,
toVal: number,
duration: number,
ease?: EasingFunction
) => void;
}
}

View File

@ -1,6 +1,6 @@
{
"name": "react-native-circular-progress",
"version": "1.3.8",
"version": "1.3.9",
"description": "React Native component for creating animated, circular progress with react-native-svg",
"main": "index.js",
"repository": {