Files
imexmobile/components/job-list-item/job-list-item.component.jsx
2020-08-13 11:14:39 -07:00

65 lines
2.0 KiB
JavaScript

import { Card, CardItem, H3, SwipeRow } from "native-base";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useNavigation } from "@react-navigation/native";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { useTranslation } from "react-i18next";
import { Ionicons } from "@expo/vector-icons";
import styles from "../styles";
const RenderRightAction = (props) => {
const { t } = useTranslation();
return (
<View style={[styles.swipe_view, styles.swipe_view_blue]}>
<Ionicons name="ios-camera" size={24} color="white" />
<Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
</View>
);
};
export default function JobListItem({ item }) {
console.log("JobListItem -> item", item);
const navigation = useNavigation();
const onPress = () => {
navigation.push("JobDetail", {
jobId: item.id,
title: item.ro_number ? item.ro_number : `EST-${item.est_number}`,
});
};
return (
<Swipeable renderRightActions={() => <RenderRightAction />}>
<Card>
<CardItem header bordered first button onPress={onPress}>
<View style={localStyles.item_header}>
<H3 style={localStyles.item_header_content}>
{item.ro_number ? item.ro_number : `EST-${item.est_number}`}
</H3>
<Text style={localStyles.item_header_margin}>
{item.clm_no || ""}
</Text>
</View>
</CardItem>
<CardItem bordered last button>
<View>
<Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
item.ownr_co_nm || ""
}`}</Text>
<Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
item.v_model_desc || ""
}`}</Text>
</View>
</CardItem>
</Card>
</Swipeable>
);
}
const localStyles = StyleSheet.create({
item_header: {
flexDirection: "row",
alignItems: "center",
},
item_header_margin: { marginLeft: 10 },
});