react-native-exp-fig 0.1.8 → 0.1.10

package/src/components/coil/index.tsx

@@ -1,90 +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,
-}) => {
-  return (
-    <TouchableOpacity 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 === "recused" && <Icons icon={"RECUSED"} size={32} />}
-          {status === "approved" && <Icons icon={"CHECK_CIRCLE"} size={32} />}
-          {status === "pending" && <Icons icon={"EXCLAMATION_CIRCLE"} size={32} />}
-        </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?: "recused" | "pending" | "approved";
-}
-
-/**
- * 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,89 +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";
-
-/**
- *
- * 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={60}
-          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"] }}
-        >
-          {isSelected && isLoading ? (
-            <ActivityIndicator size="small" color="white" />
-          ) : (
-            <>
-              <Typography
-                text={day.date.toString().padStart(2, "0")}
-                size={theme.fontSizes.lg}
-                color={theme.colors.neutral[25]}
-                fontFamily={theme.fonts.inter_bold_700}
-              />
-              <Typography
-                text={day.dayName.slice(0, 3)}
-                size={theme.fontSizes.lg}
-                color={theme.colors.neutral[25]}
-                fontFamily={theme.fonts.inter_bold_700}
-                letterSpacing="o_16"
-              />
-            </>
-          )}
-        </Box>
-      </TouchableOpacity>
-    );
-  };
-  const daySorted = days.sort(
-    (a, b) => new Date(b.fullDate).getTime() - new Date(a.fullDate).getTime()
-  );
-  return (
-    <FlatList
-      horizontal
-      data={daySorted}
-      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 };