react-native-exp-fig 0.1.14 → 0.1.16

package/src/components/coil/index.tsx

@@ -1,103 +1,103 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// icons
-import { Icons } from "../../common/icons-svg";
-
-// theme
-import { theme } from "../../styles/theme/theme";
-
-import { ICoil } from "./interface";
-
-const Coil: React.FC<ICoil> = ({
-  description,
-  handleNavigation,
-  title,
-  testID,
-  status,
-  backgroundColor,
-  style,
-  disabled,
-  backgroundColorIcon,
-}) => {
-  return (
-    <TouchableOpacity
-      disabled={disabled}
-      activeOpacity={0.7}
-      testID={testID}
-      onPress={handleNavigation}
-    >
-      <Box
-        width={"100%"}
-        flexStyle={{ flexDirection: "row", alignItems: "center" }}
-        height={70}
-        backgroundColor={backgroundColor ?? theme.colors.blue[400]}
-        borderStyled={{
-          borderWidth: theme.borderWidths.thin,
-          borderRadius: theme.borderWidths.thick_medium,
-          borderColor: backgroundColor ?? theme.colors.blue[400],
-        }}
-        paddingStyle={{ padding: theme.paddings["2xs"] }}
-        marginStyle={{ marginBottom: theme.margins.md }}
-        style={[style, { elevation: 5 }]}
-      >
-        <Box
-          width={"80%"}
-          height={70}
-          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
-        >
-          <Icons icon={"LIFEBUOY"} size={32} />
-
-          <Box
-            flexStyle={{ flexDirection: "column", flexWrap: "wrap" }}
-            marginStyle={{ marginLeft: theme.margins.lg }}
-          >
-            <Typography
-              text={title}
-              size={theme.fontSizes["2xl"]}
-              fontFamily={theme.fonts.inter_bold_700}
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-              paddingTop={theme.paddings.md}
-            />
-            <Typography
-              text={description}
-              size={theme.fontSizes["2xs"]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-            />
-          </Box>
-        </Box>
-
-        <Box
-          width={"20%"}
-          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}
-          height={70}
-        >
-          {status === "Cancelado" && (
-            <Icons icon={"RECUSED"} size={32} background={backgroundColorIcon} />
-          )}
-          {status === "Concluido" && (
-            <Icons icon={"CHECK_CIRCLE"} size={32} background={backgroundColorIcon} />
-          )}
-          {(status === "Pendente" || status === "Andamento") && (
-            <Icons icon={"EXCLAMATION_CIRCLE"} size={32} background={backgroundColorIcon} />
-          )}
-        </Box>
-      </Box>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { Coil };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+import { ICoil } from "./interface";
+
+const Coil: React.FC<ICoil> = ({
+  description,
+  handleNavigation,
+  title,
+  testID,
+  status,
+  backgroundColor,
+  style,
+  disabled,
+  backgroundColorIcon,
+}) => {
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      activeOpacity={0.7}
+      testID={testID}
+      onPress={handleNavigation}
+    >
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row", alignItems: "center" }}
+        height={70}
+        backgroundColor={backgroundColor ?? theme.colors.blue[400]}
+        borderStyled={{
+          borderWidth: theme.borderWidths.thin,
+          borderRadius: theme.borderWidths.thick_medium,
+          borderColor: backgroundColor ?? theme.colors.blue[400],
+        }}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        marginStyle={{ marginBottom: theme.margins.md }}
+        style={[style, { elevation: 5 }]}
+      >
+        <Box
+          width={"80%"}
+          height={70}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }}
+        >
+          <Icons icon={"LIFEBUOY"} size={32} />
+
+          <Box
+            flexStyle={{ flexDirection: "column", flexWrap: "wrap" }}
+            marginStyle={{ marginLeft: theme.margins.lg }}
+          >
+            <Typography
+              text={title}
+              size={theme.fontSizes["2xl"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+              paddingTop={theme.paddings.md}
+            />
+            <Typography
+              text={description}
+              size={theme.fontSizes["2xs"]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+          </Box>
+        </Box>
+
+        <Box
+          width={"20%"}
+          flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}
+          height={70}
+        >
+          {status === "Cancelado" && (
+            <Icons icon={"RECUSED"} size={32} background={backgroundColorIcon} />
+          )}
+          {status === "Concluido" && (
+            <Icons icon={"CHECK_CIRCLE"} size={32} background={backgroundColorIcon} />
+          )}
+          {(status === "Pendente" || status === "Andamento") && (
+            <Icons icon={"EXCLAMATION_CIRCLE"} size={32} background={backgroundColorIcon} />
+          )}
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Coil };

package/src/components/coil/interface.d.ts

@@ -1,26 +1,26 @@
-/**
- * IMPORTS
- */
-import { ViewProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface ICoil extends ViewProps, IGlobalCss {
-  /**propriedade que indica o título da bobina */
-  title: string;
-
-  /**propriedade que indica a descrição da bobina */
-  description: string;
-
-  /**propriedade que indica que levar para tela da bobina */
-  handleNavigation: () => void;
-
-  /**propriedade que indica status da bobina */
-  status?: "Cancelado" | "Pendente" | "Concluido" | "Andamento";
-}
-
-/**
- * EXPORTS
- */
-export { ICoil };
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface ICoil extends ViewProps, IGlobalCss {
+  /**propriedade que indica o título da bobina */
+  title: string;
+
+  /**propriedade que indica a descrição da bobina */
+  description: string;
+
+  /**propriedade que indica que levar para tela da bobina */
+  handleNavigation: () => void;
+
+  /**propriedade que indica status da bobina */
+  status?: "Cancelado" | "Pendente" | "Concluido" | "Andamento";
+}
+
+/**
+ * EXPORTS
+ */
+export { ICoil };

package/src/components/filter-date-selector/index.tsx

@@ -1,101 +1,101 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity, ActivityIndicator, FlatList } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-//typing
-import { IFilterDateSelector, ISelectedDay } from "./interface";
-import { Icons } from "../../common/icons-svg";
-
-/**
- *
- * Componente FilterDateSelector para a interação do usuário com ui.
- */
-const FilterDateSelector: React.FC<IFilterDateSelector> = ({
-  selectedDay,
-  handleSelectedDay,
-  days,
-  isLoading,
-  testID,
-}) => {
-  const renderDayBlock = ({ item: day, index }: { item: ISelectedDay; index: number }) => {
-    const isSelected = selectedDay && selectedDay.date === day.date;
-    return (
-      <TouchableOpacity
-        disabled={isSelected}
-        key={index}
-        activeOpacity={0.7}
-        onPress={() => handleSelectedDay(day)}
-      >
-        <Box
-          testID={testID}
-          width={65}
-          height={75}
-          flexStyle={{ alignItems: "center", justifyContent: "center" }}
-          backgroundColor={isSelected ? theme.colors.blue[400] : theme.colors.gray[350]}
-          borderStyled={{
-            borderRadius: theme.borderWidths.thick_large,
-            borderColor: isSelected ? theme.colors.blue[400] : theme.colors.gray[350],
-            borderWidth: theme.borderWidths.thin,
-          }}
-          marginStyle={{ marginRight: theme.margins["2xs"], marginTop: theme.margins["2xs"] }}
-        >
-          {isSelected && isLoading ? (
-            <ActivityIndicator size="small" color="white" />
-          ) : (
-            <>
-              {day.date === "all" ? (
-                <Icons icon="REFRESH_CCW_DOT" color={theme.colors.neutral[25]} />
-              ) : (
-                <>
-                  <Typography
-                    text={day.date === "all" ? "" : day.date.toString().padStart(2, "0")}
-                    size={theme.fontSizes.lg}
-                    color={theme.colors.neutral[25]}
-                    fontFamily={theme.fonts.inter_bold_700}
-                  />
-                  <Typography
-                    text={day.date === "all" ? "Todos" : day.dayName.slice(0, 3)}
-                    size={theme.fontSizes.lg}
-                    color={theme.colors.neutral[25]}
-                    fontFamily={theme.fonts.inter_bold_700}
-                    marginBottom={day.date === "all" ? theme.margins["3xl"] : 0}
-                    letterSpacing="o_16"
-                  />
-                </>
-              )}
-            </>
-          )}
-        </Box>
-      </TouchableOpacity>
-    );
-  };
-  const daySorted = days.sort(
-    (a, b) => new Date(b.fullDate).getTime() - new Date(a.fullDate).getTime()
-  );
-
-  // Adiciona a opção "Todos" no início da lista
-  const dataWithAllOption = [...daySorted];
-
-  return (
-    <FlatList
-      horizontal
-      data={dataWithAllOption}
-      showsHorizontalScrollIndicator={false}
-      renderItem={renderDayBlock}
-    />
-  );
-};
-
-/**
- * EXPORTS
- */
-export { FilterDateSelector };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity, ActivityIndicator, FlatList } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+//typing
+import { IFilterDateSelector, ISelectedDay } from "./interface";
+import { Icons } from "../../common/icons-svg";
+
+/**
+ *
+ * Componente FilterDateSelector para a interação do usuário com ui.
+ */
+const FilterDateSelector: React.FC<IFilterDateSelector> = ({
+  selectedDay,
+  handleSelectedDay,
+  days,
+  isLoading,
+  testID,
+}) => {
+  const renderDayBlock = ({ item: day, index }: { item: ISelectedDay; index: number }) => {
+    const isSelected = selectedDay && selectedDay.date === day.date;
+    return (
+      <TouchableOpacity
+        disabled={isSelected}
+        key={index}
+        activeOpacity={0.7}
+        onPress={() => handleSelectedDay(day)}
+      >
+        <Box
+          testID={testID}
+          width={65}
+          height={75}
+          flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          backgroundColor={isSelected ? theme.colors.blue[400] : theme.colors.gray[350]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_large,
+            borderColor: isSelected ? theme.colors.blue[400] : theme.colors.gray[350],
+            borderWidth: theme.borderWidths.thin,
+          }}
+          marginStyle={{ marginRight: theme.margins["2xs"], marginTop: theme.margins["2xs"] }}
+        >
+          {isSelected && isLoading ? (
+            <ActivityIndicator size="small" color="white" />
+          ) : (
+            <>
+              {day.date === "all" ? (
+                <Icons icon="REFRESH_CCW_DOT" color={theme.colors.neutral[25]} />
+              ) : (
+                <>
+                  <Typography
+                    text={day.date === "all" ? "" : day.date.toString().padStart(2, "0")}
+                    size={theme.fontSizes.lg}
+                    color={theme.colors.neutral[25]}
+                    fontFamily={theme.fonts.inter_bold_700}
+                  />
+                  <Typography
+                    text={day.date === "all" ? "Todos" : day.dayName.slice(0, 3)}
+                    size={theme.fontSizes.lg}
+                    color={theme.colors.neutral[25]}
+                    fontFamily={theme.fonts.inter_bold_700}
+                    marginBottom={day.date === "all" ? theme.margins["3xl"] : 0}
+                    letterSpacing="o_16"
+                  />
+                </>
+              )}
+            </>
+          )}
+        </Box>
+      </TouchableOpacity>
+    );
+  };
+  const daySorted = days.sort(
+    (a, b) => new Date(b.fullDate).getTime() - new Date(a.fullDate).getTime()
+  );
+
+  // Adiciona a opção "Todos" no início da lista
+  const dataWithAllOption = [...daySorted];
+
+  return (
+    <FlatList
+      horizontal
+      data={dataWithAllOption}
+      showsHorizontalScrollIndicator={false}
+      renderItem={renderDayBlock}
+    />
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { FilterDateSelector };

package/src/components/history-details/index.tsx

@@ -12,7 +12,6 @@ import { IHistoryDetails } from "./interface";
 
 // styles
 import { theme } from "../../styles/theme/theme";
-import { formatDate } from "../../utils/format-data";
 
 const HistoryDetails: React.FC<IHistoryDetails> = ({
   numero = "01020304050607",
@@ -50,7 +49,7 @@ const HistoryDetails: React.FC<IHistoryDetails> = ({
           numberOfLines={1}
         />
         <Typography
-          text={`Data carregamento: ${formatDate(new Date(date))}`}
+          text={`Data carregamento: ${date}`}
           color={theme.colors.neutral[25]}
           size={theme.fontSizes.xs}
           fontFamily={theme.fonts.inter_regular_400}

package/src/components/history-details/interface.d.ts

@@ -1,18 +1,18 @@
-/**
- * IMPORTS
- */
-type IHistoryDetails = {
-  /**número do carregamento */
-  numero: string;
-  /**local onde vai ser o carregamento */
-  local: string;
-  /**data de quando o carregamento vai ser realizado */
-  date: string;
-  /**duração para o carregamento */
-  duracao: string;
-};
-
-/**
- * EXPORTS
- */
-export { IHistoryDetails };
+/**
+ * IMPORTS
+ */
+type IHistoryDetails = {
+  /**número do carregamento */
+  numero: string;
+  /**local onde vai ser o carregamento */
+  local: string;
+  /**data de quando o carregamento vai ser realizado */
+  date: string;
+  /**duração para o carregamento */
+  duracao: string;
+};
+
+/**
+ * EXPORTS
+ */
+export { IHistoryDetails };

package/src/components/image-capture-with-remove/index.tsx

@@ -27,9 +27,10 @@ const ImageCaptureWithRemove: React.FC<IImageCaptureWithRemoveProps> = ({
   width = 50,
   height = 50,
   foto = null,
+  useRemove = true,
+  status,
   handleTakePhoto,
   onRemove,
-  status,
 }: IImageCaptureWithRemoveProps) => {
   const statusColor = status === "Cancelado" || status === "Pendente";
 
@@ -67,13 +68,15 @@ const ImageCaptureWithRemove: React.FC<IImageCaptureWithRemoveProps> = ({
               }}
             />
 
-            <TouchableOpacity
-              testID="remove-button"
-              style={{ position: "absolute", top: 2, right: 4 }}
-              onPress={onRemove}
-            >
-              <Icons icon="X_CIRCLE" color={theme.colors.red[400]} size={18} />
-            </TouchableOpacity>
+            {useRemove && (
+              <TouchableOpacity
+                testID="remove-button"
+                style={{ position: "absolute", top: 2, right: 4 }}
+                onPress={onRemove}
+              >
+                <Icons icon="X_CIRCLE" color={theme.colors.red[400]} size={18} />
+              </TouchableOpacity>
+            )}
           </>
         ) : (
           <Icons icon="PLUS" color={theme.colors.blue[400]} />

package/src/components/image-capture-with-remove/interface.d.ts

@@ -9,14 +9,17 @@ type IImageCaptureWithRemoveProps = {
   /**Imagem capturada */
   foto?: string | null;
 
+  /**Define o status das fotos */
+  status?: "Pendente" | "Concluido" | "Cancelado" | "Andamento";
+
+  /**propiedade que define se e para utilizar o metódo de remover */
+  useRemove?: boolean;
+
   /**Remove a imagem capturada */
   onRemove: () => void;
 
   /**Captura a imagem */
   handleTakePhoto: () => void;
-
-  /**Define o status das fotos */
-  status?: "Pendente" | "Concluido" | "Cancelado" | "Andamento";
 };
 
 /**