jornada-ui 0.4.20 → 0.4.22

package/src/components/weekly-table/components/row-table/index.tsx

@@ -1,44 +1,46 @@
-/**
- * IMPORTS
- */
-import React from "react";
-
-// components
-import Box from "../../../box";
-import Typography from "../../../typography";
-
-// typings
-import type { RowTableProps } from "./interface";
-
-// styles
-import { theme } from "../../../../styles/theme/theme";
-
-const RowTable: React.FC<RowTableProps> = ({
-  texto,
-  color = theme.colors.black[180],
-  bold = false,
-  customWidth = 55,
-}) => {
-  return (
-    <Box
-      width={customWidth}
-      paddingStyle={{ padding: 4 }}
-      flexStyle={{
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Typography
-        text={texto}
-        color={color}
-        size={10}
-        fontFamily={bold ? theme.fonts.inter_bold_700 : theme.fonts.inter_regular_400}
-      />
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { RowTable };
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// components
+import Box from "../../../box";
+import Typography from "../../../typography";
+
+// typings
+import type { RowTableProps } from "./interface";
+
+// styles
+import { theme } from "../../../../styles/theme/theme";
+
+const RowTable: React.FC<RowTableProps> = ({
+  testID = "row-table",
+  texto,
+  color = theme.colors.black[180],
+  bold = false,
+  customWidth = 55,
+}) => {
+  return (
+    <Box
+      testID={testID}
+      width={customWidth}
+      paddingStyle={{ padding: 4 }}
+      flexStyle={{
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography
+        text={texto}
+        color={color}
+        size={10}
+        fontFamily={bold ? theme.fonts.inter_bold_700 : theme.fonts.inter_regular_400}
+      />
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { RowTable };

package/src/components/weekly-table/components/row-table/interface.ts

@@ -1,14 +1,16 @@
-/**
- * IMPORTS
- */
-type RowTableProps = {
-  texto: string;
-  color?: string;
-  bold?: boolean;
-  customWidth?: number;
-};
-
-/**
- * EXPORTS
- */
-export type { RowTableProps };
+/**
+ * IMPORTS
+ */
+type RowTableProps = {
+  /**Identificador para o components */
+  testID?: string;
+  texto: string;
+  color?: string;
+  bold?: boolean;
+  customWidth?: number;
+};
+
+/**
+ * EXPORTS
+ */
+export type { RowTableProps };

package/src/components/weekly-table/index.tsx

@@ -2,10 +2,11 @@
  * IMPORTS
  */
 import React, { forwardRef } from "react";
-import { Dimensions, ScrollView } from "react-native";
+import { ActivityIndicator, Dimensions, ScrollView, View } from "react-native";
 
 // components
 import Box from "../box";
+import Typography from "../typography";
 import { RowTable } from "./components/row-table";
 
 // helpers
@@ -19,7 +20,7 @@ import { theme } from "../../styles/theme/theme";
 import { asBaseComponent } from "../../@types/as-base-component";
 
 const WeeklyTable = forwardRef<any, WeekCalendarProps>((props, ref): React.ReactElement => {
-  const { semana } = props;
+  const { testID = "weekly-table", isLoading = false, semana } = props;
 
   const totalHoras = handleCalcularTotalHoras(semana);
 
@@ -38,7 +39,7 @@ const WeeklyTable = forwardRef<any, WeekCalendarProps>((props, ref): React.React
   };
 
   return (
-    <ScrollView horizontal ref={ref} contentContainerStyle={{ width: "100%" }}>
+    <ScrollView testID={testID} horizontal ref={ref} contentContainerStyle={{ width: "100%" }}>
       <Box width={"100%"}>
         {/* Cabeçalho */}
         <Box
@@ -50,27 +51,43 @@ const WeeklyTable = forwardRef<any, WeekCalendarProps>((props, ref): React.React
             borderColor: theme.colors.blue[400],
           }}
         >
-          <RowTable texto="DIA" bold color={theme.colors.neutral[25]} customWidth={colWidths.dia} />
           <RowTable
+            testID={`${testID}-title-dia`}
+            texto="DIA"
+            bold
+            color={theme.colors.neutral[25]}
+            customWidth={colWidths.dia}
+          />
+          <RowTable
+            testID={`${testID}-title-data`}
             texto="DATA"
             bold
             color={theme.colors.neutral[25]}
             customWidth={colWidths.data}
           />
           <RowTable
+            testID={`${testID}-title-jorna`}
             texto="JORNA"
             bold
             color={theme.colors.neutral[25]}
             customWidth={colWidths.jorna}
           />
-          <RowTable texto="KMs" bold color={theme.colors.neutral[25]} customWidth={colWidths.kms} />
           <RowTable
+            testID={`${testID}-title-kms`}
+            texto="KMs"
+            bold
+            color={theme.colors.neutral[25]}
+            customWidth={colWidths.kms}
+          />
+          <RowTable
+            testID={`${testID}-title-picos`}
             texto="PICOS"
             bold
             color={theme.colors.neutral[25]}
             customWidth={colWidths.picos}
           />
           <RowTable
+            testID={`${testID}-title-falhas`}
             texto="FALHAS"
             bold
             color={theme.colors.neutral[25]}
@@ -79,23 +96,49 @@ const WeeklyTable = forwardRef<any, WeekCalendarProps>((props, ref): React.React
         </Box>
 
         {/* Linhas com os dados */}
-        {semana.map((dia, index) => (
-          <Box
-            key={index}
-            flexStyle={{ flexDirection: "row", justifyContent: "center" }}
-            backgroundColor={index % 2 === 0 ? theme.colors.neutral[50] : theme.colors.neutral[300]}
+        {isLoading ? (
+          <View
+            testID={`${testID}-loading`}
+            style={{
+              width: "100%",
+              height: 250,
+              backgroundColor: "rgba(255,255,255,0.6)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
           >
-            <RowTable texto={dia.dia ?? "-"} customWidth={colWidths.dia} />
-            <RowTable texto={dia.entrada ?? "-"} customWidth={colWidths.data} />
-            <RowTable texto={dia.saida ?? "-"} customWidth={colWidths.jorna} />
-            <RowTable texto={(dia.kms ?? 0).toString()} customWidth={colWidths.kms} />
-            <RowTable texto={(dia.picos ?? 0).toString()} customWidth={colWidths.picos} />
-            <RowTable texto={(dia.falhas ?? 0).toString()} customWidth={colWidths.falhas} />
+            <ActivityIndicator size={24} color={theme.colors.blue[400]} />
+            <Typography
+              text="Carregando dados..."
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.xs}
+            />
+          </View>
+        ) : (
+          <Box testID={`${testID}-content`}>
+            {semana.map((dia, index) => (
+              <Box
+                key={index}
+                flexStyle={{ flexDirection: "row", justifyContent: "center" }}
+                backgroundColor={
+                  index % 2 === 0 ? theme.colors.neutral[50] : theme.colors.neutral[300]
+                }
+              >
+                <RowTable texto={dia.dia ?? "-"} customWidth={colWidths.dia} />
+                <RowTable texto={dia.entrada ?? "-"} customWidth={colWidths.data} />
+                <RowTable texto={dia.saida ?? "-"} customWidth={colWidths.jorna} />
+                <RowTable texto={(dia.kms ?? 0).toString()} customWidth={colWidths.kms} />
+                <RowTable texto={(dia.picos ?? 0).toString()} customWidth={colWidths.picos} />
+                <RowTable texto={(dia.falhas ?? 0).toString()} customWidth={colWidths.falhas} />
+              </Box>
+            ))}
           </Box>
-        ))}
+        )}
 
         {/* Linha de totais */}
         <Box
+          testID={`${testID}-content-total`}
           flexStyle={{ flexDirection: "row" }}
           backgroundColor={theme.colors.green[100]}
           borderStyled={{

package/src/components/weekly-table/interface.ts

@@ -1,33 +1,40 @@
-/* eslint-disable no-unused-vars */
-/**
- * IMPORTS
- */
-import type { JSX } from "react";
-
-interface DayInfo {
-  dia: string; // Ex: "SEG", "TER"
-  entrada?: string; // Ex: "08:00"
-  saida?: string; // Ex: "17:00" ou "REP"
-  kms?: number; // Quilômetros percorridos no dia
-  picos?: number; // Quantidade de picos
-  falhas?: number; // Quantidade de falhas
-}
-interface WeekItem extends DayInfo {
-  jornada?: string; // Ex: "08:00 - 17:00"
-}
-interface CampoProps {
-  texto: string;
-  bold?: boolean;
-  color?: string;
-}
-interface WeekCalendarProps {
-  semana: DayInfo[];
-}
-interface WeekCalendarComponent {
-  (props: WeekCalendarProps): JSX.Element;
-}
-
-/**
- * EXPORTS
- */
-export type { DayInfo, WeekItem, CampoProps, WeekCalendarComponent, WeekCalendarProps };
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+import type { JSX } from "react";
+
+interface DayInfo {
+  dia: string; // Ex: "SEG", "TER"
+  entrada?: string; // Ex: "08:00"
+  saida?: string; // Ex: "17:00" ou "REP"
+  kms?: number; // Quilômetros percorridos no dia
+  picos?: number; // Quantidade de picos
+  falhas?: number; // Quantidade de falhas
+}
+interface WeekItem extends DayInfo {
+  jornada?: string; // Ex: "08:00 - 17:00"
+}
+interface CampoProps {
+  texto: string;
+  bold?: boolean;
+  color?: string;
+}
+interface WeekCalendarProps {
+  /**Identificador para o components */
+  testID?: string;
+
+  /**Identificador para o components em carrega*/
+  isLoading?: boolean;
+
+  /**dados que vão ser renderizados */
+  semana: DayInfo[];
+}
+interface WeekCalendarComponent {
+  (props: WeekCalendarProps): JSX.Element;
+}
+
+/**
+ * EXPORTS
+ */
+export type { DayInfo, WeekItem, CampoProps, WeekCalendarComponent, WeekCalendarProps };