jornada-ui 0.4.18 → 0.4.19

package/lib/typescript/module/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/list-supplies/index.tsx

@@ -1,153 +1,178 @@
-/**
- * IMPORTS
- */
-import React, { useEffect } from "react";
-import { Image, View, UIManager, Platform } from "react-native";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// style
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import type { IListSupplies } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const ListSupplies: React.FC<IListSupplies> = ({
-  dataRegistro,
-  namePosto,
-  litragem,
-  valor,
-  imagemUrl,
-  corBarra,
-}) => {
-
-  useEffect(() => {
-    if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-    }
-  }, []);
-
-  return (
-    <Box
-      width={"100%"}
-      flexStyle={{ flexDirection: "row" }}
-      backgroundColor={theme.colors.neutral[25]}
-      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
-    >
-      {/* faixa lateral */}
-      <View
-        style={{
-          width: 15,
-          backgroundColor: corBarra ?? theme.colors.blue[375],
-          borderTopLeftRadius: theme.borderWidths.thick_medium,
-          borderBottomLeftRadius: theme.borderWidths.thick_medium,
-        }}
-      />
-
-      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={`${namePosto || "Não informado"}`}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Litragem: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Box
-                flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-              >
-              <Typography
-                text={`${litragem || "Não informado"}`}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={` LT`}
-                color={theme.colors.red[400]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-              </Box>
-            </Box>
-
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Valor: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`R$ ${valor || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginBottom: theme.margins.fn}}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Data: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${dataRegistro || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
-              />
-            </Box>
-            <Box
-              borderStyled={{
-                borderWidth: 1,
-                borderColor: theme.colors.black[25],
-                borderRadius: theme.borderWidths.thick_medium,
-              }}
-              flexStyle={{
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <Image
-                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
-                style={{
-                  width: "100%",
-                  height: 139,
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-                resizeMode="cover"
-              />
-            </Box>
-      </Box>
-    </Box>
-  );
-};
-
-ListSupplies.displayName = "ListSupplies";
-export default asBaseComponent(ListSupplies);
+/**
+ * IMPORTS
+ */
+import React, { useEffect, useRef } from "react";
+import { Animated, Image, View, Easing } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// style
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import type { IListSupplies } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const ListSupplies: React.FC<IListSupplies> = ({
+  dataRegistro,
+  namePosto,
+  litragem,
+  valor,
+  imagemUrl,
+  corBarra,
+}) => {
+  // 🔹 Valor de animação para fade + slide
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(20)).current;
+
+  useEffect(() => {
+    // 🔹 Animação ao montar o componente
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 400,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+
+    Animated.timing(slideAnim, {
+      toValue: 0,
+      duration: 400,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim, slideAnim]);
+
+  return (
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+        transform: [{ translateY: slideAnim }],
+      }}
+    >
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row" }}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+      >
+        {/* faixa lateral */}
+        <View
+          style={{
+            width: 15,
+            backgroundColor: corBarra ?? theme.colors.blue[375],
+            borderTopLeftRadius: theme.borderWidths.thick_medium,
+            borderBottomLeftRadius: theme.borderWidths.thick_medium,
+          }}
+        />
+
+        <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
+          {/* Nome do posto */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text={`${namePosto || "Não informado"}`}
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+          </Box>
+
+          {/* Litragem */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text="Litragem: "
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+            <Box flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}>
+              <Typography
+                text={`${litragem || "Não informado"}`}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={` LT`}
+                color={theme.colors.red[400]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.sm}
+              />
+            </Box>
+          </Box>
+
+          {/* Valor */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text="Valor: "
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+            <Typography
+              text={`R$ ${valor || "Não informado"}`}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.sm}
+            />
+          </Box>
+
+          {/* Data */}
+          <Box
+            marginStyle={{ marginBottom: theme.margins.fn }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+          >
+            <Typography
+              text={"Data: "}
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+            <Typography
+              text={`${dataRegistro || "Não informado"}`}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.sm}
+            />
+          </Box>
+
+          {/* Imagem */}
+          <Box
+            borderStyled={{
+              borderWidth: 1,
+              borderColor: theme.colors.black[25],
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+            flexStyle={{
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Image
+              source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
+              style={{
+                width: "100%",
+                height: 139,
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              resizeMode="cover"
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Animated.View>
+  );
+};
+
+ListSupplies.displayName = "ListSupplies";
+export default asBaseComponent(ListSupplies);