react-native-exp-fig 0.1.29 → 0.1.31

package/lib/module/components/selects/select-option/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","theme","styles","props","_props$sizeTitleLabel","_props$colortitleLabe","create","container","width","marginBottom","label","fontSize","sizeTitleLabel","fontWeight","color","colortitleLabel","colors","black","selectBox","flexDirection","alignItems","justifyContent","height","borderWidth","borderColor","gray","borderRadius","backgroundColor","neutral","paddingHorizontal","selectedText","modalOverlay","flex","padding","modalContainer","option","borderBottomWidth","borderBottomColor","optionText","closeButtonText"],"sources":["styles.ts"],"sourcesContent":["/**\n * IMPORTS\n */\nimport { StyleSheet } from \"react-native\";\n\n// typings\nimport { ISelectDropDownProps } from \"./interface\";\n\n// theme\nimport { theme } from \"../../../styles/theme/theme\";\n\nconst styles = (props: ISelectDropDownProps) =>\n  StyleSheet.create({\n    container: {\n      width: \"100%\",\n      marginBottom: 16,\n    },\n    label: {\n      fontSize: props.sizeTitleLabel ?? 16,\n      fontWeight: \"bold\",\n      color: props.colortitleLabel ?? theme.colors.black[100],\n      marginBottom: 5,\n    },\n    selectBox: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      width: \"100%\",\n      height: 45,\n      borderWidth: 1,\n      borderColor: theme.colors.gray[700],\n      borderRadius: 10,\n      backgroundColor: theme.colors.neutral[25],\n      paddingHorizontal: 10,\n    },\n    selectedText: {\n      fontSize: 14,\n      color: \"#666\",\n    },\n    modalOverlay: {\n      flex: 1,\n      backgroundColor: \"rgba(0,0,0,0.5)\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      padding: 24,\n    },\n    modalContainer: {\n      width: \"100%\",\n      backgroundColor: theme.colors.neutral[25],\n      borderRadius: 10,\n      padding: 15,\n      alignItems: \"center\",\n    },\n    option: {\n      width: \"100%\",\n      padding: 10,\n      alignItems: \"flex-start\",\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.gray[300],\n    },\n    optionText: {\n      fontSize: 14,\n      color: theme.colors.black[100],\n      fontWeight: \"500\",\n    },\n    closeButtonText: {\n      color: theme.colors.neutral[25],\n      fontWeight: \"bold\",\n    },\n  });\n\n/**\n * EXPORTS\n */\nexport { styles };\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,cAAc;;AAEzC;;AAGA;AACA,SAASC,KAAK,QAAQ,6BAA6B;AAEnD,MAAMC,MAAM,GAAIC,KAA2B;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EAAA,OACzCL,UAAU,CAACM,MAAM,CAAC;IAChBC,SAAS,EAAE;MACTC,KAAK,EAAE,MAAM;MACbC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACLC,QAAQ,GAAAP,qBAAA,GAAED,KAAK,CAACS,cAAc,cAAAR,qBAAA,cAAAA,qBAAA,GAAI,EAAE;MACpCS,UAAU,EAAE,MAAM;MAClBC,KAAK,GAAAT,qBAAA,GAAEF,KAAK,CAACY,eAAe,cAAAV,qBAAA,cAAAA,qBAAA,GAAIJ,KAAK,CAACe,MAAM,CAACC,KAAK,CAAC,GAAG,CAAC;MACvDR,YAAY,EAAE;IAChB,CAAC;IACDS,SAAS,EAAE;MACTC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,eAAe;MAC/Bb,KAAK,EAAE,MAAM;MACbc,MAAM,EAAE,EAAE;MACVC,WAAW,EAAE,CAAC;MACdC,WAAW,EAAEvB,KAAK,CAACe,MAAM,CAACS,IAAI,CAAC,GAAG,CAAC;MACnCC,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAE1B,KAAK,CAACe,MAAM,CAACY,OAAO,CAAC,EAAE,CAAC;MACzCC,iBAAiB,EAAE;IACrB,CAAC;IACDC,YAAY,EAAE;MACZnB,QAAQ,EAAE,EAAE;MACZG,KAAK,EAAE;IACT,CAAC;IACDiB,YAAY,EAAE;MACZC,IAAI,EAAE,CAAC;MACPL,eAAe,EAAE,iBAAiB;MAClCN,cAAc,EAAE,QAAQ;MACxBD,UAAU,EAAE,QAAQ;MACpBa,OAAO,EAAE;IACX,CAAC;IACDC,cAAc,EAAE;MACd1B,KAAK,EAAE,MAAM;MACbmB,eAAe,EAAE1B,KAAK,CAACe,MAAM,CAACY,OAAO,CAAC,EAAE,CAAC;MACzCF,YAAY,EAAE,EAAE;MAChBO,OAAO,EAAE,EAAE;MACXb,UAAU,EAAE;IACd,CAAC;IACDe,MAAM,EAAE;MACN3B,KAAK,EAAE,MAAM;MACbyB,OAAO,EAAE,EAAE;MACXb,UAAU,EAAE,YAAY;MACxBgB,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAEpC,KAAK,CAACe,MAAM,CAACS,IAAI,CAAC,GAAG;IAC1C,CAAC;IACDa,UAAU,EAAE;MACV3B,QAAQ,EAAE,EAAE;MACZG,KAAK,EAAEb,KAAK,CAACe,MAAM,CAACC,KAAK,CAAC,GAAG,CAAC;MAC9BJ,UAAU,EAAE;IACd,CAAC;IACD0B,eAAe,EAAE;MACfzB,KAAK,EAAEb,KAAK,CAACe,MAAM,CAACY,OAAO,CAAC,EAAE,CAAC;MAC/Bf,UAAU,EAAE;IACd;EACF,CAAC,CAAC;AAAA;;AAEJ;AACA;AACA;AACA,SAASX,MAAM","ignoreList":[]}
+{"version":3,"names":["StyleSheet","theme","styles","props","_props$sizeTitleLabel","_props$colortitleLabe","create","container","width","marginBottom","label","fontSize","sizeTitleLabel","fontWeight","color","colortitleLabel","colors","black","selectBox","flexDirection","alignItems","justifyContent","height","borderWidth","borderColor","gray","borderRadius","backgroundColor","neutral","paddingHorizontal","selectedText","modalOverlay","flex","padding","modalContainer","paddingVertical","option","paddingRight","paddingLeft","borderBottomWidth","borderBottomColor","optionText","closeButtonText"],"sources":["styles.ts"],"sourcesContent":["/**\r\n * IMPORTS\r\n */\r\nimport { StyleSheet } from \"react-native\";\r\n\r\n// typings\r\nimport { ISelectDropDownProps } from \"./interface\";\r\n\r\n// theme\r\nimport { theme } from \"../../../styles/theme/theme\";\r\n\r\nconst styles = (props: ISelectDropDownProps) =>\r\n  StyleSheet.create({\r\n    container: {\r\n      width: \"100%\",\r\n      marginBottom: 16,\r\n    },\r\n    label: {\r\n      fontSize: props.sizeTitleLabel ?? 16,\r\n      fontWeight: \"bold\",\r\n      color: props.colortitleLabel ?? theme.colors.black[100],\r\n      marginBottom: 5,\r\n    },\r\n    selectBox: {\r\n      flexDirection: \"row\",\r\n      alignItems: \"center\",\r\n      justifyContent: \"space-between\",\r\n      width: \"100%\",\r\n      height: 45,\r\n      borderWidth: 1,\r\n      borderColor: theme.colors.gray[700],\r\n      borderRadius: 10,\r\n      backgroundColor: theme.colors.neutral[25],\r\n      paddingHorizontal: 10,\r\n    },\r\n    selectedText: {\r\n      fontSize: 14,\r\n      color: \"#666\",\r\n    },\r\n    modalOverlay: {\r\n      flex: 1,\r\n      backgroundColor: \"rgba(0,0,0,0.5)\",\r\n      justifyContent: \"center\",\r\n      alignItems: \"center\",\r\n      padding: 24,\r\n    },\r\n    modalContainer: {\r\n      width: \"100%\",\r\n      backgroundColor: theme.colors.neutral[25],\r\n      borderRadius: 10,\r\n      paddingVertical: 15,\r\n      paddingHorizontal: 20,\r\n      alignItems: \"stretch\",\r\n    },\r\n    option: {\r\n      width: \"100%\",\r\n      paddingVertical: 10,\r\n      paddingRight: 10,\r\n      paddingLeft: 0,\r\n      alignItems: \"flex-start\",\r\n      borderBottomWidth: 1,\r\n      borderBottomColor: theme.colors.gray[300],\r\n    },\r\n    optionText: {\r\n      fontSize: 14,\r\n      color: theme.colors.black[100],\r\n      fontWeight: \"500\",\r\n    },\r\n    closeButtonText: {\r\n      color: theme.colors.neutral[25],\r\n      fontWeight: \"bold\",\r\n    },\r\n  });\r\n\r\n/**\r\n * EXPORTS\r\n */\r\nexport { styles };\r\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,cAAc;;AAEzC;;AAGA;AACA,SAASC,KAAK,QAAQ,6BAA6B;AAEnD,MAAMC,MAAM,GAAIC,KAA2B;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EAAA,OACzCL,UAAU,CAACM,MAAM,CAAC;IAChBC,SAAS,EAAE;MACTC,KAAK,EAAE,MAAM;MACbC,YAAY,EAAE;IAChB,CAAC;IACDC,KAAK,EAAE;MACLC,QAAQ,GAAAP,qBAAA,GAAED,KAAK,CAACS,cAAc,cAAAR,qBAAA,cAAAA,qBAAA,GAAI,EAAE;MACpCS,UAAU,EAAE,MAAM;MAClBC,KAAK,GAAAT,qBAAA,GAAEF,KAAK,CAACY,eAAe,cAAAV,qBAAA,cAAAA,qBAAA,GAAIJ,KAAK,CAACe,MAAM,CAACC,KAAK,CAAC,GAAG,CAAC;MACvDR,YAAY,EAAE;IAChB,CAAC;IACDS,SAAS,EAAE;MACTC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,eAAe;MAC/Bb,KAAK,EAAE,MAAM;MACbc,MAAM,EAAE,EAAE;MACVC,WAAW,EAAE,CAAC;MACdC,WAAW,EAAEvB,KAAK,CAACe,MAAM,CAACS,IAAI,CAAC,GAAG,CAAC;MACnCC,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAE1B,KAAK,CAACe,MAAM,CAACY,OAAO,CAAC,EAAE,CAAC;MACzCC,iBAAiB,EAAE;IACrB,CAAC;IACDC,YAAY,EAAE;MACZnB,QAAQ,EAAE,EAAE;MACZG,KAAK,EAAE;IACT,CAAC;IACDiB,YAAY,EAAE;MACZC,IAAI,EAAE,CAAC;MACPL,eAAe,EAAE,iBAAiB;MAClCN,cAAc,EAAE,QAAQ;MACxBD,UAAU,EAAE,QAAQ;MACpBa,OAAO,EAAE;IACX,CAAC;IACDC,cAAc,EAAE;MACd1B,KAAK,EAAE,MAAM;MACbmB,eAAe,EAAE1B,KAAK,CAACe,MAAM,CAACY,OAAO,CAAC,EAAE,CAAC;MACzCF,YAAY,EAAE,EAAE;MAChBS,eAAe,EAAE,EAAE;MACnBN,iBAAiB,EAAE,EAAE;MACrBT,UAAU,EAAE;IACd,CAAC;IACDgB,MAAM,EAAE;MACN5B,KAAK,EAAE,MAAM;MACb2B,eAAe,EAAE,EAAE;MACnBE,YAAY,EAAE,EAAE;MAChBC,WAAW,EAAE,CAAC;MACdlB,UAAU,EAAE,YAAY;MACxBmB,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAEvC,KAAK,CAACe,MAAM,CAACS,IAAI,CAAC,GAAG;IAC1C,CAAC;IACDgB,UAAU,EAAE;MACV9B,QAAQ,EAAE,EAAE;MACZG,KAAK,EAAEb,KAAK,CAACe,MAAM,CAACC,KAAK,CAAC,GAAG,CAAC;MAC9BJ,UAAU,EAAE;IACd,CAAC;IACD6B,eAAe,EAAE;MACf5B,KAAK,EAAEb,KAAK,CAACe,MAAM,CAACY,OAAO,CAAC,EAAE,CAAC;MAC/Bf,UAAU,EAAE;IACd;EACF,CAAC,CAAC;AAAA;;AAEJ;AACA;AACA;AACA,SAASX,MAAM","ignoreList":[]}

package/lib/typescript/src/components/modals/modal-activities/data-activities/index.d.ts

@@ -1,19 +1,14 @@
 /**
- * dados para os tipos de atividades selecionado
+ * Tipagem da atividade
  */
-export declare const activities: {
-    trabalho: {
-        id: number;
-        referencia: string;
-        cor_hex: string;
-        descricao: string;
-        tipo: string;
-    }[];
-    descanso: {
-        id: number;
-        referencia: string;
-        cor_hex: string;
-        descricao: string;
-        tipo: string;
-    }[];
-};
+export interface IActivity {
+    id: number;
+    referencia: string;
+    cor_hex: string;
+    descricao: string;
+    tipo: "trabalho" | "descanso";
+}
+/**
+ * Atividades específicas por tipo de usuário
+ */
+export declare const activitiesByDriverType: Record<string, Record<string, IActivity[]>>;

package/lib/typescript/src/components/modals/modal-activities/helpers/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Função que retorna as atividades por tipo de atividade e tipo de usuário (normal ou carregador)
+ * @param driverType
+ * @param activityType
+ * @returns
+ */
+declare const getActivitiesByType: (driverType: string, activityType: string) => import("../data-activities").IActivity[];
+/**
+ * EXPORTS
+ */
+export { getActivitiesByType };

package/lib/typescript/src/components/selects/select-option/styles.d.ts

@@ -37,12 +37,15 @@ declare const styles: (props: ISelectDropDownProps) => {
         width: "100%";
         backgroundColor: string;
         borderRadius: number;
-        padding: number;
-        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        alignItems: "stretch";
     };
     option: {
         width: "100%";
-        padding: number;
+        paddingVertical: number;
+        paddingRight: number;
+        paddingLeft: number;
         alignItems: "flex-start";
         borderBottomWidth: number;
         borderBottomColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-exp-fig",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/modals/modal-activities/data-activities/index.ts

@@ -1,65 +1,95 @@
-/**
- * dados para os tipos de atividades selecionado
- */
-export const activities = {
-  trabalho: [
-    {
-      id: 1,
-      referencia: "operacao_veiculo",
-      cor_hex: "000000",
-      descricao: "Operação com Veículo",
-      tipo: "trabalho",
-    },
-    {
-      id: 2,
-      referencia: "aguardando_carga",
-      cor_hex: "000000",
-      descricao: "Em carga",
-      tipo: "trabalho",
-    },
-    {
-      id: 3,
-      referencia: "aguardando_descarga",
-      cor_hex: "000000",
-      descricao: "Em Descarga",
-      tipo: "trabalho",
-    },
-    {
-      id: 8,
-      referencia: "disposicao_veiculo_parado",
-      cor_hex: "000000",
-      descricao: "Disposição com Veículo Parado",
-      tipo: "trabalho",
-    },
-  ],
-  descanso: [
-    {
-      id: 5,
-      referencia: "repouso_semanal",
-      cor_hex: "000000",
-      descricao: "Repouso Semanal",
-      tipo: "descanso",
-    },
-    {
-      id: 6,
-      referencia: "repouso_noturno",
-      cor_hex: "000000",
-      descricao: "Repouso Noturno",
-      tipo: "descanso",
-    },
-    {
-      id: 7,
-      referencia: "refeicao",
-      cor_hex: "000000",
-      descricao: "Refeição",
-      tipo: "descanso",
-    },
-    {
-      id: 9,
-      referencia: "descanso",
-      cor_hex: "000000",
-      descricao: "Descanso",
-      tipo: "descanso",
-    },
-  ],
-};
+/**
+ * Tipagem da atividade
+ */
+export interface IActivity {
+  id: number;
+  referencia: string;
+  cor_hex: string;
+  descricao: string;
+  tipo: "trabalho" | "descanso";
+}
+
+/**
+ * Lista base de atividades padrão (normal)
+ */
+const baseActivities: Record<string, IActivity[]> = {
+  trabalho: [
+    {
+      id: 1,
+      referencia: "operacao_veiculo",
+      cor_hex: "#000000",
+      descricao: "Operação com Veículo",
+      tipo: "trabalho",
+    },
+    {
+      id: 2,
+      referencia: "aguardando_carga",
+      cor_hex: "#000000",
+      descricao: "Em Carga",
+      tipo: "trabalho",
+    },
+    {
+      id: 3,
+      referencia: "aguardando_descarga",
+      cor_hex: "#000000",
+      descricao: "Em Descarga",
+      tipo: "trabalho",
+    },
+    {
+      id: 8,
+      referencia: "disposicao_veiculo_parado",
+      cor_hex: "#000000",
+      descricao: "Disposição com Veículo Parado",
+      tipo: "trabalho",
+    },
+  ],
+  descanso: [
+    {
+      id: 5,
+      referencia: "repouso_semanal",
+      cor_hex: "#000000",
+      descricao: "Repouso Semanal",
+      tipo: "descanso",
+    },
+    {
+      id: 6,
+      referencia: "repouso_noturno",
+      cor_hex: "#000000",
+      descricao: "Repouso Noturno",
+      tipo: "descanso",
+    },
+    {
+      id: 7,
+      referencia: "refeicao",
+      cor_hex: "#000000",
+      descricao: "Refeição",
+      tipo: "descanso",
+    },
+    {
+      id: 9,
+      referencia: "descanso",
+      cor_hex: "#000000",
+      descricao: "Descanso",
+      tipo: "descanso",
+    },
+  ],
+};
+
+/**
+ * Atividades específicas por tipo de usuário
+ */
+export const activitiesByDriverType: Record<string, Record<string, IActivity[]>> = {
+  normal: baseActivities,
+  carregador: {
+    trabalho: [
+      {
+        id: 1,
+        referencia: "operacao_veiculo",
+        cor_hex: "#000000",
+        descricao: "Operação com Veículo",
+        tipo: "trabalho",
+      },
+    ],
+    descanso: baseActivities.descanso!,
+  },
+};

package/src/components/modals/modal-activities/helpers/index.ts

@@ -0,0 +1,25 @@
+/**
+ * IMPORTS
+ */
+import { activitiesByDriverType } from "../data-activities";
+
+/**
+ * Função que retorna as atividades por tipo de atividade e tipo de usuário (normal ou carregador)
+ * @param driverType
+ * @param activityType
+ * @returns
+ */
+const getActivitiesByType = (driverType: string, activityType: string) => {
+  const driverActivities = activitiesByDriverType[driverType];
+
+  if (!driverActivities) {
+    return activitiesByDriverType["carregador"]![activityType] || [];
+  }
+
+  return driverActivities[activityType] || [];
+};
+
+/**
+ * EXPORTS
+ */
+export { getActivitiesByType };

package/src/components/modals/modal-activities/index.tsx

@@ -1,137 +1,138 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Modal, TouchableOpacity, FlatList } from "react-native";
-
-// components
-
-import Box from "../../box";
-
-// commons / icons
-import { Icons } from "../../../common/icons-svg";
-import { getIconModalActivities } from "../../../common/icons-svg/modal-activities";
-
-// styles
-import { theme } from "../../../styles/theme/theme";
-import { Typography } from "../../typography";
-import { Button } from "../../button";
-
-//typing
-import { IModalActivities, IActivity } from "./interface";
-
-// atividades
-import { activities } from "./data-activities";
-
-export const ModalActivities: React.FC<IModalActivities> = ({
-  onClose,
-  handleActivity,
-  activityType,
-  isLoading,
-  style,
-}) => {
-  return (
-    <Modal animationType="fade" transparent={true} onRequestClose={onClose}>
-      <Box
-        backgroundColor={"rgba(0, 0, 0, 0.7)"}
-        flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-      >
-        <Box
-          height={310}
-          width={"92%"}
-          backgroundColor={theme.colors.neutral[25]}
-          borderStyled={{
-            borderColor: theme.colors.blue[500],
-            borderWidth: theme.borderWidths.thick,
-            borderRadius: theme.borderWidths.thick_medium,
-          }}
-          paddingStyle={{
-            padding: theme.paddings.md,
-          }}
-          style={{ position: "relative" }}
-        >
-          <Box
-            width={"100%"}
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography
-              text="Atividades"
-              size={theme.fontSizes.md}
-              color={theme.colors.blue[500]}
-              fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.xl}
-            />
-
-            <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
-              <Icons icon="CLOSED" color={theme.colors.blue[500]} />
-            </TouchableOpacity>
-          </Box>
-          {/* as atividades  */}
-          <Box marginStyle={{ marginTop: theme.margins["2xl"] }}>
-            <FlatList
-              data={activities[activityType]}
-              numColumns={3}
-              keyExtractor={(item) => item.id.toString()}
-              scrollEnabled={false}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={{
-                    alignItems: "center",
-                    width: 110,
-                    marginBottom: theme.margins["2xl"], // espaço entre as linhas
-                  }}
-                  onPress={() => handleActivity(item as IActivity)}
-                >
-                  {getIconModalActivities(item.referencia)}
-
-                  <Typography
-                    text={item.descricao}
-                    size={theme.fontSizes.xs}
-                    color={theme.colors.blue[500]}
-                    lineHeight={theme.fontSizes.md}
-                    fontFamily={theme.fonts.inter_medium_500}
-                    fontWeight="500"
-                    align="center"
-                    marginTop={5}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-          </Box>
-
-          <Button
-            title={"CANCELAR ATIVIDADE"}
-            width="100%"
-            height={40}
-            activeOpacity={0.7}
-            onPress={onClose}
-            backgroundColor={theme.colors.blue[500]}
-            buttonTextStyle={{
-              color: theme.colors.neutral[25],
-              fontFamily: theme.fonts.inter_medium_500,
-              fontSize: theme.fontSizes.md,
-              fontWeight: "500",
-            }}
-            flexStyle={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-            borderStyled={{
-              borderWidth: theme.borderWidths.thin,
-              borderColor: theme.colors.blue[500],
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
-            marginStyle={{ marginLeft: theme.margins.md }}
-            isLoading={isLoading ?? false}
-            style={[style, { position: "absolute", bottom: 10, left: 0 }]}
-          />
-        </Box>
-      </Box>
-    </Modal>
-  );
-};
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, TouchableOpacity, FlatList } from "react-native";
+
+// components
+
+import Box from "../../box";
+
+// commons / icons
+import { Icons } from "../../../common/icons-svg";
+import { getIconModalActivities } from "../../../common/icons-svg/modal-activities";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+import { Typography } from "../../typography";
+import { Button } from "../../button";
+
+//typing
+import { IModalActivities, IActivity } from "./interface";
+
+// atividades
+import { getActivitiesByType } from "./helpers";
+
+export const ModalActivities: React.FC<IModalActivities> = ({
+  onClose,
+  handleActivity,
+  activityType,
+  driverType = "carregador",
+  isLoading,
+  style,
+}) => {
+  return (
+    <Modal animationType="fade" transparent={true} onRequestClose={onClose}>
+      <Box
+        backgroundColor={"rgba(0, 0, 0, 0.7)"}
+        flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+      >
+        <Box
+          height={310}
+          width={"92%"}
+          backgroundColor={theme.colors.neutral[25]}
+          borderStyled={{
+            borderColor: theme.colors.blue[500],
+            borderWidth: theme.borderWidths.thick,
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            padding: theme.paddings.md,
+          }}
+          style={{ position: "relative" }}
+        >
+          <Box
+            width={"100%"}
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              text="Atividades"
+              size={theme.fontSizes.md}
+              color={theme.colors.blue[500]}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.xl}
+            />
+
+            <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
+              <Icons icon="CLOSED" color={theme.colors.blue[500]} />
+            </TouchableOpacity>
+          </Box>
+          {/* as atividades  */}
+          <Box marginStyle={{ marginTop: theme.margins["2xl"] }}>
+            <FlatList
+              data={getActivitiesByType(driverType, activityType)}
+              numColumns={3}
+              keyExtractor={(item) => item.id.toString()}
+              scrollEnabled={false}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={{
+                    alignItems: "center",
+                    width: 110,
+                    marginBottom: theme.margins["2xl"], // espaço entre as linhas
+                  }}
+                  onPress={() => handleActivity(item as IActivity)}
+                >
+                  {getIconModalActivities(item.referencia)}
+
+                  <Typography
+                    text={item.descricao}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.blue[500]}
+                    lineHeight={theme.fontSizes.md}
+                    fontFamily={theme.fonts.inter_medium_500}
+                    fontWeight="500"
+                    align="center"
+                    marginTop={5}
+                  />
+                </TouchableOpacity>
+              )}
+            />
+          </Box>
+
+          <Button
+            title={"CANCELAR ATIVIDADE"}
+            width="100%"
+            height={40}
+            activeOpacity={0.7}
+            onPress={onClose}
+            backgroundColor={theme.colors.blue[500]}
+            buttonTextStyle={{
+              color: theme.colors.neutral[25],
+              fontFamily: theme.fonts.inter_medium_500,
+              fontSize: theme.fontSizes.md,
+              fontWeight: "500",
+            }}
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            borderStyled={{
+              borderWidth: theme.borderWidths.thin,
+              borderColor: theme.colors.blue[500],
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+            marginStyle={{ marginLeft: theme.margins.md }}
+            isLoading={isLoading ?? false}
+            style={[style, { position: "absolute", bottom: 10, left: 0 }]}
+          />
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

package/src/components/modals/modal-activities/interface.d.ts

@@ -1,32 +1,34 @@
-/**
- * IMPORTS
- */
-import { ModalProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../../styles/global/interface";
-
-interface IActivity {
-  id: number;
-  referencia: string;
-  cor_hex: string;
-  descricao: string;
-  tipo: "trabalho" | "descanso";
-}
-
-interface IModalActivities extends ModalProps, IGlobalCss {
-  /** função que fecha modal */
-  onClose: () => void;
-
-  /** tipo de atividades */
-  activityType: IActivity["tipo"];
-
-  /** função que manda atividade selecionada */
-  // eslint-disable-next-line no-unused-vars
-  handleActivity: (activity: IActivity) => void;
-}
-
-/**
- * EXPORTS
- */
-export { IModalActivities, IActivity };
+/**
+ * IMPORTS
+ */
+import { ModalProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../../styles/global/interface";
+
+interface IActivity {
+  id: number;
+  referencia: string;
+  cor_hex: string;
+  descricao: string;
+  tipo: "trabalho" | "descanso";
+}
+
+interface IModalActivities extends ModalProps, IGlobalCss {
+  /** função que fecha modal */
+  onClose: () => void;
+
+  /** tipo de atividades */
+  activityType: IActivity["tipo"];
+
+  /** função que manda atividade selecionada */
+  // eslint-disable-next-line no-unused-vars
+  handleActivity: (activity: IActivity) => void;
+
+  driverType?: "normal" | "carregador";
+}
+
+/**
+ * EXPORTS
+ */
+export { IModalActivities, IActivity };