jornada-ui 0.4.16 → 0.4.18

package/src/components/step-indicator/index.tsx

@@ -1,8 +1,8 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import React, { useState, forwardRef, useImperativeHandle, useRef } from "react";
+import { View, Text, TouchableOpacity, FlatList, FlatList as FlatListType } from "react-native";
+
+// components
+import { ModalChangeActivity } from "../modals/modal-change-activitie-history";
 
 // commons / svg
 import { Icons } from "../../common/icons-svg";
@@ -10,182 +10,253 @@ import { Icons } from "../../common/icons-svg";
 // helpers
 import { getIconKeyByValue } from "./helpers/get-icon-by-status";
 
-// utils
-import { formHoursMinute } from "../../utils/format-date";
-
 // typings
 import type { IStepIndicator } from "./interface";
 
+// utils
+import { formHoursMinute } from "../../utils/format-date";
+
 // styles
 import { styles } from "./styles";
 import { theme } from "../../styles/theme/theme";
+import { asBaseComponent } from "../../@types/as-base-component";
 
 /**
  * Componente StepIndicator para a interação da ui.
  */
+const StepIndicator = forwardRef<any, IStepIndicator>(
+  (
+    { data = [], type, textColorDescription, titleColor, titleNumberColor, onChangeActivity },
+    ref
+  ) => {
+    const StepDefault = () => {
+      const [isModalVisible, setIsModalVisible] = useState(false);
+      const [currentStepIndex, setCurrentStepIndex] = useState<number | null>(null);
+      const [stepData, setStepData] = useState(data);
 
-const StepIndicator: React.FC<IStepIndicator> = ({
-  data = [],
-  type,
-  textColorDescription,
-  titleColor,
-  titleNumberColor,
-  handleOnPressActivitie,
-}) => {
-  const StepDefault = () => {
-    return (
-      <>
-        {data!.length > 0 &&
-          data!.map((history, index) => {
-            // pegando primeira atividade pelo index
-            const isFirst = index === 0;
-            //pegando o tipo de atividade
-            const isEditableType = history.tipo === "descanso";
-
-            // pegando o valor para saber se atividade ta ou não sincronizada
-            const isSynced = history?.sincronizado === true;
-
-            const canEdit = isFirst && isEditableType && isSynced;
+      const flatListRef = useRef<FlatListType<any>>(null);
 
-            return (
-              <TouchableOpacity
-                testID="step-indicator"
-                activeOpacity={0.7}
-                key={history.id}
-                style={styles({}).containerIndicator}
-                disabled={!canEdit}
-                onPress={() => handleOnPressActivitie(history as any)}
-              >
-                <View style={styles({ sincronizado: history.sincronizado }).containerBall}>
-                  {data!?.length > 1 && index < data!?.length - 1 && (
-                    <View
-                      style={{
-                        width: 2,
-                        height: 84,
-                        marginTop: 116,
-                        position: "relative",
-                        backgroundColor: history.sincronizado
-                          ? theme.colors.blue[500]
-                          : theme.colors.orange[150],
-                      }}
-                    />
-                  )}
-                  <Text style={styles({ titleNumberColor }).titleNumber}>
-                    {data!?.length - index}
-                  </Text>
-                </View>
+      const handleOnPressActivitie = (stepItem: any, index: number) => {
+        const desc = stepItem?.descricao?.toLowerCase?.();
+        if (!desc) return;
 
-                <View style={styles({}).containerMain}>
-                  <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
+        const isDescanso = ["descanso", "refeição", "repouso_noturno", "repouso_semanal"].includes(
+          desc.replace(/\s+/g, "_")
+        );
 
-                  {history?.data_inicio && (
-                    <Text style={styles({ textColorDescription }).titleDescription}>
-                      {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
-                    </Text>
-                  )}
+        if (isDescanso && stepItem?.sincronizado === true) {
+          setCurrentStepIndex(index);
+          setIsModalVisible(true);
+        }
+      };
 
-                  {history.duracao_segundos && (
-                    <Text style={styles({ textColorDescription }).titleDescription}>
-                      Duração: {formHoursMinute(history?.duracao_segundos as string)}
-                    </Text>
-                  )}
-                </View>
-              </TouchableOpacity>
-            );
-          })}
-      </>
-    );
-  };
-
-  const StepCustom = () => {
-    return (
-      <View
-        style={{
-          width: "100%",
-          height: 84,
-          paddingHorizontal: 24,
-          display: "flex",
-          flexDirection: "row",
-        }}
-      >
-        {data.map((step, indexCustom) => {
-          const descricao = getIconKeyByValue(step.descricao);
-
-          return (
-            <React.Fragment key={`step-${indexCustom}`}>
-              <View
-                style={{
-                  width: 45,
-                  height: 45,
-                  backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
-                  borderRadius: 50,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  borderWidth: 1,
-                  borderColor: "#fff",
-                }}
-              >
+      const handleConfirmModal = (newData: { label: string; value: string; key: number }) => {
+        if (currentStepIndex !== null) {
+          const updatedStep = {
+            ...stepData[currentStepIndex],
+            descricao: newData.label,
+            referencia: newData.value,
+            jr_tipo_atividade_id: newData.key,
+          };
+
+          const newSteps = stepData.map((item, index) =>
+            index === currentStepIndex ? updatedStep : item
+          );
+
+          setStepData(newSteps as any);
+
+          if (onChangeActivity) {
+            onChangeActivity(updatedStep);
+          }
+        }
+
+        setIsModalVisible(false);
+        setCurrentStepIndex(null);
+      };
+
+      // render item padrão do step indicator
+      const renderItem = ({ item: history, index }: { item: any; index: number }) => {
+        const isFirst = index === 0;
+        const isEditableType = history.tipo === "descanso";
+        const isSynced = history?.sincronizado === true;
+        const canEdit = isFirst && isEditableType && isSynced;
+
+        return (
+          <TouchableOpacity
+            testID="step-indicator"
+            activeOpacity={0.7}
+            style={styles({}).containerIndicator}
+            disabled={!canEdit}
+            onPress={() => handleOnPressActivitie(history, index)}
+          >
+            <View style={styles({ sincronizado: history.sincronizado }).containerBall}>
+              {stepData.length > 1 && index < stepData.length - 1 && (
+                <View
+                  style={{
+                    width: 2,
+                    height: 84,
+                    marginTop: 116,
+                    position: "relative",
+                    backgroundColor: history.sincronizado
+                      ? theme.colors.blue[500]
+                      : theme.colors.orange[150],
+                  }}
+                />
+              )}
+              <Text style={styles({ titleNumberColor }).titleNumber}>
+                {stepData.length - index}
+              </Text>
+            </View>
+
+            <View style={styles({}).containerMain}>
+              <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
+
+              {history?.data_inicio && (
+                <Text style={styles({ textColorDescription }).titleDescription}>
+                  {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
+                </Text>
+              )}
+
+              {history.duracao_segundos && (
+                <Text style={styles({ textColorDescription }).titleDescription}>
+                  Duração: {formHoursMinute(history?.duracao_segundos as string)}
+                </Text>
+              )}
+            </View>
+          </TouchableOpacity>
+        );
+      };
+
+      // Expor funções para o pai via forwardRef
+      useImperativeHandle(ref, () => ({
+        scrollToIndex: (index: number) => {
+          flatListRef.current?.scrollToIndex({ index, animated: true });
+        },
+        openModalAt: (index: number) => {
+          if (stepData[index]) {
+            setCurrentStepIndex(index);
+            setIsModalVisible(true);
+          }
+        },
+        resetSteps: (newData: any[]) => {
+          setStepData(newData);
+        },
+      }));
+
+      return (
+        <>
+          <FlatList
+            ref={flatListRef}
+            data={stepData}
+            renderItem={renderItem}
+            keyExtractor={(item, index) => String(item?.id ?? String(index))}
+            showsVerticalScrollIndicator={false}
+          />
+
+          {isModalVisible && (
+            <ModalChangeActivity
+              visible={isModalVisible}
+              modalConfirm={handleConfirmModal}
+              descricao=""
+              onClose={() => setIsModalVisible(false)}
+            />
+          )}
+        </>
+      );
+    };
+
+    const StepCustom = () => {
+      return (
+        <View
+          style={{
+            width: "100%",
+            height: 84,
+            paddingHorizontal: 24,
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          {data.map((step, indexCustom) => {
+            const descricao = getIconKeyByValue(step.descricao);
+
+            return (
+              <React.Fragment key={`step-${indexCustom}`}>
                 <View
                   style={{
                     width: 45,
                     height: 45,
-                    backgroundColor: "transparent",
+                    backgroundColor: indexCustom <= 3 ? "orange" : "transparent",
                     borderRadius: 50,
                     alignItems: "center",
                     justifyContent: "center",
+                    borderWidth: 1,
+                    borderColor: "#fff",
                   }}
                 >
-                  {descricao && <Icons icon={descricao} />}
+                  <View
+                    style={{
+                      width: 45,
+                      height: 45,
+                      backgroundColor: "transparent",
+                      borderRadius: 50,
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {descricao && <Icons icon={descricao} />}
+                  </View>
+                  <Text
+                    style={{
+                      position: "absolute",
+                      top: 56,
+                      fontWeight: "600",
+                      fontSize: 10,
+                      lineHeight: 14,
+                      textAlign: "center",
+                      color: "#fff",
+                      width: 75,
+                    }}
+                  >
+                    {step.descricao}
+                  </Text>
                 </View>
-                <Text
-                  style={{
-                    position: "absolute",
-                    top: 56,
-                    fontWeight: "600",
-                    fontSize: 10,
-                    lineHeight: 14,
-                    textAlign: "center",
-                    color: "#fff",
-                    width: 75,
-                  }}
-                >
-                  {step.descricao}
-                </Text>
-              </View>
 
-              {data?.length > 1 && indexCustom < data?.length - 1 && (
-                <View
-                  style={{
-                    width: 35,
-                    height: 2,
-                    marginTop: 24,
-                    position: "relative",
-                    backgroundColor: "orange",
-                  }}
-                />
-              )}
-            </React.Fragment>
-          );
-        })}
-      </View>
-    );
-  };
-
-  const handleRenderComponent = (stepType: "default" | "custom") => {
-    switch (stepType) {
-      case "default":
-        return <StepDefault />;
-      case "custom":
-        return <StepCustom />;
-      default:
-        return <View />;
-    }
-  };
-
-  return <>{handleRenderComponent(type!)}</>;
-};
+                {data?.length > 1 && indexCustom < data?.length - 1 && (
+                  <View
+                    style={{
+                      width: 35,
+                      height: 2,
+                      marginTop: 24,
+                      position: "relative",
+                      backgroundColor: "orange",
+                    }}
+                  />
+                )}
+              </React.Fragment>
+            );
+          })}
+        </View>
+      );
+    };
+
+    const handleRenderComponent = (stepType: "default" | "custom") => {
+      switch (stepType) {
+        case "default":
+          return <StepDefault />;
+        case "custom":
+          return <StepCustom />;
+        default:
+          return <View />;
+      }
+    };
+
+    return <>{handleRenderComponent(type!)}</>;
+  }
+);
+
+StepIndicator.displayName = "StepIndicator";
 
 /**
- * EXPORTS
+ * Componente StepIndicator para a interação da  ui.
  */
-export default StepIndicator;
+export default asBaseComponent(StepIndicator);

package/src/components/step-indicator/interface.d.ts

@@ -4,7 +4,8 @@
  */
 
 type IData = {
-  id: number;
+  id?: number | string;
+  jr_tipo_atividade_id?: number;
   duracao_segundos: string | number;
   data_inicio: string;
   data_fim: string;
@@ -38,7 +39,7 @@ interface IStepIndicator {
   textColorDescription?: string;
 
   /**params para lidar com selecionamento de atividade única */
-  handleOnPressActivitie: (data: IData) => void;
+  onChangeActivity?: (activity: any) => void;
 }
 /**
  * EXPORTS