jornada-ui 0.4.11 → 0.4.13

package/src/components/modals/modal-to-confimations/interface.ts

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+interface IModalToConfirmationsProps {
+  /**params para informa se o modal estár aberto ou fecahdo */
+  visible: boolean;
+
+  /**params do modal */
+  textTitle?: string;
+
+  /**params que armazena o texto da descrição com cor padrão */
+  text1?: string;
+
+  /**params que armazema o texto da descrição com a cor pintada */
+  text2?: string;
+
+  /**params para o titulo do botão de cancelar */
+  titleButtonCancel?: string;
+
+  /**params para o titulo do botão de confirmar */
+  titleButtonConfirm?: string;
+
+  /**params para colocar cor de fundo no botão */
+  backgroundColor?: string;
+
+  /**params que faz o fechamento do modal */
+  onClose: () => void;
+
+  /**params que faz o fechamento do modal + confirmação */
+  onPressConfirm: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IModalToConfirmationsProps };

package/src/components/selects/select-date-and-hours/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+
+import { View, TouchableOpacity } from "react-native";
+
+// seus componentes
+import Box from "../../box";
+import Typography from "../../typography";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IActivityFieldsProps } from "./interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+import { styles } from "./styles";
+
+const ActivityFields = forwardRef<any, IActivityFieldsProps<any>>(
+  ({ value, icon, onPressConfirm, disabled = false }, ref): React.ReactElement => {
+    return (
+      <TouchableOpacity
+        ref={ref}
+        activeOpacity={0.7}
+        style={[
+          styles.field,
+          {
+            borderColor: theme.colors.gray[700],
+            backgroundColor: theme.colors.neutral[300],
+            opacity: disabled ? 0.7 : 1,
+          },
+        ]}
+        onPress={() => onPressConfirm(value)}
+        disabled={disabled}
+      >
+        <View style={styles.row}>
+          <Box
+            width={"10%"}
+            height={45}
+            flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <Icons icon={icon ? icon : "CALENDAR"} color={theme.colors.black[100]} size={18} />
+          </Box>
+
+          <Box
+            width={"90%"}
+            height={45}
+            flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <Typography
+              text={String(value)}
+              color={theme.colors.blue[500]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.md}
+              marginRight={44}
+            />
+          </Box>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+);
+
+ActivityFields.displayName = "ActivityFields";
+
+export default asBaseComponent(ActivityFields);

package/src/components/selects/select-date-and-hours/interface.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+import type { TouchableOpacityProps } from "react-native";
+
+// commons / svg
+import type { SVG_NAME } from "../../../common/icons-svg/constants";
+
+type IActivityFieldsProps<T> = TouchableOpacityProps & {
+  /** Valor exibido e retornado no onPressConfirm */
+  value: T | null;
+
+  /** Ícone à esquerda (padrão: 'CALENDAR') */
+  icon: keyof typeof SVG_NAME;
+
+  /** Desabilita interação */
+  disabled?: boolean;
+
+  /** Cor do texto (opcional) */
+  textColor?: string;
+
+  /** Clique confirma e devolve o value */
+  onPressConfirm: (value: T) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export type { IActivityFieldsProps };

package/src/components/selects/select-date-and-hours/styles.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  field: {
+    width: "100%",
+    height: 45,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    justifyContent: "center",
+    marginTop: 10,
+    marginBottom: 16,
+  },
+  row: { flexDirection: "row", alignItems: "center", gap: 8, justifyContent: "space-around" },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -1,94 +1,124 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
-
-// commons / svg
-import { Icons } from "../../../common/icons-svg";
-
-// 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 } = props;
-
-  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 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}>
-          {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>
-  );
-});
-
-/**
- * Componente SelectOption para a interação da  ui.
- */
-export default asBaseComponent(SelectOption);
+/**
+ * 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,
+  } = props;
+
+  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,
+    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}>
+          {`${handleLimitTextdisplayByAmount({
+            limit: 42,
+            text: dataOption.find((item) => item.value === selectedValue)?.label!,
+          })}`}
+        </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);

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

@@ -13,7 +13,7 @@ type ISelectDropDownProps = TextProps & {
   titleLabel: string;
   sizeTitleLabel?: number;
   colortitleLabel?: string;
-
+  backgroundColor?: string;
   /**retorna o valor selecionado              */
   // eslint-disable-next-line no-unused-vars
   handleSelectDown: (value: string) => void;

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

@@ -1,75 +1,74 @@
-/**
- * IMPORTS
- */
-import { StyleSheet } from "react-native";
-
-// typings
-import { type ISelectDropDownProps } from "./interface";
-
-// theme
-import { theme } from "../../../styles/theme/theme";
-
-const styles = (props: ISelectDropDownProps) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      marginBottom: 16,
-    },
-    label: {
-      fontSize: props.sizeTitleLabel ?? 16,
-      fontWeight: "bold",
-      color: props.colortitleLabel ?? theme.colors.black[100],
-      marginBottom: 5,
-    },
-    selectBox: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%",
-      height: 45,
-      borderWidth: 1,
-      borderColor: theme.colors.gray[700],
-      borderRadius: 10,
-      backgroundColor: theme.colors.neutral[25],
-      paddingHorizontal: 10,
-    },
-    selectedText: {
-      fontSize: 14,
-      color: "#666",
-    },
-    modalOverlay: {
-      flex: 1,
-      backgroundColor: "rgba(0,0,0,0.5)",
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 24,
-    },
-    modalContainer: {
-      width: "100%",
-      backgroundColor: theme.colors.neutral[25],
-      borderRadius: 10,
-      padding: 15,
-      alignItems: "center",
-    },
-    option: {
-      width: "100%",
-      padding: 10,
-      alignItems: "flex-start",
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.gray[300],
-    },
-    optionText: {
-      fontSize: 14,
-      color: theme.colors.black[100],
-      fontWeight: "500",
-    },
-    closeButtonText: {
-      color: theme.colors.neutral[25],
-      fontWeight: "bold",
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type ISelectDropDownProps } from "./interface";
+
+// theme
+import { theme } from "../../../styles/theme/theme";
+
+const styles = (props: ISelectDropDownProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
+      paddingHorizontal: 10,
+    },
+    selectedText: {
+      fontSize: 14,
+      color: "#666",
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.5)",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 24,
+    },
+    modalContainer: {
+      width: "100%",
+      backgroundColor: theme.colors.neutral[25],
+      borderRadius: 10,
+      padding: 15,
+    },
+    option: {
+      width: "100%",
+      padding: 10,
+      alignItems: "flex-start",
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.gray[300],
+    },
+    optionText: {
+      fontSize: 14,
+      color: theme.colors.black[100],
+      fontWeight: "500",
+    },
+    closeButtonText: {
+      color: theme.colors.neutral[25],
+      fontWeight: "bold",
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -2,7 +2,7 @@
  * IMPORTS
  */
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, TouchableOpacity } from "react-native";
 
 // commons / svg
 import { Icons } from "../../common/icons-svg";
@@ -30,49 +30,69 @@ const StepIndicator: React.FC<IStepIndicator> = ({
   textColorDescription,
   titleColor,
   titleNumberColor,
+  handleOnPressActivitie,
 }) => {
   const StepDefault = () => {
     return (
       <>
         {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>
+          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;
+
+            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>
 
-              <View style={styles({}).containerMain}>
-                <Text style={styles({ titleColor }).title}>{history?.descricao}</Text>
+                <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?.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>
-            </View>
-          ))}
+                  {history.duracao_segundos && (
+                    <Text style={styles({ textColorDescription }).titleDescription}>
+                      Duração: {formHoursMinute(history?.duracao_segundos as string)}
+                    </Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            );
+          })}
       </>
     );
   };