jornada-ui 0.4.16 → 0.4.18

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",
+    },
+  ],
+};

package/src/components/modals/modal-change-activitie-history/helpers/index.ts

@@ -0,0 +1,15 @@
+/**
+ * CONSTANTS
+ */
+const optionsActivities = [
+  { label: "Selecione atividade", value: "none", key: 0 },
+  { label: "Descanso", value: "descanso", key: 9 },
+  { label: "Repouso Noturno", value: "repouso_noturno", key: 6 },
+  { label: "Refeição", value: "refeição", key: 7 },
+  { label: "Repouso Semanal", value: "repouso_semanal", key: 5 },
+];
+
+/**
+ * EXPORTS
+ */
+export { optionsActivities };

package/src/components/modals/modal-change-activitie-history/index.tsx

@@ -0,0 +1,189 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+// libs RN
+import { Modal, View } from "react-native";
+
+// componentes
+import Box from "../../box";
+import Button from "../../button";
+import Typography from "../../typography";
+import SelectOption from "../../selects/select-option";
+
+// assets / icons
+import { Icons } from "../../../common/icons-svg";
+
+// helpers / data
+import { optionsActivities } from "./helpers";
+
+// typings
+import type { IModalChangeActivityProps } from "./interface";
+
+// styles / theme
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente Modal para alteração de atividade.
+ */
+export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  descricao,
+}) => {
+  const [isLoading] = React.useState(false);
+
+  const initial = (descricao ?? "").toLowerCase().replace(/\s+/g, "_");
+  const [selectedOption, setSelectedOption] = React.useState(initial || "none");
+
+  const handleConfirm = () => {
+    const selected = optionsActivities?.find((activity) => activity.value === selectedOption);
+
+    if (selected && selected.value !== "none") {
+      modalConfirm({
+        label: selected.label,
+        value: selected.value,
+        key: selected.key,
+      });
+    }
+
+    // sempre fechar o modal
+    onClose();
+  };
+
+  const handleSelectDown = (activity: string) => {
+    const option = optionsActivities.find((o) => o.label === activity || o.value === activity);
+
+    if (option) setSelectedOption(option.value);
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <Box
+          width={346}
+          backgroundColor={theme.colors.orange[500]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            paddingLeft: theme.paddings["2xs"],
+            paddingRight: theme.paddings["2xs"],
+            paddingTop: theme.paddings.sm,
+            paddingBottom: theme.paddings.sm,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: theme.margins["2xs"], marginLeft: theme.margins["1xs"] }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.black[10]}
+              background={theme.colors.yellow[50]}
+              size={theme.fontSizes["2xl"]}
+            />
+
+            <Typography
+              text="Alterar Atividade"
+              color="#fff"
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.md}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{ padding: theme.paddings.xs }}
+            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+          >
+            <Box flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }} width={"100%"}>
+              <Typography
+                text={`Deseja realmente alterar sua atividade?`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+                style={{ flexWrap: "wrap", maxWidth: "100%" }}
+              />
+            </Box>
+
+            <SelectOption
+              titleLabel="Selecione atividade"
+              sizeTitleLabel={theme.fontSizes.xs}
+              dataOption={optionsActivities}
+              handleSelectDown={handleSelectDown}
+              backgroundColor={theme.colors.neutral[300]}
+            />
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
+            >
+              <Button
+                title="CANCELAR"
+                onPress={onClose}
+                width={"48%"}
+                height={36}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: theme.colors.blue[100],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+              <Button
+                title="CONFIRMAR"
+                onPress={handleConfirm}
+                width={"48%"}
+                height={36}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.blue[100]}
+                buttonTextStyle={{
+                  color: "#fff",
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};

package/src/components/modals/modal-change-activitie-history/interface.ts

@@ -0,0 +1,16 @@
+/**
+ * IMPROTS
+ */
+
+interface IModalChangeActivityProps {
+  visible: boolean;
+  onClose: () => void;
+  // eslint-disable-next-line no-unused-vars
+  modalConfirm: (newData: { label: string; value: string; key: number }) => void;
+  descricao: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { type IModalChangeActivityProps };