Remove all native base dependencies.

components/job-tombstone/job-tombstone.component.jsx

@@ -1,16 +1,13 @@
-import {
-  Card,
-  CardItem,
-  Container,
-  Content,
-  Form,
-  H2,
-  H3,
-  Text,
-} from "native-base";
+import { Card } from "react-native-paper";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { RefreshControl, StyleSheet } from "react-native";
+import {
+  RefreshControl,
+  StyleSheet,
+  ScrollView,
+  Text,
+  View,
+} from "react-native";
 import DataLabelComponent from "../data-label/data-label.component";
 
 export default function JobTombstone({ job, loading, refetch }) {
@@ -25,122 +22,116 @@ export default function JobTombstone({ job, loading, refetch }) {
   };
 
   return (
-    <Container>
-      <Content
-        padder
-        refreshControl={
-          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
-        }
-      >
-        <Card>
-          <CardItem bordered style={localStyles.status}>
-            <H2>{job.status}</H2>
-          </CardItem>
-          {job.inproduction && (
-            <CardItem bordered style={localStyles.inproduction}>
-              <Text>{t("objects.jobs.labels.inproduction")}</Text>
-            </CardItem>
-          )}
-          {job.inproduction &&
-            job.production_vars &&
-            !!job.production_vars.note && (
-              <CardItem bordered style={localStyles.inproduction}>
-                <Text>{job.production_vars.note}</Text>
-              </CardItem>
-            )}
-        </Card>
-        <Card>
-          <CardItem bordered style={localStyles.status}>
-            <H3>{t("jobdetail.labels.claiminformation")}</H3>
-          </CardItem>
-          <Form>
-            <DataLabelComponent
-              label={t("objects.jobs.fields.owner")}
-              content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
-                job.ownr_co_nm || ""
-              }`}
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.vehicle")}
-              content={`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
-                job.v_model_desc || ""
-              }`}
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.ins_co_nm")}
-              content={job.ins_co_nm}
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.clm_no")}
-              content={job.clm_no}
-            />
-          </Form>
-        </Card>
-        <Card>
-          <CardItem bordered style={localStyles.status}>
-            <H3>{t("jobdetail.labels.employeeassignments")}</H3>
-          </CardItem>
-          <Form>
-            <DataLabelComponent
-              label={t("objects.jobs.fields.employee_body")}
-              content={`${
-                (job.employee_body_rel && job.employee_body_rel.first_name) ||
-                ""
-              } ${
-                (job.employee_body_rel && job.employee_body_rel.last_name) || ""
-              }`}
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.employee_prep")}
-              content={`${
-                (job.employee_prep_rel && job.employee_prep_rel.first_name) ||
-                ""
-              } ${
-                (job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
-              }`}
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.employee_refinish")}
-              content={`${
-                (job.employee_refinish_rel &&
-                  job.employee_refinish_rel.first_name) ||
-                ""
-              } ${
-                (job.employee_refinish_rel &&
-                  job.employee_refinish_rel.last_name) ||
-                ""
-              }`}
-            />
-          </Form>
-        </Card>
-        <Card style={localStyles.twoColumnCard}>
-          <Form style={localStyles.twoColumnCardColumn}>
-            <DataLabelComponent
-              label={t("objects.jobs.fields.scheduled_in")}
-              content={job.scheduled_in}
-              dateTime
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.actual_in")}
-              content={job.actual_in}
-              dateTime
-            />
-          </Form>
-          <Form style={localStyles.twoColumnCardColumn}>
-            <DataLabelComponent
-              label={t("objects.jobs.fields.scheduled_completion")}
-              content={job.scheduled_completion}
-              dateTime
-            />
-            <DataLabelComponent
-              label={t("objects.jobs.fields.scheduled_delivery")}
-              content={job.scheduled_delivery}
-              dateTime
-            />
-          </Form>
-        </Card>
-      </Content>
-    </Container>
+    <ScrollView
+      padder
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+      }
+    >
+      <Card>
+        <Card.Content bordered style={localStyles.status}>
+          <Text>{job.status}</Text>
+        </Card.Content>
+        {job.inproduction && (
+          <Card.Content bordered style={localStyles.inproduction}>
+            <Text>{t("objects.jobs.labels.inproduction")}</Text>
+          </Card.Content>
+        )}
+        {job.inproduction && job.production_vars && !!job.production_vars.note && (
+          <Card.Content bordered style={localStyles.inproduction}>
+            <Text>{job.production_vars.note}</Text>
+          </Card.Content>
+        )}
+      </Card>
+      <Card>
+        <Card.Content bordered style={localStyles.status}>
+          <Text>{t("jobdetail.labels.claiminformation")}</Text>
+        </Card.Content>
+        <View>
+          <DataLabelComponent
+            label={t("objects.jobs.fields.owner")}
+            content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+              job.ownr_co_nm || ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.vehicle")}
+            content={`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
+              job.v_model_desc || ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.ins_co_nm")}
+            content={job.ins_co_nm}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.clm_no")}
+            content={job.clm_no}
+          />
+        </View>
+      </Card>
+      <Card>
+        <Card.Content bordered style={localStyles.status}>
+          <Text>{t("jobdetail.labels.employeeassignments")}</Text>
+        </Card.Content>
+        <View>
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_body")}
+            content={`${
+              (job.employee_body_rel && job.employee_body_rel.first_name) || ""
+            } ${
+              (job.employee_body_rel && job.employee_body_rel.last_name) || ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_prep")}
+            content={`${
+              (job.employee_prep_rel && job.employee_prep_rel.first_name) || ""
+            } ${
+              (job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_refinish")}
+            content={`${
+              (job.employee_refinish_rel &&
+                job.employee_refinish_rel.first_name) ||
+              ""
+            } ${
+              (job.employee_refinish_rel &&
+                job.employee_refinish_rel.last_name) ||
+              ""
+            }`}
+          />
+        </View>
+      </Card>
+      <Card style={localStyles.twoColumnCard}>
+        <View style={localStyles.twoColumnCardColumn}>
+          <DataLabelComponent
+            label={t("objects.jobs.fields.scheduled_in")}
+            content={job.scheduled_in}
+            dateTime
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.actual_in")}
+            content={job.actual_in}
+            dateTime
+          />
+        </View>
+        <View style={localStyles.twoColumnCardColumn}>
+          <DataLabelComponent
+            label={t("objects.jobs.fields.scheduled_completion")}
+            content={job.scheduled_completion}
+            dateTime
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.scheduled_delivery")}
+            content={job.scheduled_delivery}
+            dateTime
+          />
+        </View>
+      </Card>
+    </ScrollView>
   );
 }
 
@@ -159,33 +150,3 @@ const localStyles = StyleSheet.create({
     justifyContent: "center",
   },
 });
-
-// <Card>
-
-//   <CardItem bordered style={localStyles.ins_card}>
-//     <View style={{ flex: 3, marginright: 10 }}>
-//       <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
-//       <Text numberOfLines={1}>{job.clm_no || ""}</Text>
-//     </View>
-//     <View style={{ flex: 1, marginLeft: 10 }}>
-//       <Text numberOfLines={1}>{job.ded_status || ""}</Text>
-//       <Text numberOfLines={1}>
-//         {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
-//       </Text>
-//     </View>
-//   </CardItem>
-//   <CardItem bordered style={localStyles.owner_card}>
-//     <View style={{ flex: 1 }}>
-//       <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${job.ownr_ln || ""}${
-//         job.ownr_co_nm || ""
-//       }`}</Text>
-//       <Text>{job.ownr_ph1 || ""}</Text>
-//     </View>
-//     <View style={{ flex: 1 }}>
-//       <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
-//         job.v_make_desc || ""
-//       } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
-//     </View>
-//   </CardItem>
-//   <CardItem></CardItem>
-// </Card>;