88 lines
1.9 KiB
JavaScript
88 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import { View } from "react-native";
|
|
import { Entypo } from "@expo/vector-icons";
|
|
|
|
import { createStyles } from "~/theme";
|
|
import Text from "~/components/Text";
|
|
import useTimeDisplay from "~/hooks/useTimeDisplay";
|
|
|
|
export default function LineTime({ createdAt, closedAt, isSent }) {
|
|
const styles = useStyles();
|
|
|
|
const createdAtText = useTimeDisplay(createdAt);
|
|
const typeLabel = isSent ? "envoyée" : "reçue";
|
|
const closedAtText = useTimeDisplay(closedAt);
|
|
|
|
const config = closedAt
|
|
? {
|
|
icon: "circle-with-cross",
|
|
label: "terminée",
|
|
time: closedAtText,
|
|
}
|
|
: {
|
|
icon: isSent ? "arrow-long-up" : "arrow-long-down",
|
|
label: typeLabel,
|
|
time: createdAtText,
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.left}>
|
|
<Entypo name={config.icon} size={14} style={styles.icon} />
|
|
<Text
|
|
style={[
|
|
styles.buttonText,
|
|
styles.buttonTextTop,
|
|
styles.buttonTextLeft,
|
|
]}
|
|
>
|
|
{config.label}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={[
|
|
styles.buttonText,
|
|
styles.buttonTextTop,
|
|
styles.buttonTextRight,
|
|
]}
|
|
>
|
|
{config.time}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const useStyles = createStyles(({ wp, hp, scaleText, theme: { colors } }) => ({
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingVertical: 2,
|
|
},
|
|
left: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
buttonText: {
|
|
padding: 0,
|
|
height: "100%",
|
|
},
|
|
buttonTextTop: {
|
|
fontSize: 15,
|
|
display: "flex",
|
|
},
|
|
buttonTextLeft: {
|
|
fontSize: 15,
|
|
display: "flex",
|
|
},
|
|
buttonTextRight: {
|
|
fontSize: 15,
|
|
display: "flex",
|
|
fontWeight: "bold",
|
|
},
|
|
icon: {
|
|
color: colors.primary,
|
|
paddingRight: 5,
|
|
},
|
|
}));
|