jornada-ui 0.4.16 → 0.4.17

package/lib/typescript/module/src/components/step-indicator/index.d.ts

@@ -1,14 +1,8 @@
-/**
- * IMPORTS
- */
 import React from "react";
 import type { IStepIndicator } from "./interface";
 /**
- * Componente StepIndicator para a interação da ui.
- */
-declare const StepIndicator: React.FC<IStepIndicator>;
-/**
- * EXPORTS
+ * Componente StepIndicator para a interação da  ui.
  */
-export default StepIndicator;
+declare const _default: React.ComponentType<IStepIndicator & React.RefAttributes<any>>;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/step-indicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/step-indicator/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMlD;;GAEG;AAEH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+J3C,CAAC;AAEF;;GAEG;AACH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/step-indicator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAajF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAqPlD;;GAEG;;AACH,wBAA8C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

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 };

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);