jornada-ui 0.4.17 → 0.4.19

package/src/components/notification-details-card/index.tsx

@@ -1,180 +1,180 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { Modal, TouchableOpacity, Image, View } from "react-native";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// typings
-import type { INotificationDetailCardProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles / theme
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente NotificationDetailCard
- */
-const NotificationDetailCard: React.FC<INotificationDetailCardProps> = forwardRef<
-  View,
-  INotificationDetailCardProps
->(({ title, description, fileUrl, fileType = "image", testID }, ref) => {
-  const [visible, setVisible] = useState(false);
-
-  function openFile() {
-    if (fileType === "image") {
-      setVisible(true);
-    } else if (fileUrl) {
-      import("react-native").then(({ Linking }) => {
-        Linking.openURL(fileUrl).catch((err) => console.warn("Erro ao abrir arquivo:", err));
-      });
-    }
-  }
-
-  const borderColor = theme.colors.blue[500];
-
-  return (
-    <Box
-      ref={ref}
-      testID={testID ?? "notification-detail-card"}
-      flexStyle={{ flexDirection: "row" }}
-      borderStyled={{
-        borderWidth: 1,
-        borderColor: theme.colors.neutral[200],
-        borderRadius: theme.borderWidths.thick_medium,
-      }}
-      marginStyle={{ marginBottom: 16 }}
-      backgroundColor={theme.colors.neutral[25]}
-    >
-      {/* borda fixa lateral esquerda */}
-      <Box
-        width={8}
-        backgroundColor={borderColor}
-        borderStyled={{
-          borderTopLeftRadius: theme.borderWidths.thick_medium,
-          borderBottomLeftRadius: theme.borderWidths.thick_medium,
-        }}
-      />
-
-      {/* Conteúdo do card */}
-      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.md }}>
-        {/* header */}
-        <Typography
-          text={title}
-          fontFamily={theme.fonts.inter_bold}
-          fontWeight="700"
-          size={theme.fontSizes.md}
-          color={theme.colors.black[100]}
-          marginBottom={8}
-        />
-
-        {/* texto */}
-        <Typography
-          text={description}
-          size={theme.fontSizes.sm}
-          lineHeight={theme.lineHeight.md}
-          color={theme.colors.gray[700]}
-          marginBottom={fileUrl ? 12 : 0}
-        />
-
-        {/* arquivo (se existir) */}
-        {fileUrl && (
-          <TouchableOpacity
-            testID="button"
-            onPress={openFile}
-            activeOpacity={0.8}
-            style={{
-              borderRadius: theme.borderWidths.thick_medium,
-              overflow: "hidden",
-              borderWidth: 1,
-              borderColor: theme.colors.gray[300],
-            }}
-          >
-            {fileType === "image" ? (
-              <Box
-                borderStyled={{
-                  borderWidth: 2,
-                  borderColor: theme.colors.blue[525],
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-              >
-                <Image
-                  source={{ uri: fileUrl }}
-                  style={{
-                    width: "100%",
-                    height: 180,
-                    borderRadius: theme.borderWidths.thick_medium,
-                    borderWidth: 2,
-                    borderColor: theme.colors.blue[525],
-                  }}
-                  resizeMode="cover"
-                />
-              </Box>
-            ) : (
-              <Box
-                flexStyle={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-                paddingStyle={{ padding: theme.paddings.sm }}
-              >
-                <Typography
-                  text={`Abrir arquivo (${fileType.toUpperCase()})`}
-                  fontFamily={theme.fonts.inter_medium_500}
-                  color={theme.colors.blue[500]}
-                  size={theme.fontSizes.md}
-                />
-                <Icons icon="FILES" size={20} color={theme.colors.blue[500]} />
-              </Box>
-            )}
-          </TouchableOpacity>
-        )}
-      </Box>
-
-      {/* modal para zoom da imagem */}
-      {fileType === "image" && (
-        <Modal visible={visible} transparent animationType="fade">
-          <View
-            style={{
-              flex: 1,
-              backgroundColor: "rgba(0,0,0,0.9)",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => setVisible(false)}
-              style={{ position: "absolute", top: 40, right: 20 }}
-            >
-              <Icons icon="CLOSED" size={28} color={theme.colors.neutral[25]} />
-            </TouchableOpacity>
-
-            <Image
-              source={{ uri: fileUrl }}
-              style={{
-                width: "90%",
-                height: "70%",
-                borderRadius: theme.borderWidths.thick_medium,
-              }}
-              resizeMode="contain"
-            />
-          </View>
-        </Modal>
-      )}
-    </Box>
-  );
-});
-
-NotificationDetailCard.displayName = "NotificationDetailCard";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(NotificationDetailCard);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { Modal, TouchableOpacity, Image, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import type { INotificationDetailCardProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente NotificationDetailCard
+ */
+const NotificationDetailCard: React.FC<INotificationDetailCardProps> = forwardRef<
+  View,
+  INotificationDetailCardProps
+>(({ title, description, fileUrl, fileType = "image", testID }, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  function openFile() {
+    if (fileType === "image") {
+      setVisible(true);
+    } else if (fileUrl) {
+      import("react-native").then(({ Linking }) => {
+        Linking.openURL(fileUrl).catch((err) => console.warn("Erro ao abrir arquivo:", err));
+      });
+    }
+  }
+
+  const borderColor = theme.colors.blue[500];
+
+  return (
+    <Box
+      ref={ref}
+      testID={testID ?? "notification-detail-card"}
+      flexStyle={{ flexDirection: "row" }}
+      borderStyled={{
+        borderWidth: 1,
+        borderColor: theme.colors.neutral[200],
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+      marginStyle={{ marginBottom: 16 }}
+      backgroundColor={theme.colors.neutral[25]}
+    >
+      {/* borda fixa lateral esquerda */}
+      <Box
+        width={8}
+        backgroundColor={borderColor}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      {/* Conteúdo do card */}
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.md }}>
+        {/* header */}
+        <Typography
+          text={title}
+          fontFamily={theme.fonts.inter_bold}
+          fontWeight="700"
+          size={theme.fontSizes.md}
+          color={theme.colors.black[100]}
+          marginBottom={8}
+        />
+
+        {/* texto */}
+        <Typography
+          text={description}
+          size={theme.fontSizes.sm}
+          lineHeight={theme.lineHeight.md}
+          color={theme.colors.gray[700]}
+          marginBottom={fileUrl ? 12 : 0}
+        />
+
+        {/* arquivo (se existir) */}
+        {fileUrl && (
+          <TouchableOpacity
+            testID="button"
+            onPress={openFile}
+            activeOpacity={0.8}
+            style={{
+              borderRadius: theme.borderWidths.thick_medium,
+              overflow: "hidden",
+              borderWidth: 1,
+              borderColor: theme.colors.gray[300],
+            }}
+          >
+            {fileType === "image" ? (
+              <Box
+                borderStyled={{
+                  borderWidth: 2,
+                  borderColor: theme.colors.blue[525],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              >
+                <Image
+                  source={{ uri: fileUrl }}
+                  style={{
+                    width: "100%",
+                    height: 180,
+                    borderRadius: theme.borderWidths.thick_medium,
+                    borderWidth: 2,
+                    borderColor: theme.colors.blue[525],
+                  }}
+                  resizeMode="cover"
+                />
+              </Box>
+            ) : (
+              <Box
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+                paddingStyle={{ padding: theme.paddings.sm }}
+              >
+                <Typography
+                  text={`Abrir arquivo (${fileType.toUpperCase()})`}
+                  fontFamily={theme.fonts.inter_medium_500}
+                  color={theme.colors.blue[500]}
+                  size={theme.fontSizes.md}
+                />
+                <Icons icon="FILES" size={20} color={theme.colors.blue[500]} />
+              </Box>
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      {/* modal para zoom da imagem */}
+      {fileType === "image" && (
+        <Modal visible={visible} transparent animationType="fade">
+          <View
+            style={{
+              flex: 1,
+              backgroundColor: "rgba(0,0,0,0.9)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setVisible(false)}
+              style={{ position: "absolute", top: 40, right: 20 }}
+            >
+              <Icons icon="CLOSED" size={28} color={theme.colors.neutral[25]} />
+            </TouchableOpacity>
+
+            <Image
+              source={{ uri: fileUrl }}
+              style={{
+                width: "90%",
+                height: "70%",
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              resizeMode="contain"
+            />
+          </View>
+        </Modal>
+      )}
+    </Box>
+  );
+});
+
+NotificationDetailCard.displayName = "NotificationDetailCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationDetailCard);

package/src/components/trip-details-card/index.tsx

@@ -1,8 +1,8 @@
 /**
  * IMPORTS
  */
-import React, { useState } from "react";
-import { View, TouchableOpacity, LayoutAnimation, Platform, UIManager } from "react-native";
+import React, { useRef, useState } from "react";
+import { View, TouchableOpacity, Animated, Easing } from "react-native";
 
 // components
 import Box from "../../components/box";
@@ -16,11 +16,9 @@ import { Icons } from "../../common/icons-svg";
 import type { ITripDetailsCard } from "./interface";
 import { asBaseComponent } from "../../@types/as-base-component";
 
-// Ativa animação no Android
-if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
+/**
+ * Components de details de viagem
+ */
 const TripDetailsCard: React.FC<ITripDetailsCard> = ({
   dataRegistro,
   numeroCte,
@@ -34,17 +32,33 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
   kmVazio,
 }) => {
   const [expanded, setExpanded] = useState(true);
+  const animation = useRef(new Animated.Value(1)).current;
 
   const toggleExpand = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setExpanded((prev) => !prev);
+    Animated.timing(animation, {
+      toValue: expanded ? 0 : 1,
+      duration: 300,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false, // false pois animaremos altura (layout)
+    }).start();
+    setExpanded(!expanded);
   };
 
   const formatPeso = (v?: number) =>
-    v === undefined || v === null ? "Não informado" : `${v.toLocaleString("pt-BR")} kg`;
+    v == null ? "Não informado" : `${v.toLocaleString("pt-BR")} kg`;
 
   const formatBase = (v?: number) =>
-    v === undefined || v === null ? "Não informado" : `R$ ${v.toLocaleString("pt-BR")}`;
+    v == null ? "Não informado" : `R$ ${v.toLocaleString("pt-BR")}`;
+
+  // altura animada e opacidade
+  const heightInterpolate = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+  const opacityInterpolate = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
 
   return (
     <Box
@@ -84,20 +98,39 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
               size={theme.fontSizes.md}
             />
 
-            <Icons
-              icon={expanded ? "CHEVRON_UP" : "CHEVRON_DOWN"}
-              color={theme.colors.gray[700]}
-              size={20}
-            />
+            <Animated.View
+              style={{
+                transform: [
+                  {
+                    rotate: animation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: ["180deg", "0deg"],
+                    }),
+                  },
+                ],
+              }}
+            >
+              <Icons icon={"CHEVRON_UP"} color={theme.colors.gray[700]} size={20} />
+            </Animated.View>
           </Box>
         </TouchableOpacity>
 
-        {/* Bloco que será expandido/colapsado com animação */}
-        {expanded && (
-          <>
+        {/* Conteúdo animado */}
+        <Animated.View
+          style={{
+            overflow: "hidden",
+            opacity: opacityInterpolate,
+            transform: [
+              {
+                scaleY: heightInterpolate,
+              },
+            ],
+          }}
+        >
+          <Box marginStyle={{ marginTop: theme.margins["1xs"] }}>
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Número CTE: "}
@@ -114,8 +147,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Data carregamento: "
@@ -132,8 +165,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Origem: "
@@ -150,8 +183,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Destino: "
@@ -168,8 +201,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Próximo carregamento: "
@@ -186,8 +219,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Peso: "}
@@ -196,7 +229,7 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 size={theme.fontSizes.xs}
               />
               <Typography
-                text={`${formatPeso(peso) || "Não informado"}`}
+                text={`${formatPeso(peso)}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
                 size={theme.fontSizes.xs}
@@ -204,8 +237,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Km carregado: "}
@@ -222,8 +255,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text={"Km vazio: "}
@@ -240,8 +273,8 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
             </Box>
 
             <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
             >
               <Typography
                 text="Base para cálculo do PRO: "
@@ -250,14 +283,14 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 size={theme.fontSizes.xs}
               />
               <Typography
-                text={`${formatBase(baseCalculo) || "Não informado"}`}
+                text={`${formatBase(baseCalculo)}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
                 size={theme.fontSizes.xs}
               />
             </Box>
-          </>
-        )}
+          </Box>
+        </Animated.View>
       </Box>
     </Box>
   );

package/src/index.tsx

@@ -27,24 +27,24 @@ export { default as WeeklyTable } from "./components/weekly-table";
 export { default as CardMaintenance } from "./components/card-maintenance";
 export { default as ModalMaintenance } from "./components/modal-maintenance";
 export { default as LoadingCircle } from "./components/loading-circle";
-export { default as ConfirmWithdrawModal } from "./components/confirm-withdraw-modal";
 export { default as MonthlySummaryTable } from "./components/monthly-summary-table";
 export { default as CardWithDrawCoil } from "./components/card-with-draw-coil";
 export { default as CoilRemovalCode } from "./components/coil-removel-code";
 export { default as SupplyErrorCard } from "./components/supply-error-card";
 export { default as MaintenanceDescriptionInput } from "./components/maintenance-description-input";
 export { default as TripDetailsCard } from "./components/trip-details-card";
-export { default as TruckNotFound } from "./components/truck-not-found";
 export { default as TravelHistory } from "./components/travel-history";
-export { default as BottomMessageConexion } from "./components/bottom-message-conexion";
+export { default as TruckNotFound } from "./components/truck-not-found";
 export { default as ToastMessage } from "./components/toast-message";
-export { default as ModalTypeActivities } from "./components/modal-type-activities";
+export { default as BottomMessageConexion } from "./components/bottom-message-conexion";
 export { default as ResumeRaking } from "./components/resume-raking";
 export { default as ListSupplies } from "./components/list-supplies";
 export { default as ListDevices } from "./components/list-devices";
+export { default as ModalTypeActivities } from "./components/modal-type-activities";
 export { default as ModalActivityReason } from "./components/modals/modal-activity-reason";
 export { default as ModalJourneyRectification } from "./components/modals/modal-edite-journey-rectification";
 export { default as ModalCreteActivitie } from "./components/modals/modal-create-activitie";
+export { default as ConfirmWithdrawModal } from "./components/confirm-withdraw-modal";
 export { default as ModalToConfirmations } from "./components/modals/modal-to-confimations";
 export { default as ActivityTimeline } from "./components/activity-step";
 export { default as NotificationCard } from "./components/notification-card";