jornada-ui 0.4.17 → 0.4.19

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

@@ -1,169 +1,173 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { Modal, TouchableOpacity, FlatList } from "react-native";
-
-// components
-import Box from "../box";
-import Button from "../button";
-import Typography from "../typography";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-//typing
-import type { IModalTypeActivities, IActivity } from "./interface";
-
-// atividades
-import { activities } from "./mock";
-
-// utils
-import { getIconByProperty, type PropertyType } from "../../utils/get-icon-by-property";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const NUM_COLS = 3;
-const GUTTER = 8; // espaço horizontal entre botões
-const ROW_SPACE = 12; // espaço vertical entre linhas
-
-const ModalTest = forwardRef<any, IModalTypeActivities>(
-  (
-    { visible, onClose, handleSelectActivity, activityType, isLoading, style },
-    ref
-  ): React.ReactElement => {
-    return (
-      <Modal
-        ref={ref}
-        animationType="fade"
-        transparent={true}
-        onRequestClose={onClose}
-        visible={visible}
-      >
-        <Box
-          backgroundColor={"rgba(0, 0, 0, 0.7)"}
-          flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-        >
-          <Box
-            height={330}
-            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"] }}
-              flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-            >
-              <FlatList
-                data={activities[activityType]}
-                numColumns={NUM_COLS}
-                keyExtractor={(item) => String(item.id)}
-                scrollEnabled={false}
-                renderItem={({ item, index }) => {
-                  const isLastCol = (index + 1) % NUM_COLS === 0;
-
-                  return (
-                    <TouchableOpacity
-                      style={{
-                        alignItems: "center",
-                        justifyContent: "flex-start",
-                        width: 110,
-                        marginRight: isLastCol ? 0 : GUTTER, // espaço entre colunas
-                        marginBottom: ROW_SPACE, // espaço entre linhas
-                        paddingVertical: 12,
-                        borderRadius: 8,
-                      }}
-                      onPress={() => handleSelectActivity(item as IActivity)}
-                    >
-                      {getIconByProperty(item.referencia as PropertyType)}
-
-                      <Typography
-                        text={item.descricao}
-                        size={theme.fontSizes.xs}
-                        color={theme.colors.blue[500]}
-                        lineHeight={theme.fontSizes.lg}
-                        fontFamily={theme.fonts.inter_medium_500}
-                        fontWeight="500"
-                        align="center"
-                        marginTop={5}
-                        numberOfLines={3} // <= limita a 2 linhas
-                        ellipsizeMode="tail" // <= se passar, coloca “...”
-                      />
-                    </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>
-    );
-  }
-);
-
-ModalTest.displayName = "ModalTest";
-
-/**
- * EXPORT
- */
-export default asBaseComponent(ModalTest);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Modal, TouchableOpacity, FlatList } from "react-native";
+
+// components
+import Box from "../box";
+import Button from "../button";
+import Typography from "../typography";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+//typing
+import type { IModalTypeActivities, IActivity } from "./interface";
+
+// atividades
+import { activities, activitiesReserva } from "./mock";
+
+// utils
+import { getIconByProperty, type PropertyType } from "../../utils/get-icon-by-property";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const NUM_COLS = 3;
+const GUTTER = 8; // espaço horizontal entre botões
+const ROW_SPACE = 12; // espaço vertical entre linhas
+
+const ModalTest = forwardRef<any, IModalTypeActivities>(
+  (
+    { visible, onClose, driverType, handleSelectActivity, activityType, isLoading, style },
+    ref
+  ): React.ReactElement => {
+    return (
+      <Modal
+        ref={ref}
+        animationType="fade"
+        transparent={true}
+        onRequestClose={onClose}
+        visible={visible}
+      >
+        <Box
+          backgroundColor={"rgba(0, 0, 0, 0.7)"}
+          flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+        >
+          <Box
+            height={330}
+            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"] }}
+              flexStyle={{ flex: 1, justifyContent: "center", alignItems: "flex-start" }}
+            >
+              <FlatList
+                data={
+                  driverType === "normal"
+                    ? activities[activityType]
+                    : activitiesReserva[activityType]
+                }
+                numColumns={NUM_COLS}
+                keyExtractor={(item) => String(item.id)}
+                scrollEnabled={false}
+                renderItem={({ item, index }) => {
+                  const isLastCol = (index + 1) % NUM_COLS === 0;
+
+                  return (
+                    <TouchableOpacity
+                      style={{
+                        alignItems: "center",
+                        justifyContent: "flex-start",
+                        width: 110,
+                        marginRight: isLastCol ? 0 : GUTTER, // espaço entre colunas
+                        marginBottom: ROW_SPACE, // espaço entre linhas
+                        paddingVertical: 12,
+                        borderRadius: 8,
+                      }}
+                      onPress={() => handleSelectActivity(item as IActivity)}
+                    >
+                      {getIconByProperty(item.referencia as PropertyType)}
+
+                      <Typography
+                        text={item.descricao}
+                        size={theme.fontSizes.xs}
+                        color={theme.colors.blue[500]}
+                        lineHeight={theme.fontSizes.lg}
+                        fontFamily={theme.fonts.inter_medium_500}
+                        fontWeight="500"
+                        align="center"
+                        marginTop={5}
+                        numberOfLines={3} // <= limita a 2 linhas
+                        ellipsizeMode="tail" // <= se passar, coloca “...”
+                      />
+                    </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>
+    );
+  }
+);
+
+ModalTest.displayName = "ModalTest";
+
+/**
+ * EXPORT
+ */
+export default asBaseComponent(ModalTest);

package/src/components/modal-type-activities/interface.ts

@@ -1,34 +1,36 @@
-/**
- * IMPORTS
- */
-import type { ModalProps } from "react-native";
-import type { IGlobalCss } from "../../styles/global/interface";
-
-// typing
-interface IActivity {
-  id: number;
-  referencia: string;
-  cor_hex: string;
-  descricao: string;
-  tipo: "trabalho" | "descanso";
-}
-
-interface IModalTypeActivities extends ModalProps, IGlobalCss {
-  /** função que fecha modal */
-  onClose: () => void;
-
-  /** tipo de atividades */
-  activityType: IActivity["tipo"];
-
-  /** se está carregando */
-  isLoading: boolean;
-
-  /** função que seleciona atividade */
-  // eslint-disable-next-line no-unused-vars
-  handleSelectActivity: (activity: IActivity) => void;
-}
-
-/**
- * EXPORTS
- */
-export type { IModalTypeActivities, IActivity };
+/**
+ * IMPORTS
+ */
+import type { ModalProps } from "react-native";
+import type { IGlobalCss } from "../../styles/global/interface";
+
+// typing
+interface IActivity {
+  id: number;
+  referencia: string;
+  cor_hex: string;
+  descricao: string;
+  tipo: "trabalho" | "descanso";
+}
+
+interface IModalTypeActivities extends ModalProps, IGlobalCss {
+  /** função que fecha modal */
+  onClose: () => void;
+
+  /** tipo de atividades */
+  activityType: IActivity["tipo"];
+
+  driverType?: "normal" | "reserva";
+
+  /** se está carregando */
+  isLoading: boolean;
+
+  /** função que seleciona atividade */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectActivity: (activity: IActivity) => void;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IModalTypeActivities, IActivity };

package/src/components/modal-type-activities/mock/index.ts

@@ -1,65 +1,103 @@
-/**
- * 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: 9,
-      referencia: "descanso",
-      cor_hex: "000000",
-      descricao: "Descanso",
-      tipo: "descanso",
-    },
-    {
-      id: 7,
-      referencia: "refeicao",
-      cor_hex: "000000",
-      descricao: "Refeição",
-      tipo: "descanso",
-    },
-    {
-      id: 6,
-      referencia: "repouso_noturno",
-      cor_hex: "000000",
-      descricao: "Repouso Noturno",
-      tipo: "descanso",
-    },
-    {
-      id: 5,
-      referencia: "repouso_semanal",
-      cor_hex: "000000",
-      descricao: "Repouso Semanal",
-      tipo: "descanso",
-    },
-  ],
-};
+/**
+ * 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: 9,
+      referencia: "descanso",
+      cor_hex: "000000",
+      descricao: "Descanso",
+      tipo: "descanso",
+    },
+    {
+      id: 7,
+      referencia: "refeicao",
+      cor_hex: "000000",
+      descricao: "Refeição",
+      tipo: "descanso",
+    },
+    {
+      id: 6,
+      referencia: "repouso_noturno",
+      cor_hex: "000000",
+      descricao: "Repouso Noturno",
+      tipo: "descanso",
+    },
+    {
+      id: 5,
+      referencia: "repouso_semanal",
+      cor_hex: "000000",
+      descricao: "Repouso Semanal",
+      tipo: "descanso",
+    },
+  ],
+};
+
+export const activitiesReserva = {
+  trabalho: [
+    {
+      id: 10,
+      referencia: "reserva",
+      cor_hex: "000000",
+      descricao: "Disposição Reserva",
+      tipo: "trabalho",
+    },
+  ],
+  descanso: [
+    {
+      id: 6,
+      atividade_id: 6,
+      referencia: "repouso_noturno",
+      cor_hex: "000000",
+      descricao: "Repouso Noturno",
+      tipo: "descanso",
+    },
+    {
+      id: 7,
+      atividade_id: 7,
+      referencia: "refeicao",
+      cor_hex: "000000",
+      descricao: "Refeição",
+      tipo: "descanso",
+    },
+    {
+      id: 5,
+      atividade_id: 5,
+      referencia: "repouso_semanal",
+      cor_hex: "000000",
+      descricao: "Repouso Semanal",
+      tipo: "descanso",
+    },
+  ],
+};