Thomas Demirdjian
60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import { View } from "react-native";
|
|
import { mainBorderRadius } from "../styles/Style";
|
|
import { Palette } from "../styles";
|
|
import { LinearGradient } from "./LinearGradient/LinearGradient";
|
|
|
|
const ProgressBar = ({
|
|
progress = 0,
|
|
containerStyle = {},
|
|
gradient = false,
|
|
status = "default",
|
|
}) => {
|
|
const numericProgress = Number(progress);
|
|
const normalizedProgress = Math.max(
|
|
0,
|
|
Math.min(100, Number.isFinite(numericProgress) ? numericProgress : 0),
|
|
);
|
|
const isError = status === "error";
|
|
const containerBackground = isError ? "#3C101B" : "#0F0C19";
|
|
const fillColor = isError ? "#FF6B6B" : Palette.white;
|
|
const shouldUseGradient = gradient && !isError;
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
height: 5,
|
|
backgroundColor: containerBackground,
|
|
borderRadius: mainBorderRadius,
|
|
overflow: "hidden",
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
{shouldUseGradient ? (
|
|
<LinearGradient
|
|
colors={["#F94697", "#7023F7"]}
|
|
style={{
|
|
width: `${normalizedProgress}%`,
|
|
height: "100%",
|
|
borderRadius: mainBorderRadius,
|
|
}}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
/>
|
|
) : (
|
|
<View
|
|
style={{
|
|
width: `${normalizedProgress}%`,
|
|
height: "100%",
|
|
backgroundColor: fillColor,
|
|
borderRadius: mainBorderRadius,
|
|
}}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar;
|