42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { useEffect, useState } from "react";
|
|
import { Animated, View } from "react-native";
|
|
|
|
|
|
type Props = {
|
|
margin?: number
|
|
value: number
|
|
category: "page" | "carousel" | "list"
|
|
}
|
|
|
|
export default function ProgressBar({ margin, value, category }: Props) {
|
|
const [progress, setProgress] = useState(new Animated.Value(0));
|
|
const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 232 : category == 'page' ? 245 : 290);
|
|
const [componentWidth, setComponentWidth] = useState(0);
|
|
|
|
const handleLayout = (event: any) => {
|
|
const { width } = event.nativeEvent.layout;
|
|
setComponentWidth(width);
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
Animated.timing(progress, {
|
|
// carousel:: 100% = 255
|
|
// page:: 100% = 290
|
|
// wrapbar :: 90%
|
|
toValue: value / 100 * componentWidth,
|
|
duration: 1000,
|
|
useNativeDriver: false
|
|
}).start();
|
|
}, [value, componentWidth]);
|
|
|
|
|
|
return (
|
|
<View style={[Styles.contentItemCenter]}>
|
|
<View style={[Styles.wrapBar, { margin: margin && margin }]} onLayout={handleLayout}>
|
|
<Animated.View style={[Styles.contentBar, { width: progress }]} />
|
|
</View>
|
|
</View>
|
|
)
|
|
} |