react-native-exp-fig 0.1.9 → 0.1.11

package/src/components/image-capture-with-remove/index.tsx

@@ -1,83 +1,89 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Image, TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-
-// comons / icons
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import { IImageCaptureWithRemoveProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- *
- * Componente ImageCaptureWithRemove para a interação do usuário com ui.
- */
-const ImageCaptureWithRemove: React.FC<IImageCaptureWithRemoveProps> = ({
-  width = 50,
-  height = 50,
-  foto = null,
-  handleTakePhoto,
-  onRemove,
-}: IImageCaptureWithRemoveProps) => {
-  return (
-    <TouchableOpacity
-      testID="image-capture-touchable"
-      activeOpacity={0.7}
-      style={{ position: "relative" }}
-      onPress={handleTakePhoto}
-      disabled={!!foto}
-    >
-      <Box
-        width={width}
-        height={height}
-        flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
-        testID="plus-icon-box"
-        borderStyled={{
-          borderWidth: 1,
-          borderRadius: theme.fontSizes.md,
-          borderColor: theme.colors.blue[400],
-        }}
-      >
-        {foto ? (
-          <>
-            <Image
-              testID="captured-image"
-              style={{
-                width: "100%",
-                height: "100%",
-                borderRadius: theme.fontSizes.md,
-                resizeMode: "cover",
-              }}
-              source={{
-                uri: foto,
-              }}
-            />
-
-            <TouchableOpacity
-              testID="remove-button"
-              style={{ position: "absolute", top: 2, right: 4 }}
-              onPress={onRemove}
-            >
-              <Icons icon="X_CIRCLE" color={theme.colors.red[400]} size={18} />
-            </TouchableOpacity>
-          </>
-        ) : (
-          <Icons icon="PLUS" color={theme.colors.blue[400]} />
-        )}
-      </Box>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { ImageCaptureWithRemove };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+
+// comons / icons
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { IImageCaptureWithRemoveProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// utils
+import { getBorderColor } from "../../utils/status-color/return-color";
+
+/**
+ *
+ * Componente ImageCaptureWithRemove para a interação do usuário com ui.
+ */
+const ImageCaptureWithRemove: React.FC<IImageCaptureWithRemoveProps> = ({
+  width = 50,
+  height = 50,
+  foto = null,
+  handleTakePhoto,
+  onRemove,
+  status,
+}: IImageCaptureWithRemoveProps) => {
+  const statusColor = status === "Cancelado" || status === "Pendente";
+
+  return (
+    <TouchableOpacity
+      testID="image-capture-touchable"
+      activeOpacity={0.7}
+      style={{ position: "relative" }}
+      onPress={handleTakePhoto}
+      disabled={!!foto}
+    >
+      <Box
+        width={width}
+        height={height}
+        flexStyle={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}
+        testID="plus-icon-box"
+        borderStyled={{
+          borderWidth: statusColor ? theme.borderWidths.thick : theme.borderWidths.thin,
+          borderRadius: theme.fontSizes.md,
+          borderColor: statusColor ? getBorderColor(status) : theme.colors.blue[400],
+        }}
+      >
+        {foto ? (
+          <>
+            <Image
+              testID="captured-image"
+              style={{
+                width: "100%",
+                height: "100%",
+                borderRadius: theme.fontSizes.md,
+                resizeMode: "cover",
+              }}
+              source={{
+                uri: foto,
+              }}
+            />
+
+            <TouchableOpacity
+              testID="remove-button"
+              style={{ position: "absolute", top: 2, right: 4 }}
+              onPress={onRemove}
+            >
+              <Icons icon="X_CIRCLE" color={theme.colors.red[400]} size={18} />
+            </TouchableOpacity>
+          </>
+        ) : (
+          <Icons icon="PLUS" color={theme.colors.blue[400]} />
+        )}
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { ImageCaptureWithRemove };

package/src/components/image-capture-with-remove/interface.d.ts

@@ -1,22 +1,25 @@
-/**
- * IMPORTS
- */
-type IImageCaptureWithRemoveProps = {
-  /**define o tamanho */
-  width?: number;
-  /**define o altura */
-  height?: number;
-  /**Imagem capturada */
-  foto?: string | null;
-
-  /**Remove a imagem capturada */
-  onRemove: () => void;
-
-  /**Captura a imagem */
-  handleTakePhoto: () => void;
-};
-
-/**
- * EXPORTS
- */
-export { IImageCaptureWithRemoveProps };
+/**
+ * IMPORTS
+ */
+type IImageCaptureWithRemoveProps = {
+  /**define o tamanho */
+  width?: number;
+  /**define o altura */
+  height?: number;
+  /**Imagem capturada */
+  foto?: string | null;
+
+  /**Remove a imagem capturada */
+  onRemove: () => void;
+
+  /**Captura a imagem */
+  handleTakePhoto: () => void;
+
+  /**Define o status das fotos */
+  status?: "Pendente" | "Concluido" | "Cancelado" | "Andamento";
+};
+
+/**
+ * EXPORTS
+ */
+export { IImageCaptureWithRemoveProps };

package/src/components/notification-loading/index.tsx

@@ -1,144 +1,155 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// icons
-import { Icons } from "../../common/icons-svg";
-
-// theme
-import { theme } from "../../styles/theme/theme";
-
-import { INotificationLoading } from "./interface";
-import { getStatusColor, StatusType } from "../../utils/status-color/return-color";
-
-const NotificationLoading: React.FC<INotificationLoading> = ({
-  handleNavigation,
-  title,
-  testID,
-  statusNotify,
-  date,
-  notification,
-  dataStart,
-  style,
-}) => {
-  // const truncatedText = title.length > 13 ? title.substring(0, 11) + "..." : title;
-  return (
-    <TouchableOpacity activeOpacity={0.7} testID={testID} onPress={handleNavigation}>
-      <Box
-        width={"100%"}
-        flexStyle={{ flexDirection: "row", alignItems: "center" }}
-        backgroundColor={theme.colors.blue[400]}
-        borderStyled={{
-          borderWidth: 1,
-          borderRadius: theme.borderWidths.thick_medium,
-          borderColor: theme.colors.blue[400],
-        }}
-        paddingStyle={{ padding: theme.paddings["2xs"] }}
-        style={[{ elevation: 5 }, style]}
-      >
-        <Box width={"9%"}>
-          <Icons icon={"BELL"} size={32} color={theme.colors.neutral[25]} />
-        </Box>
-
-        <Box
-          flexStyle={{ flexDirection: "column" }}
-          width={"91%"}
-          paddingStyle={{ paddingLeft: 7 }}
-        >
-          {/*   Carregamento identificação */}
-          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-            <Typography
-              text={"Carregamento - "}
-              size={theme.fontSizes.sm}
-              lineHeight={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={title}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_bold_700}
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-            />
-          </Box>
-
-          {/*   Data do carregamento */}
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
-          >
-            <Box
-              flexStyle={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
-              <Typography
-                text={"Data - "}
-                size={theme.fontSizes.sm}
-                lineHeight={theme.fontSizes.lg ?? 18}
-                fontFamily={theme.fonts.inter_medium_500}
-                color={theme.colors.neutral[25]}
-                letterSpacing={"regular"}
-              />
-              <Typography
-                text={String(date)}
-                size={theme.fontSizes.sm}
-                lineHeight={theme.fontSizes.lg ?? 18}
-                fontFamily={theme.fonts.inter_medium_500}
-                color={theme.colors.neutral[25]}
-                letterSpacing={"regular"}
-              />
-            </Box>
-            <Box
-              flexStyle={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
-              <Typography
-                text={String(dataStart)}
-                size={theme.fontSizes["2xs"]}
-                fontFamily={theme.fonts.inter_medium_500}
-                color={theme.colors.neutral[25]}
-                letterSpacing={"regular"}
-                marginRight={8}
-              />
-
-              <Icons icon={"ELLIPSE"} color={getStatusColor(statusNotify as StatusType)} size={9} />
-            </Box>
-          </Box>
-
-          {/*  Mensagem de notificação do carregamento */}
-          <Typography
-            text={notification}
-            size={theme.fontSizes["2xs"]}
-            fontFamily={theme.fonts.inter_medium_500}
-            lineHeight={theme.fontSizes.sm ?? 14}
-            color={theme.colors.neutral[25]}
-            letterSpacing={"regular"}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-          />
-        </Box>
-      </Box>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { NotificationLoading };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+import { INotificationLoading } from "./interface";
+import { getStatusColor, StatusType } from "../../utils/status-color/return-color";
+
+const NotificationLoading: React.FC<INotificationLoading> = ({
+  handleNavigation,
+  title,
+  testID,
+  statusNotify,
+  date,
+  notification,
+  dataStart,
+  style,
+  readonly,
+}) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      testID={testID}
+      onPress={handleNavigation}
+      disabled={readonly}
+    >
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row", alignItems: "center" }}
+        backgroundColor={readonly ? theme.colors.blue[40050] : theme.colors.blue[400]}
+        borderStyled={{
+          borderWidth: theme.borderWidths.thin,
+          borderRadius: theme.borderWidths.thick_medium,
+          borderColor: readonly ? theme.colors.blue[40050] : theme.colors.blue[400],
+        }}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        style={style}
+      >
+        <Box width={"9%"}>
+          <Icons icon={"BELL"} size={32} color={theme.colors.neutral[25]} />
+        </Box>
+
+        <Box
+          flexStyle={{ flexDirection: "column" }}
+          width={"91%"}
+          paddingStyle={{ paddingLeft: 7 }}
+        >
+          {/*   Carregamento identificação */}
+          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+            <Typography
+              text={"Carregamento - "}
+              size={theme.fontSizes.sm}
+              lineHeight={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={title}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold_700}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+          </Box>
+
+          {/*   Data do carregamento */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                text={"Data - "}
+                size={theme.fontSizes.sm}
+                lineHeight={theme.fontSizes.lg ?? 18}
+                fontFamily={theme.fonts.inter_medium_500}
+                color={theme.colors.neutral[25]}
+                letterSpacing={"regular"}
+              />
+              <Typography
+                text={String(date)}
+                size={theme.fontSizes.sm}
+                lineHeight={theme.fontSizes.lg ?? 18}
+                fontFamily={theme.fonts.inter_medium_500}
+                color={theme.colors.neutral[25]}
+                letterSpacing={"regular"}
+              />
+            </Box>
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                text={String(dataStart)}
+                size={theme.fontSizes["2xs"]}
+                fontFamily={theme.fonts.inter_medium_500}
+                color={theme.colors.neutral[25]}
+                letterSpacing={"regular"}
+                marginRight={8}
+              />
+
+              <Icons
+                icon={"ELLIPSE"}
+                color={
+                  readonly ? theme.colors.neutral[25] : getStatusColor(statusNotify as StatusType)
+                }
+                size={9}
+              />
+            </Box>
+          </Box>
+
+          {/*  Mensagem de notificação do carregamento */}
+          <Typography
+            text={notification}
+            size={theme.fontSizes["2xs"]}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={theme.fontSizes.sm ?? 14}
+            color={theme.colors.neutral[25]}
+            letterSpacing={"regular"}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+          />
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { NotificationLoading };

package/src/components/notification-loading/interface.d.ts

@@ -1,31 +1,35 @@
-/**
- * IMPORTS
- */
-import { ViewProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface INotificationLoading extends ViewProps, IGlobalCss {
-  /**propriedade que indica o título do carregamento */
-  title: string;
-
-  /**propriedade que indica a data  do carregamento */
-  date: string | Date;
-
-  /**função que faz a navegação da tela */
-  handleNavigation: () => void;
-
-  /**propriedade que indica a notificação */
-  notification: string;
-
-  /**propriedade que indica o status da notificação */
-  statusNotify: string;
-
-  dataStart: string | Date;
-}
-
-/**
- * EXPORTS
- */
-export { INotificationLoading };
+/**
+ * IMPORTS
+ */
+import { ViewProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../styles/global/interface";
+
+interface INotificationLoading extends ViewProps, IGlobalCss {
+  /**propriedade que indica o título do carregamento */
+  title: string;
+
+  /**propriedade que indica a data  do carregamento */
+  date: string | Date;
+
+  /**função que faz a navegação da tela */
+  handleNavigation: () => void;
+
+  /**propriedade que indica a notificação */
+  notification: string;
+
+  /**propriedade que indica o status da notificação */
+  statusNotify: string;
+
+  /**propriedade que indica a data da notificação */
+  dataStart: string | Date;
+
+  /**propriedade que indica se a notificação está lida ou não */
+  readonly?: boolean;
+}
+
+/**
+ * EXPORTS
+ */
+export { INotificationLoading };

package/src/components/profile-menu-option/index.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+// typing
+import { IProfileMenuOption } from "./interface";
+
+const ProfileMenuOption: React.FC<IProfileMenuOption> = ({
+  handleNavigation,
+  icon,
+  text,
+  backgroundColor,
+  colorIcon,
+}) => {
+  return (
+    <TouchableOpacity onPress={handleNavigation} activeOpacity={0.7}>
+      <Box
+        flexStyle={{
+          alignItems: "center",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        width={"100%"}
+        backgroundColor={backgroundColor ?? theme.colors.blue[400]}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+          borderColor: theme.colors.blue[400],
+        }}
+        marginStyle={{ marginBottom: theme.margins.xs }}
+      >
+        <Box flexStyle={{ alignItems: "center", flexDirection: "row" }}>
+          <Icons icon={icon ?? "AGENT"} color={colorIcon ?? theme.colors.neutral[25]} />
+          <Typography
+            text={text}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_bold_700}
+            fontWeight={"700"}
+            lineHeight={theme.fontSizes.lg}
+            color={theme.colors.neutral[25]}
+            marginLeft={theme.margins.xs}
+          />
+        </Box>
+        <Typography
+          text="›"
+          size={theme.fontSizes["2xl"]}
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight={"500"}
+          color={theme.colors.neutral[25]}
+        />
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+export { ProfileMenuOption };