88 lines
1.7 KiB
TypeScript
88 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { View, Text, StyleSheet, ViewStyle } from "react-native";
|
|
|
|
interface BatteryStatusProps {
|
|
status: 1 | 0 | -1 | null;
|
|
style?: ViewStyle;
|
|
}
|
|
|
|
const BatteryStatus: React.FC<BatteryStatusProps> = ({ status, style }) => {
|
|
const getStatusConfig = (): {
|
|
text: string;
|
|
backgroundColor: string;
|
|
textColor: string;
|
|
} => {
|
|
switch (status) {
|
|
case 1:
|
|
return {
|
|
text: "charging",
|
|
backgroundColor: "#DAF5ED",
|
|
textColor: "#006C4D",
|
|
};
|
|
case -1:
|
|
return {
|
|
text: "discharging",
|
|
backgroundColor: "#E5EBFD",
|
|
textColor: "#1249ED",
|
|
};
|
|
case 0:
|
|
return {
|
|
text: "idle",
|
|
backgroundColor: "#D8DDE7",
|
|
textColor: "#565F70",
|
|
};
|
|
default:
|
|
return {
|
|
text: "---",
|
|
backgroundColor: "#D8DDE7",
|
|
textColor: "#565F70",
|
|
};
|
|
}
|
|
};
|
|
|
|
const config = getStatusConfig();
|
|
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.container,
|
|
{
|
|
backgroundColor: config.backgroundColor,
|
|
},
|
|
style,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.text,
|
|
{
|
|
color: config.textColor,
|
|
},
|
|
]}
|
|
>
|
|
{status !== null && status !== undefined
|
|
? t(`home.${config.text}`)
|
|
: "---"}
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 4,
|
|
justifyContent: "center",
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
fontWeight: "500",
|
|
},
|
|
});
|
|
|
|
export default BatteryStatus;
|