Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 21x 21x 6x 6x 6x 6x 6x 6x 6x 6x 21x | import {
GiveProgressBarType,
GiveProgressBarVariantType,
} from "@shared/ProgressBar/GiveProgressBar.types";
import { useAppTheme } from "@theme/v2/Provider";
interface GiveProgressBarProps {
value: number;
innerValue?: number;
variant: GiveProgressBarVariantType;
type: GiveProgressBarType;
showDot?: boolean;
customColor?: string;
height?: number;
borderRadius?: number;
}
type ProgressType = "Underwriting" | "KYB" | "Sponsor" | "custom" | "default";
type ProgressVariant = "completed" | "incomplete" | "incomplete2" | "disabled";
const SIMPLE_TYPES = ["default", "onboarding"];
const BAR_HEIGHT = 8;
export default function GiveProgressBarV2({
value,
variant,
innerValue,
showDot = true,
type,
height,
borderRadius = 4,
}: GiveProgressBarProps) {
const { palette } = useAppTheme();
const barHeight = height || BAR_HEIGHT;
const greenBg = palette.primitive?.success[50];
const blueBorder = `2px solid ${palette.primitive?.blue[50]}`;
const purpleBorder = `2px solid ${palette.primitive?.purple[50]}`;
const greyBg = palette.primitive?.transparent["darken-10"];
const mapTypetpStyle = {
completed: { backgroundColor: greenBg },
incomplete: { border: blueBorder },
incomplete2: { border: purpleBorder },
disabled: { backgroundColor: greyBg },
custom: {},
};
return (
<div
data-testid="give-progressbar"
style={{
padding: type === "underwriting" ? PADDING[variant] : 0,
borderRadius,
backgroundColor: ["Underwriting", "KYB", "Sponsor"].includes(type)
? "transparent"
: palette.primitive?.transparent["darken-10"],
width: ["Underwriting", "KYB", "Sponsor", "Pending"].includes(type) //TODO Update to pending
? `${Math.floor(value)}%`
: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
position: "relative",
overflow: "hidden",
}}
>
<div
style={{
borderRadius,
width: SIMPLE_TYPES.includes(type) ? `${Math.floor(value)}%` : "100%",
height: barHeight,
...mapTypetpStyle?.[variant],
}}
/>
{innerValue && innerValue !== 0 ? (
<div
style={{
borderRadius,
width: type === "default" ? `${Math.floor(innerValue)}%` : "100%",
height: barHeight,
position: "absolute",
backgroundColor:
variant === "completed"
? palette.primitive?.success[50]
: palette.icon?.["icon-primary"],
}}
/>
) : null}
{type === "default" && showDot && (
<div
style={{
position: "absolute",
backgroundColor:
value < 80
? palette.primitive?.neutral[40]
: palette.primitive?.neutral[0],
width: "4px",
height: "4px",
borderRadius,
right: "20%",
}}
/>
)}
</div>
);
}
const PADDING = {
completed: "0px 2px 0px 0px",
incomplete: "2px",
incomplete2: "2px",
disabled: "0px 0px 0px 2px",
custom: "2px",
};
|