98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { Text } from "react-native-paper";
|
|
|
|
import { PriorityStatus } from "@/constants/priorityStatusEnum";
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
|
|
type PriorityData = {
|
|
bars: number;
|
|
color: string;
|
|
};
|
|
|
|
const PRIORITY_CONFIG: Record<string, PriorityData> = {
|
|
[PriorityStatus.HIGH_PRIORITY]: { bars: 3, color: "bg-highRisk" },
|
|
[PriorityStatus.MODERATE_PRIORITY]: { bars: 2, color: "bg-mediumRisk" },
|
|
[PriorityStatus.LOW_PRIORITY]: { bars: 1, color: "bg-lowRisk" },
|
|
};
|
|
|
|
const SIZE_CONFIG = {
|
|
[SizeEnum.Small]: {
|
|
width: "w-1",
|
|
heights: ["h-2", "h-3", "h-4"],
|
|
},
|
|
[SizeEnum.Moderate]: {
|
|
width: "w-1.5",
|
|
heights: ["h-3", "h-4", "h-5"],
|
|
},
|
|
[SizeEnum.Regular]: {
|
|
width: "w-1.5",
|
|
heights: ["h-3", "h-4", "h-5"],
|
|
},
|
|
[SizeEnum.Large]: {
|
|
width: "w-2",
|
|
heights: ["h-4", "h-6", "h-8"],
|
|
},
|
|
};
|
|
|
|
interface PriorityIndicatorProps {
|
|
priority: PriorityStatus | string;
|
|
showLabel?: boolean;
|
|
size?: SizeEnum;
|
|
}
|
|
|
|
export const PriorityIndicator = ({
|
|
priority,
|
|
showLabel = false,
|
|
size = SizeEnum.Moderate,
|
|
}: PriorityIndicatorProps) => {
|
|
const { filledBars, barColor, barSizes } = useMemo(() => {
|
|
const priorityData = PRIORITY_CONFIG[priority] || {
|
|
bars: 0,
|
|
color: "bg-mediumGray",
|
|
};
|
|
const sizeData = SIZE_CONFIG[size] || SIZE_CONFIG[SizeEnum.Moderate];
|
|
|
|
return {
|
|
filledBars: priorityData.bars,
|
|
barColor: priorityData.color,
|
|
barSizes: {
|
|
width: sizeData.width,
|
|
heights: sizeData.heights,
|
|
},
|
|
};
|
|
}, [priority, size]);
|
|
|
|
return (
|
|
<View className="flex-row items-center">
|
|
<View className="flex-row items-end gap-0.5 mr-1">
|
|
<View
|
|
className={`${barSizes.width} ${barSizes.heights[0]} rounded-sm ${
|
|
filledBars >= 1 ? barColor : "bg-mediumGray"
|
|
}`}
|
|
/>
|
|
|
|
<View
|
|
className={`${barSizes.width} ${barSizes.heights[1]} rounded-sm ${
|
|
filledBars >= 2 ? barColor : "bg-mediumGray"
|
|
}`}
|
|
/>
|
|
|
|
<View
|
|
className={`${barSizes.width} ${barSizes.heights[2]} rounded-sm ${
|
|
filledBars >= 3 ? barColor : "bg-mediumGray"
|
|
}`}
|
|
/>
|
|
</View>
|
|
|
|
{showLabel && (
|
|
<Text className="text-xs ml-1">
|
|
{typeof priority === "string"
|
|
? priority.charAt(0).toUpperCase() + priority.slice(1).toLowerCase()
|
|
: priority}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|