jornada-ui 0.4.12 → 0.4.13

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

@@ -1,270 +1,267 @@
-/**
- * IMPORTS
- */
-import React, { useEffect, useState } from "react";
-import { View, TouchableOpacity, LayoutAnimation, UIManager, Platform } from "react-native";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// style
-import { theme } from "../../styles/theme/theme";
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import type { ITripDetailsCard } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const TripDetailsCard: React.FC<ITripDetailsCard> = ({
-  dataRegistro,
-  numeroCte,
-  origem,
-  destino,
-  proximoCarregamento,
-  peso,
-  baseCalculo,
-  corBarra,
-  kmCarregado,
-  kmVazio,
-}) => {
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-    }
-  }, []);
-
-  const toggleExpand = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setExpanded((prev) => !prev);
-  };
-
-  const formatPeso = (v?: number) =>
-    v === undefined || 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")}`;
-
-  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.orange[150],
-          borderTopLeftRadius: theme.borderWidths.thick_medium,
-          borderBottomLeftRadius: theme.borderWidths.thick_medium,
-        }}
-      />
-
-      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
-        {/* Cabeçalho: botão que abre/fecha a sanfona */}
-        <TouchableOpacity
-          onPress={toggleExpand}
-          activeOpacity={0.9}
-          accessibilityRole="button"
-          accessibilityLabel="Detalhes da viagem"
-        >
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography
-              text="Detalhes da viagem"
-              color={theme.colors.black[25]}
-              fontFamily={theme.fonts.inter_bold}
-              size={theme.fontSizes.md}
-            />
-
-            {/* Alterna seta */}
-            <Icons
-              icon={expanded ? "CHEVRON_UP" : "CHEVRON_DOWN"}
-              color={theme.colors.gray[700]}
-              size={20}
-            />
-          </Box>
-        </TouchableOpacity>
-
-        {/* Aparece somente quando clicado */}
-        {expanded && (
-          <>
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Número CTE: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${numeroCte || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Data carregamento: "
-                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.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Origem: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
-              />
-              <Typography
-                text={`${origem || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Destino: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${destino || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Próximo carregamento: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${proximoCarregamento || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Peso: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${formatPeso(peso) || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Km carregado: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${kmCarregado || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text={"Km vazio: "}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${kmVazio || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Box
-              marginStyle={{ marginTop: theme.margins["1xs"] }}
-              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
-            >
-              <Typography
-                text="Base para cálculo do PRO: "
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${formatBase(baseCalculo) || "Não informado"}`}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-          </>
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-TripDetailsCard.displayName = "TripDetailsCard";
-export default asBaseComponent(TripDetailsCard);
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import { View, TouchableOpacity, LayoutAnimation, Platform, UIManager } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// style
+import { theme } from "../../styles/theme/theme";
+import { Icons } from "../../common/icons-svg";
+
+// typings
+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);
+}
+
+const TripDetailsCard: React.FC<ITripDetailsCard> = ({
+  dataRegistro,
+  numeroCte,
+  origem,
+  destino,
+  proximoCarregamento,
+  peso,
+  baseCalculo,
+  corBarra,
+  kmCarregado,
+  kmVazio,
+}) => {
+  const [expanded, setExpanded] = useState(true);
+
+  const toggleExpand = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded((prev) => !prev);
+  };
+
+  const formatPeso = (v?: number) =>
+    v === undefined || 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")}`;
+
+  return (
+    <Box
+      width={"100%"}
+      flexStyle={{ flexDirection: "row" }}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+    >
+      {/* faixa lateral */}
+      <View
+        style={{
+          width: 8,
+          backgroundColor: corBarra ?? theme.colors.orange[150],
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
+        <TouchableOpacity
+          onPress={toggleExpand}
+          activeOpacity={0.9}
+          accessibilityRole="button"
+          accessibilityLabel="Detalhes da viagem"
+        >
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              text="Detalhes da viagem"
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_bold}
+              size={theme.fontSizes.md}
+            />
+
+            <Icons
+              icon={expanded ? "CHEVRON_UP" : "CHEVRON_DOWN"}
+              color={theme.colors.gray[700]}
+              size={20}
+            />
+          </Box>
+        </TouchableOpacity>
+
+        {/* Bloco que será expandido/colapsado com animação */}
+        {expanded && (
+          <>
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Número CTE: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={`${numeroCte || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Data carregamento: "
+                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.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Origem: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Typography
+                text={`${origem || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Destino: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${destino || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Próximo carregamento: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${proximoCarregamento || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Peso: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${formatPeso(peso) || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km carregado: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmCarregado || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km vazio: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmVazio || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Base para cálculo do PRO: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${formatBase(baseCalculo) || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+TripDetailsCard.displayName = "TripDetailsCard";
+export default asBaseComponent(TripDetailsCard);

package/src/stories/step-indicator/step-indicator.stories.tsx

@@ -26,6 +26,7 @@ Você usa assim:
     backgroundColorBall="#050022"
     type="default"
     data={dataMock}
+    handleOnPressActivitie: (data)=> console.log(data)
   />
 \`\`\`
 `,

package/src/utils/text-limit/index.ts

@@ -0,0 +1,28 @@
+/**
+ * IMPORTS
+ */
+
+interface ILimitProps {
+  text: string;
+  limit: number;
+}
+const handleLimitTextdisplayByAmount = ({ text, limit }: ILimitProps) => {
+  if (text?.length > limit) {
+    return `${text.substring(0, limit)}...`;
+  } else {
+    return text;
+  }
+};
+
+const handleLimitTextDate = ({ text, limit }: ILimitProps) => {
+  if (text?.length > limit) {
+    return `${text.substring(0, limit)}`;
+  } else {
+    return text;
+  }
+};
+
+/**
+ * EXPORTS
+ */
+export { handleLimitTextdisplayByAmount, handleLimitTextDate };