react-native-exp-fig 0.1.44 → 2.0.0

package/src/components/selects/select-option/index.tsx

@@ -1,133 +1,100 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
-
-// commons / svg
-import { Icons } from "../../../common/icons-svg";
-
-// utils
-import { handleLimitTextdisplayByAmount } from "../../../utils/text-limit";
-
-// typings
-import { asBaseComponent } from "../../../@types/as-base-component";
-import type { ISelectDropDownProps } from "./interface";
-
-// styles
-import { styles } from "./styles";
-import { theme } from "../../../styles/theme/theme";
-
-const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {
-  const {
-    dataOption,
-    handleSelectDown,
-    titleLabel,
-    sizeTitleLabel,
-    colortitleLabel,
-    backgroundColor,
-    selectedValueID = null,
-  } = props;
-
-  const [selectedValue, setSelectedValue] = useState<number | null>(selectedValueID);
-  const [modalVisible, setModalVisible] = useState(false);
-
-  const handleSelect = (value: number) => {
-    setSelectedValue(value);
-    setModalVisible(false);
-    handleSelectDown(value);
-  };
-
-  const itemLabelSelected = dataOption.find((item) => item.value === selectedValue)?.label!;
-  const styleProps = {
-    dataOption,
-    handleSelectDown,
-    titleLabel,
-    sizeTitleLabel,
-    colortitleLabel,
-    backgroundColor,
-  } as ISelectDropDownProps;
-  return (
-    <View ref={ref} style={styles(styleProps).container}>
-      {/* Titulo para exibir o label */}
-      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
-
-      {/* Botão para abrir o modal */}
-      <TouchableOpacity
-        testID="select-box"
-        style={styles(styleProps).selectBox}
-        onPress={() => setModalVisible(true)}
-      >
-        <Text style={styles(styleProps).selectedText} numberOfLines={1}>
-          {itemLabelSelected ? (
-            <>
-              {" "}
-              {`${handleLimitTextdisplayByAmount({
-                limit: 42,
-                text: itemLabelSelected,
-              })}`}
-            </>
-          ) : (
-            "Selecione uma opção"
-          )}
-        </Text>
-
-        <Icons
-          size={theme.fontSizes["xs"]}
-          color={theme.colors.blue[500]}
-          icon={"ARROW_DROP_DOWN"}
-        />
-      </TouchableOpacity>
-
-      {/* Modal para exibir as opções */}
-      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
-        <View style={styles(styleProps).modalOverlay}>
-          <View style={styles(styleProps).modalContainer}>
-            <View
-              style={{
-                width: "100%",
-                alignItems: "flex-end",
-                height: 40,
-                paddingRight: 8,
-              }}
-            >
-              <TouchableOpacity
-                testID="close-icon"
-                onPress={() => setModalVisible(false)}
-                style={{
-                  width: 40,
-                  height: 45,
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <Icons
-                  size={theme.fontSizes["md"]}
-                  color={theme.colors.blue[500]}
-                  icon={"CLOSED"}
-                />
-              </TouchableOpacity>
-            </View>
-            <FlatList
-              data={dataOption || []}
-              keyExtractor={(item) => item.value}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles(styleProps).option}
-                  onPress={() => handleSelect(item.value)}
-                >
-                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
-                </TouchableOpacity>
-              )}
-            />
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-});
-
-/**
- * Componente SelectOption para a interação da  ui.
- */
-export default asBaseComponent(SelectOption);
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// typings
+import { ISelectDropDownProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { Icons } from "../../../common/icons-svg";
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente SelectOption para a interação da  ui.
+ */
+const SelectOption: React.FC<ISelectDropDownProps> = ({
+  dataOption,
+  handleSelectDown,
+  titleLabel,
+  sizeTitleLabel,
+  colortitleLabel,
+}: ISelectDropDownProps) => {
+  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleSelect = (value: string) => {
+    setSelectedValue(value);
+    setModalVisible(false);
+    handleSelectDown(value);
+  };
+
+  const styleProps = {
+    dataOption,
+    handleSelectDown,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+  } as ISelectDropDownProps;
+
+  return (
+    <View style={styles(styleProps).container}>
+      {/* Titulo para exibir o label */}
+      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
+
+      {/* Botão para abrir o modal */}
+      <TouchableOpacity
+        testID="select-box"
+        style={styles(styleProps).selectBox}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text style={styles(styleProps).selectedText}>
+          {dataOption.find((item) => item.value === selectedValue)?.label}
+        </Text>
+
+        <Icons
+          size={theme.fontSizes["md"]}
+          color={theme.colors.blue[500]}
+          icon={"ARROW_DROP_DOWN"}
+        />
+      </TouchableOpacity>
+
+      {/* Modal para exibir as opções */}
+      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
+        <View style={styles(styleProps).modalOverlay}>
+          <View style={styles(styleProps).modalContainer}>
+            <View style={{ width: "100%", alignItems: "flex-end" }}>
+              <TouchableOpacity testID="close-icon" onPress={() => setModalVisible(false)}>
+                <Icons
+                  size={theme.fontSizes["md"]}
+                  color={theme.colors.blue[500]}
+                  icon={"CLOSED"}
+                />
+              </TouchableOpacity>
+            </View>
+            <FlatList
+              data={dataOption || []}
+              keyExtractor={(item) => item.value}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={styles(styleProps).option}
+                  onPress={() => handleSelect(item.value)}
+                >
+                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { SelectOption };

package/src/components/selects/select-option/interface.d.ts

@@ -1,19 +1,18 @@
-/**
- * IMPORTS
- */
-type ISelectDropDownProps = {
-  dataOption: any[];
-  titleLabel: string;
-  sizeTitleLabel?: number;
-  colortitleLabel?: string;
-  backgroundColor?: string;
-  selectedValueID?: number | null;
-  /**retorna o valor selecionado              */
-  // eslint-disable-next-line no-unused-vars
-  handleSelectDown: (value: number) => void;
-};
-
-/**
- * EXPORTS
- */
-export { ISelectDropDownProps };
+/**
+ * IMPORTS
+ */
+type ISelectDropDownProps = {
+  dataOption: any[];
+  titleLabel: string;
+  sizeTitleLabel?: number;
+  colortitleLabel?: string;
+
+  /**retorna o valor selecionado              */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectDown: (value: string) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export { ISelectDropDownProps };

package/src/components/selects/select-option/styles.ts

@@ -48,15 +48,12 @@ const styles = (props: ISelectDropDownProps) =>
       width: "100%",
       backgroundColor: theme.colors.neutral[25],
       borderRadius: 10,
-      paddingVertical: 15,
-      paddingHorizontal: 20,
-      alignItems: "stretch",
+      padding: 15,
+      alignItems: "center",
     },
     option: {
       width: "100%",
-      paddingVertical: 10,
-      paddingRight: 10,
-      paddingLeft: 0,
+      padding: 10,
       alignItems: "flex-start",
       borderBottomWidth: 1,
       borderBottomColor: theme.colors.gray[300],

package/src/components/step-indicator/helpers/get-icon-by-status.tsx

@@ -1,20 +1,20 @@
-/**
- * IMPORTS
- */
-import { SVG_NAME } from "../../../common/icons-svg/constants";
-
-/**
- * Função que mapeará os ícones correspondentes em SVG 🛠️.
- * @param propertyType
- * @returns SVG
- */
-const getIconKeyByValue = (propertyType: string): keyof typeof SVG_NAME | undefined => {
-  return (Object.keys(SVG_NAME) as Array<keyof typeof SVG_NAME>).find(
-    (key) => SVG_NAME[key] === propertyType
-  );
-};
-
-/**
- * EXPORTS
- */
-export { getIconKeyByValue };
+/**
+ * IMPORTS
+ */
+import { SVG_NAME } from "../../../common/icons-svg/constants";
+
+/**
+ * Função que mapeará os ícones correspondentes em SVG 🛠️.
+ * @param propertyType
+ * @returns SVG
+ */
+const getIconKeyByValue = (propertyType: string): keyof typeof SVG_NAME | undefined => {
+  return (Object.keys(SVG_NAME) as Array<keyof typeof SVG_NAME>).find(
+    (key) => SVG_NAME[key] === propertyType
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { getIconKeyByValue };

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

@@ -2,141 +2,72 @@
  * IMPORTS
  */
 import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View, Text } from "react-native";
 
-// commons / svg
-import { Icons } from "../../common/icons-svg";
-
-// helpers
 import { getIconKeyByValue } from "./helpers/get-icon-by-status";
 
 // typings
-import type { IStepIndicator } from "./interface";
+import { IStepIndicator } from "./interface";
 
 // styles
 import { styles } from "./styles";
+import { Icons } from "../../common/icons-svg";
 import { formHoursMinute } from "../../utils/format-data";
 import { theme } from "../../styles/theme/theme";
-import { ModalChangeActivity } from "../modals/modal-change-activity";
 
 /**
  * Componente StepIndicator para a interação da ui.
  */
+
 const StepIndicator: React.FC<IStepIndicator> = ({
   data = [],
   type,
   textColorDescription,
   titleColor,
   titleNumberColor,
-  onChangeActivity,
 }) => {
   const StepDefault = () => {
-    const [isModalVisible, setIsModalVisible] = React.useState(false);
-    const [currentStepIndex, setCurrentStepIndex] = React.useState<number | null>(null);
-    const [stepData, setStepData] = React.useState(data);
-
-    const handleOnPressActivitie = (stepItem: any, index: number) => {
-      const desc = stepItem?.descricao?.toLowerCase?.();
-      if (!desc) return;
-
-      const isDescanso = ["descanso", "refeição", "repouso_noturno", "repouso_semanal"].includes(
-        desc.replace(/\s+/g, "_")
-      );
-
-      if (isDescanso && stepItem?.sincronizado === true) {
-        setCurrentStepIndex(index);
-        setIsModalVisible(true);
-      }
-    };
-
-    const handleConfirmModal = (newData: { label: string; value: string; key: number }) => {
-      if (currentStepIndex !== null) {
-        const updatedStep = {
-          ...stepData[currentStepIndex],
-          descricao: newData.label,
-          referencia: newData.value,
-          ec_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);
-    };
-
     return (
       <>
-        {stepData.length > 0 &&
-          stepData.map((history, index) => {
-            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}
-                key={history?.id}
-                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>
+        {data!.length > 0 &&
+          data!.map((history, index) => (
+            <View testID="step-indicator" style={styles({}).containerIndicator} key={history.id}>
+              <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>
 
-                  {history?.data_inicio && (
-                    <Text style={styles({ textColorDescription }).titleDescription}>
-                      {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
-                    </Text>
-                  )}
+              <View style={styles({}).containerMain}>
+                <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
 
-                  {history.duracao_segundos && (
-                    <Text style={styles({ textColorDescription }).titleDescription}>
-                      Duração: {formHoursMinute(history?.duracao_segundos as string)}
-                    </Text>
-                  )}
-                </View>
-              </TouchableOpacity>
-            );
-          })}
+                {history?.data_inicio && (
+                  <Text style={styles({ textColorDescription }).titleDescription}>
+                    {`Inicio: ${history.data_inicio} ás ${history.data_fim}`}
+                  </Text>
+                )}
 
-        {isModalVisible && (
-          <ModalChangeActivity
-            visible={isModalVisible}
-            modalConfirm={handleConfirmModal}
-            descricao=""
-            onClose={() => setIsModalVisible(false)}
-          />
-        )}
+                {history.duracao_segundos && (
+                  <Text style={styles({ textColorDescription }).titleDescription}>
+                    Duração: {formHoursMinute(history?.duracao_segundos as string)}
+                  </Text>
+                )}
+              </View>
+            </View>
+          ))}
       </>
     );
   };
@@ -232,4 +163,4 @@ const StepIndicator: React.FC<IStepIndicator> = ({
 /**
  * EXPORTS
  */
-export default StepIndicator;
+export { StepIndicator };

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

@@ -1,47 +1,35 @@
-/* eslint-disable no-unused-vars */
-/**
- * IMPORTS
- */
-
-type IData = {
-  id?: number | string;
-  ec_tipo_atividade_id?: number;
-  duracao_segundos: string | number;
-  data_inicio: string;
-  data_fim: string;
-  descricao: string;
-  sincronizado;
-  tipo: string;
-  referencia: string;
-};
-
-type IStyleProps = {
-  sincronizado?: boolean;
-  titleColor?: string;
-  titleNumberColor?: string;
-  textColorDescription?: string;
-};
-
-interface IStepIndicator {
-  /**dados que vão ser renderizados */
-  data?: IData[];
-
-  /**tupo de renderização padrão ou customizada */
-  type?: "default" | "custom";
-
-  /**cor do texto */
-  titleColor?: string;
-
-  /**cor do numero do step indicator */
-  titleNumberColor?: string;
-
-  /**cor do texto da descrição */
-  textColorDescription?: string;
-
-  /**params para lidar com selecionamento de atividade única */
-  onChangeActivity?: (activity: any) => void;
-}
-/**
- * EXPORTS
- */
-export { type IStepIndicator, IStyleProps };
+/**
+ * IMPORTS
+ */
+
+type IData = {
+  id: number;
+  duracao_segundos: string | number;
+  data_inicio: string;
+  data_fim: string;
+  descricao: string;
+  sincronizado;
+};
+interface IStepIndicator {
+  /**dados que vão ser renderizados */
+  data?: IData[];
+
+  /**tupo de renderização padrão ou customizada */
+  type?: "default" | "custom";
+
+  /**cor do texto */
+  titleColor?: string;
+
+  /**cor do numero do step indicator */
+  titleNumberColor?: string;
+
+  /**cor do texto da descrição */
+  textColorDescription?: string;
+
+  /**verifica se foi sincronizado com back end */
+  sincronizado?: boolean;
+}
+/**
+ * EXPORTS
+ */
+export { type IStepIndicator };