jornada-ui 0.4.4 → 0.4.6

package/src/components/history-activities-card/index.tsx

@@ -1,209 +1,211 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { Image } from "react-native";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-//commons/ icons
-import { Icons } from "../../common/icons-svg";
-import { IMAGES } from "../../common/constants";
-
-// typings
-import type { ICardActivitiesWeek } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const HistoryActivitiesCard = forwardRef<any, ICardActivitiesWeek>(
-  (props, ref): React.ReactElement => {
-    const {
-      testID,
-      backgroundColor,
-      idAtividade,
-      name_activitie,
-      type_activitie,
-      data_start,
-      data_end,
-      duration,
-      avatar,
-    } = props;
-    return (
-      <Box
-        ref={ref}
-        testID={testID}
-        width={"100%"}
-        backgroundColor={theme.colors.neutral[25]}
-        borderStyled={{
-          borderRadius: theme.borderWidths.thick_medium,
-        }}
-        marginStyle={{
-          marginBottom: theme.margins["2xs"],
-        }}
-      >
-        <Box
-          width={"100%"}
-          height={30}
-          backgroundColor={backgroundColor ?? theme.colors.green[400]}
-          borderStyled={{
-            borderTopLeftRadius: theme.borderWidths.thin_bold,
-            borderTopRightRadius: theme.borderWidths.thin_bold,
-            borderColor: theme.colors.blue[400],
-          }}
-          flexStyle={{
-            justifyContent: "center",
-          }}
-        >
-          <Typography
-            text={`ATIVIDADE ${!data_end ? "EM ANDAMENTO" : ""} #${idAtividade}`}
-            color={theme.colors.neutral[25]}
-            size={theme.fontSizes.sm}
-            fontFamily={theme.fonts.inter_semi_bold_600}
-            fontWeight={"500"}
-            lineHeight={theme.fontSizes.lg}
-            marginLeft={theme.margins["2xs"]}
-          />
-        </Box>
-        <Box
-          width={"100%"}
-          flexStyle={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-          paddingStyle={{
-            padding: theme.paddings["2xs"],
-          }}
-        >
-          <Box width={"100%"}>
-            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-              <Image
-                style={{
-                  width: 45,
-                  height: 45,
-                  borderRadius: 10,
-                  marginRight: 10,
-                }}
-                source={{ uri: avatar ?? IMAGES.IMAGE_ANONIMA }}
-              />
-
-              <Box width={"100%"}>
-                <Box
-                  width={"84%"}
-                  flexStyle={{
-                    flexDirection: "row",
-                    flexWrap: "wrap",
-                  }}
-                >
-                  <Typography
-                    style={{ flexShrink: 1 }}
-                    text={`Início: `}
-                    size={theme.fontSizes.xs}
-                    color={theme.colors.black[10]}
-                    fontFamily={theme.fonts.inter_medium_500}
-                  />
-                  <Typography
-                    text={`${data_start} ás ${data_end ?? "00/00/0000 00:00"}`}
-                    size={11}
-                    color={theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
-                  />
-                </Box>
-
-                <Box
-                  flexStyle={{
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                  }}
-                  width={"84%"}
-                >
-                  <Box flexStyle={{ flexDirection: "row" }}>
-                    <Typography
-                      text={`Duração: `}
-                      size={theme.fontSizes.xs}
-                      color={theme.colors.black[10]}
-                      fontFamily={theme.fonts.inter_medium_500}
-                    />
-
-                    <Typography
-                      text={`${duration ?? "00:00"}`}
-                      size={theme.fontSizes.xs}
-                      color={theme.colors.black[180]}
-                      fontFamily={theme.fonts.inter_light_300}
-                    />
-                  </Box>
-                  <Icons icon={"TRUCK_ACTIVITY"} color={backgroundColor} size={24} />
-                </Box>
-              </Box>
-            </Box>
-          </Box>
-        </Box>
-
-        <Box
-          width={"100%"}
-          flexStyle={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-          paddingStyle={{
-            padding: theme.paddings["2xs"],
-          }}
-          borderStyled={{
-            borderTopWidth: theme.borderWidths.thin_medium,
-            borderTopColor: theme.colors.neutral[200],
-          }}
-        >
-          <Box marginStyle={{ marginRight: 2 }}>
-            <Typography
-              text={`Atividade:`}
-              size={theme.fontSizes.xs}
-              color={theme.colors.black[180]}
-              fontFamily={theme.fonts.inter_regular_400}
-            />
-
-            <Typography
-              text={`${name_activitie ?? "Sem informação"}`}
-              size={theme.fontSizes.sm}
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-            />
-          </Box>
-
-          <Box
-            flexStyle={{
-              flexDirection: "column",
-              alignItems: "flex-end",
-              justifyContent: "center",
-            }}
-          >
-            <Typography
-              text={`Tipo atividade: `}
-              size={theme.fontSizes.xs}
-              color={theme.colors.black[180]}
-              fontFamily={theme.fonts.inter_light_300}
-            />
-
-            <Typography
-              text={`${type_activitie}`}
-              size={theme.fontSizes.sm}
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-              marginLeft={4}
-            />
-          </Box>
-        </Box>
-      </Box>
-    );
-  }
-);
-
-HistoryActivitiesCard.displayName = "HistoryActivitiesCard";
-
-/**
- * Componente Box para a interação da  ui.
- */
-export default asBaseComponent(HistoryActivitiesCard);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Image } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+//commons/ icons
+import { IMAGES } from "../../common/constants";
+
+// typings
+import type { ICardActivitiesWeek } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { getIconByProperty } from "../../utils/get-icon-by-property";
+
+const HistoryActivitiesCard = forwardRef<any, ICardActivitiesWeek>(
+  (props, ref): React.ReactElement => {
+    const {
+      testID,
+      backgroundColor,
+      idAtividade,
+      name_activitie,
+      referencia,
+      type_activitie,
+      data_start,
+      data_end,
+      duration,
+      avatar,
+    } = props;
+    return (
+      <Box
+        ref={ref}
+        testID={testID}
+        width={"100%"}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        marginStyle={{
+          marginBottom: theme.margins["2xs"],
+        }}
+      >
+        <Box
+          width={"100%"}
+          height={30}
+          backgroundColor={backgroundColor ?? theme.colors.green[400]}
+          borderStyled={{
+            borderTopLeftRadius: theme.borderWidths.thin_bold,
+            borderTopRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+          flexStyle={{
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            text={`ATIVIDADE ${!data_end ? "EM ANDAMENTO" : ""} #${idAtividade}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={theme.margins["2xs"]}
+          />
+        </Box>
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+        >
+          <Box width={"100%"}>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Image
+                style={{
+                  width: 45,
+                  height: 45,
+                  borderRadius: 10,
+                  marginRight: 10,
+                }}
+                source={{ uri: avatar ?? IMAGES.IMAGE_ANONIMA }}
+              />
+
+              <Box width={"100%"}>
+                <Box
+                  width={"84%"}
+                  flexStyle={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <Typography
+                    style={{ flexShrink: 1 }}
+                    text={`Início: `}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.black[10]}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
+                  />
+                  <Typography
+                    text={`${data_start} ás ${data_end ?? "00/00/0000 00:00"}`}
+                    size={11}
+                    color={theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_regular_400}
+                  />
+                </Box>
+
+                <Box
+                  flexStyle={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                  }}
+                  width={"84%"}
+                >
+                  <Box flexStyle={{ flexDirection: "row" }}>
+                    <Typography
+                      text={`Duração: `}
+                      size={theme.fontSizes.xs}
+                      color={theme.colors.black[10]}
+                      fontFamily={theme.fonts.inter_semi_bold_600}
+                    />
+
+                    <Typography
+                      text={`${duration ?? "00:00"}`}
+                      size={theme.fontSizes.xs}
+                      color={theme.colors.black[180]}
+                      fontFamily={theme.fonts.inter_light_300}
+                    />
+                  </Box>
+
+                  {getIconByProperty(referencia, backgroundColor)}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+          borderStyled={{
+            borderTopWidth: theme.borderWidths.thin_medium,
+            borderTopColor: theme.colors.neutral[200],
+          }}
+        >
+          <Box marginStyle={{ marginRight: 2 }}>
+            <Typography
+              text={`Atividade:`}
+              size={theme.fontSizes.xs}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+
+            <Typography
+              text={`${name_activitie ?? "Sem informação"}`}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+          </Box>
+
+          <Box
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-end",
+              justifyContent: "center",
+            }}
+          >
+            <Typography
+              text={`Tipo atividade: `}
+              size={theme.fontSizes.xs}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+
+            <Typography
+              text={`${type_activitie}`}
+              size={theme.fontSizes.sm}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              marginLeft={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+);
+
+HistoryActivitiesCard.displayName = "HistoryActivitiesCard";
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default asBaseComponent(HistoryActivitiesCard);