77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
|
|
import * as Progress from 'react-native-progress';
|
|
import { ThemedText } from "../ThemedText";
|
|
import { formatBytes } from "../utils/bytes";
|
|
|
|
interface Data {
|
|
all: number;
|
|
used: number;
|
|
}
|
|
interface ResourceProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
data: Data
|
|
icon: any;
|
|
style?: StyleProp<ViewStyle>;
|
|
// 是否要转化单位
|
|
isFormatBytes?: boolean;
|
|
}
|
|
const ResourceComponent = (props: ResourceProps) => {
|
|
// 获取设备的宽度
|
|
const width = Dimensions.get("window").width;
|
|
return (
|
|
<View style={[styles.container, props.style]}>
|
|
<View style={styles.content}>
|
|
<View style={styles.titleContent}>
|
|
<ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
|
|
<Progress.Bar progress={props.data.used / props.data.all} width={width * 0.5} color="#AC7E35" unfilledColor="#fff" borderWidth={0} borderRadius={8} height={2} />
|
|
</View>
|
|
<View style={styles.dataContainer}>
|
|
<ThemedText style={styles.dataText}>{props.isFormatBytes ? formatBytes(props.data.used) : props.data.used}/{props.isFormatBytes ? formatBytes(props.data.all) : props.data.all}</ThemedText>
|
|
{props.icon}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: "100%",
|
|
position: "relative",
|
|
},
|
|
content: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
titleContent: {
|
|
width: "90%",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
gap: 16,
|
|
},
|
|
title: {
|
|
fontSize: 12,
|
|
fontWeight: "700",
|
|
width: "25%"
|
|
},
|
|
|
|
dataContainer: {
|
|
position: "absolute",
|
|
right: 0,
|
|
top: -16,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
},
|
|
dataText: {
|
|
fontSize: 12,
|
|
width: "100%",
|
|
color: "#AC7E35",
|
|
textAlign: "right",
|
|
},
|
|
})
|
|
|
|
export default ResourceComponent; |