jornada-ui 0.4.8 → 0.4.9

package/src/components/modal-maintenance/index.tsx

@@ -1,160 +1,184 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Modal, View, Image, TouchableOpacity } from "react-native";
-
-// components
-import Box from "../../components/box";
-import Typography from "../../components/typography";
-
-// commons / svg
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import type { IModalMaintenanceProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const ModalMaintenance: React.FC<IModalMaintenanceProps> = ({
-  visible,
-  onClose,
-  dataRegistro,
-  descricao,
-  imagemUrl,
-}) => {
-  return (
-    <Modal animationType="fade" transparent visible={visible}>
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: "rgba(0,0,0,0.6)",
-        }}
-      >
-        <Box
-          width={"90%"}
-          backgroundColor={theme.colors.orange[500]}
-          borderStyled={{
-            borderRadius: theme.borderWidths.thick_medium,
-          }}
-          paddingStyle={{
-            paddingLeft: theme.paddings["2xs"],
-            paddingRight: theme.paddings["2xs"],
-            paddingTop: theme.paddings.sm,
-            paddingBottom: theme.paddings.sm,
-          }}
-        >
-          <Box
-            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
-            flexStyle={{ flexDirection: "row", alignItems: "center" }}
-          >
-            <Icons
-              icon="EXCLAMATION_TRIANGLE"
-              color={theme.colors.orange[500]}
-              background={theme.colors.neutral[25]}
-              size={theme.fontSizes.xl}
-            />
-            <Typography
-              text="Manutenção"
-              color="#fff"
-              marginLeft={theme.margins["2xs"]}
-              fontFamily={theme.fonts.inter_bold}
-              size={theme.fontSizes.md}
-            />
-          </Box>
-
-          <Box
-            backgroundColor={theme.colors.gray[300]}
-            paddingStyle={{
-              padding: theme.paddings["2xs"],
-            }}
-            borderStyled={{
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
-          >
-            <Box
-              borderStyled={{
-                borderWidth: 2,
-                borderColor: theme.colors.black[10],
-                borderRadius: theme.borderWidths.thick_medium,
-              }}
-            >
-              <Image
-                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
-                resizeMode="cover"
-                style={{
-                  width: "100%",
-                  height: 139,
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-              />
-            </Box>
-            <Box flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}>
-              <Typography
-                text={`Data: `}
-                marginTop={theme.margins.xs}
-                color={theme.colors.black[25]}
-                fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.xs}
-              />
-              <Typography
-                text={`${dataRegistro}`}
-                marginTop={theme.margins.xs}
-                color={theme.colors.gray[700]}
-                fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.xs}
-              />
-            </Box>
-
-            <Typography
-              text="Descrição:"
-              color={theme.colors.black[25]}
-              fontFamily={theme.fonts.inter_medium_500}
-              size={theme.fontSizes.xs}
-            />
-
-            <Typography
-              text={descricao}
-              color={theme.colors.gray[700]}
-              fontFamily={theme.fonts.inter_regular_400}
-              size={theme.fontSizes.sm}
-              lineHeight={theme.lineHeight.lg}
-            />
-            <Box
-              flexStyle={{
-                flexDirection: "row",
-                justifyContent: "flex-end",
-              }}
-            >
-              <TouchableOpacity
-                onPress={onClose}
-                style={{
-                  width: 127,
-                  height: 32,
-                  borderWidth: theme.borderWidths.thin,
-                  borderRadius: theme.borderWidths.thin_bold,
-                  borderColor: theme.colors.black[10],
-                  alignItems: "center",
-                  justifyContent: "center",
-                  marginTop: theme.margins.sm,
-                }}
-              >
-                <Typography
-                  text="FECHAR"
-                  color={theme.colors.black[25]}
-                  fontFamily={theme.fonts.inter_medium_500}
-                  size={theme.fontSizes.xs}
-                />
-              </TouchableOpacity>
-            </Box>
-          </Box>
-        </Box>
-      </View>
-    </Modal>
-  );
-};
-
-export default ModalMaintenance;
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, View, Image, TouchableOpacity } from "react-native";
+
+// components
+import Box from "../../components/box";
+import Typography from "../../components/typography";
+
+// commons / svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import type { IModalMaintenanceProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { getStatusColorHex } from "../../utils/get-status-color";
+
+const ModalMaintenance: React.FC<IModalMaintenanceProps> = ({
+  visible,
+  onClose,
+  dataRegistro,
+  descricao,
+  status,
+  imagemUrl,
+}) => {
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <Box
+          width={"90%"}
+          backgroundColor={theme.colors.orange[500]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            paddingLeft: theme.paddings["2xs"],
+            paddingRight: theme.paddings["2xs"],
+            paddingTop: theme.paddings.sm,
+            paddingBottom: theme.paddings.sm,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.orange[500]}
+              background={theme.colors.neutral[25]}
+              size={theme.fontSizes.xl}
+            />
+            <Typography
+              text="Manutenção"
+              color="#fff"
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold}
+              size={theme.fontSizes.md}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.gray[300]}
+            paddingStyle={{
+              padding: theme.paddings["2xs"],
+            }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          >
+            <Box
+              borderStyled={{
+                borderWidth: 2,
+                borderColor: theme.colors.black[10],
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+            >
+              <Image
+                source={{ uri: imagemUrl ?? "https://placehold.co/300x300" }}
+                resizeMode="cover"
+                style={{
+                  width: "100%",
+                  height: 139,
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+            </Box>
+            <Box
+              marginStyle={{ marginTop: 8 }}
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "flex-start",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                text={`Status: `}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.sm}
+              />
+              <Box
+                width={10}
+                height={10}
+                borderStyled={{
+                  borderRadius: 8,
+                }}
+                backgroundColor={getStatusColorHex(status)}
+              />
+            </Box>
+
+            <Box 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}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Typography
+              text="Descrição:"
+              color={theme.colors.black[25]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.sm}
+            />
+
+            <Typography
+              text={descricao}
+              color={theme.colors.gray[700]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.sm}
+              lineHeight={theme.lineHeight.lg}
+            />
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "flex-end",
+              }}
+            >
+              <TouchableOpacity
+                onPress={onClose}
+                style={{
+                  width: 127,
+                  height: 32,
+                  borderWidth: theme.borderWidths.thin,
+                  borderRadius: theme.borderWidths.thin_bold,
+                  borderColor: theme.colors.black[10],
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginTop: theme.margins.sm,
+                }}
+              >
+                <Typography
+                  text="FECHAR"
+                  color={theme.colors.black[25]}
+                  fontFamily={theme.fonts.inter_medium_500}
+                  size={theme.fontSizes.xs}
+                />
+              </TouchableOpacity>
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalMaintenance;

package/src/components/modal-maintenance/interface.d.ts

@@ -1,16 +1,17 @@
-/**
- * IMPORTS
- */
-interface IModalMaintenanceProps {
-  visible: boolean;
-  onClose: () => void;
-  dataRegistro: string;
-  descricao: string;
-  imagemUrl?: string;
-  numero: number;
-}
-
-/**
- * EXPORTS
- */
-export { IModalMaintenanceProps };
+/**
+ * IMPORTS
+ */
+interface IModalMaintenanceProps {
+  visible: boolean;
+  onClose: () => void;
+  dataRegistro: string;
+  descricao: string;
+  imagemUrl?: string;
+  numero: number;
+  status: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { IModalMaintenanceProps };

package/src/utils/get-status-color/index.ts

@@ -0,0 +1,31 @@
+/**
+ * IMPORTS
+ */
+
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Function that will map property types to corresponding icons in SVG 🛠️.
+ * @param propertyType
+ * @returns SVG
+ */
+const getStatusColorHex = (propertyType: string) => {
+  switch (propertyType) {
+    case "Pendente":
+      return theme.colors.yellow[100];
+
+    case "Em Andamento":
+      return theme.colors.blue[150];
+
+    case "Concluido":
+      return theme.colors.green[400];
+
+    default:
+      return theme.colors.yellow[100]; // Retorna uma Svg default caso o tipo de propriedade não for reconhecido.
+  }
+};
+
+/**
+ * EXPORTS
+ */
+export { getStatusColorHex };