176 lines
3.7 KiB
TypeScript
176 lines
3.7 KiB
TypeScript
import { StyleSheet } from "react-native";
|
|
import { Colors } from "@/constants/theme";
|
|
|
|
export type ColorScheme = "light" | "dark";
|
|
|
|
export function createTableStyles(colorScheme: ColorScheme) {
|
|
const colors = Colors[colorScheme];
|
|
|
|
return StyleSheet.create({
|
|
container: {
|
|
width: "100%",
|
|
backgroundColor: colors.surface,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginVertical: 10,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
shadowColor: colors.text,
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
headerRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
color: colors.text,
|
|
},
|
|
totalCollapsed: {
|
|
color: colors.warning,
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
textAlign: "center",
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingVertical: 8,
|
|
borderBottomWidth: 0.5,
|
|
borderBottomColor: colors.separator,
|
|
},
|
|
header: {
|
|
backgroundColor: colors.backgroundSecondary,
|
|
borderRadius: 6,
|
|
marginTop: 10,
|
|
},
|
|
left: {
|
|
textAlign: "left",
|
|
},
|
|
rowHorizontal: {
|
|
flexDirection: "row",
|
|
paddingVertical: 8,
|
|
borderBottomWidth: 0.5,
|
|
borderBottomColor: colors.separator,
|
|
paddingLeft: 15,
|
|
},
|
|
tableHeader: {
|
|
backgroundColor: colors.backgroundSecondary,
|
|
borderRadius: 6,
|
|
marginTop: 10,
|
|
},
|
|
headerCell: {
|
|
flex: 1,
|
|
fontSize: 15,
|
|
fontWeight: "600",
|
|
color: colors.text,
|
|
textAlign: "center",
|
|
},
|
|
headerCellLeft: {
|
|
flex: 1,
|
|
fontSize: 15,
|
|
fontWeight: "600",
|
|
color: colors.text,
|
|
textAlign: "left",
|
|
},
|
|
cell: {
|
|
flex: 1,
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
textAlign: "center",
|
|
},
|
|
cellLeft: {
|
|
flex: 1,
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
textAlign: "left",
|
|
},
|
|
cellRight: {
|
|
flex: 1,
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
textAlign: "right",
|
|
},
|
|
cellWrapper: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
headerText: {
|
|
fontWeight: "600",
|
|
color: colors.text,
|
|
},
|
|
footerText: {
|
|
color: colors.primary,
|
|
fontWeight: "600",
|
|
},
|
|
footerTotal: {
|
|
color: colors.warning,
|
|
fontWeight: "800",
|
|
},
|
|
sttCell: {
|
|
flex: 0.3,
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
textAlign: "center",
|
|
paddingLeft: 10,
|
|
},
|
|
statusContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
statusDot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: colors.success,
|
|
marginRight: 6,
|
|
},
|
|
statusDotPending: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: colors.warning,
|
|
marginRight: 6,
|
|
},
|
|
statusText: {
|
|
fontSize: 15,
|
|
color: colors.primary,
|
|
textDecorationLine: "underline",
|
|
},
|
|
linkText: {
|
|
color: colors.primary,
|
|
textDecorationLine: "underline",
|
|
},
|
|
viewDetailButton: {
|
|
marginTop: 12,
|
|
paddingVertical: 8,
|
|
alignItems: "center",
|
|
},
|
|
viewDetailText: {
|
|
color: colors.primary,
|
|
fontSize: 15,
|
|
fontWeight: "600",
|
|
textDecorationLine: "underline",
|
|
},
|
|
total: {
|
|
color: colors.warning,
|
|
fontWeight: "700",
|
|
},
|
|
right: {
|
|
color: colors.warning,
|
|
fontWeight: "600",
|
|
},
|
|
footerRow: {
|
|
marginTop: 6,
|
|
},
|
|
});
|
|
}
|
|
|
|
export type TableStyles = ReturnType<typeof createTableStyles>;
|