react-native-exp-fig 0.1.21 → 0.1.23

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

@@ -1,157 +1,157 @@
-/**
- * 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}>
-      <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.lg}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-              fontWeight="600"
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={title}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.fontSizes.md}
-              fontFamily={theme.fonts.inter_bold_700}
-              fontWeight="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}
-                fontWeight="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}
-                fontWeight="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}
-                fontWeight="500"
-                lineHeight={theme.fontSizes.sm}
-                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}
-            fontWeight="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}>
+      <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.lg}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              fontWeight="600"
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={title}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.fontSizes.md}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight="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}
+                fontWeight="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}
+                fontWeight="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}
+                fontWeight="500"
+                lineHeight={theme.fontSizes.sm}
+                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}
+            fontWeight="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/profile-menu-option/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TouchableOpacity } from "react-native";
 
 // components
-import { Box } from "../box";
+import Box from "../box";
 import { Typography } from "../typography";
 
 // icons

package/src/components/scheduled-journey-indicators/index.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { Dimensions, TouchableOpacity } from "react-native";
 
 // components
-import { Box } from "../box";
+import Box from "../box";
 import { Typography } from "../typography";
 
 // commons / Icon

package/src/components/selects/select-option/index.tsx

@@ -1,100 +1,115 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { useState } from "react";
-import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
-
-// typings
-import { ISelectDropDownProps } from "./interface";
-
-// styles
-import { styles } from "./styles";
-import { Icons } from "../../../common/icons-svg";
-import { theme } from "../../../styles/theme/theme";
-
-/**
- * Componente SelectOption para a interação da  ui.
- */
-const SelectOption: React.FC<ISelectDropDownProps> = ({
-  dataOption,
-  handleSelectDown,
-  titleLabel,
-  sizeTitleLabel,
-  colortitleLabel,
-}: ISelectDropDownProps) => {
-  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
-  const [modalVisible, setModalVisible] = useState(false);
-
-  const handleSelect = (value: string) => {
-    setSelectedValue(value);
-    setModalVisible(false);
-    handleSelectDown(value);
-  };
-
-  const styleProps = {
-    dataOption,
-    handleSelectDown,
-    titleLabel,
-    sizeTitleLabel,
-    colortitleLabel,
-  } as ISelectDropDownProps;
-
-  return (
-    <View style={styles(styleProps).container}>
-      {/* Titulo para exibir o label */}
-      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
-
-      {/* Botão para abrir o modal */}
-      <TouchableOpacity
-        testID="select-box"
-        style={styles(styleProps).selectBox}
-        onPress={() => setModalVisible(true)}
-      >
-        <Text style={styles(styleProps).selectedText}>
-          {dataOption.find((item) => item.value === selectedValue)?.label}
-        </Text>
-
-        <Icons
-          size={theme.fontSizes["md"]}
-          color={theme.colors.blue[500]}
-          icon={"ARROW_DROP_DOWN"}
-        />
-      </TouchableOpacity>
-
-      {/* Modal para exibir as opções */}
-      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
-        <View style={styles(styleProps).modalOverlay}>
-          <View style={styles(styleProps).modalContainer}>
-            <View style={{ width: "100%", alignItems: "flex-end" }}>
-              <TouchableOpacity testID="close-icon" onPress={() => setModalVisible(false)}>
-                <Icons
-                  size={theme.fontSizes["md"]}
-                  color={theme.colors.blue[500]}
-                  icon={"CLOSED"}
-                />
-              </TouchableOpacity>
-            </View>
-            <FlatList
-              data={dataOption || []}
-              keyExtractor={(item) => item.value}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles(styleProps).option}
-                  onPress={() => handleSelect(item.value)}
-                >
-                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
-                </TouchableOpacity>
-              )}
-            />
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { SelectOption };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// typings
+import { ISelectDropDownProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { Icons } from "../../../common/icons-svg";
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente SelectOption para a interação da  ui.
+ */
+const SelectOption: React.FC<ISelectDropDownProps> = ({
+  dataOption,
+  handleSelectDown,
+  titleLabel,
+  sizeTitleLabel,
+  colortitleLabel,
+  backgroundColor,
+}: ISelectDropDownProps) => {
+  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleSelect = (value: string) => {
+    setSelectedValue(value);
+    setModalVisible(false);
+    handleSelectDown(value);
+  };
+
+  const styleProps = {
+    dataOption,
+    handleSelectDown,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+    backgroundColor,
+  } as ISelectDropDownProps;
+
+  return (
+    <View style={styles(styleProps).container}>
+      {/* Titulo para exibir o label */}
+      <Text style={styles(styleProps).label}>{`${titleLabel ?? "Selecione uma opção"}`}:</Text>
+
+      {/* Botão para abrir o modal */}
+      <TouchableOpacity
+        testID="select-box"
+        style={[styles(styleProps).selectBox, backgroundColor && { backgroundColor },]}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text style={styles(styleProps).selectedText}>
+          {dataOption.find((item) => item.value === selectedValue)?.label}
+        </Text>
+
+        <Icons
+          size={theme.fontSizes["md"]}
+          color={theme.colors.blue[500]}
+          icon={"ARROW_DROP_DOWN"}
+        />
+      </TouchableOpacity>
+
+      {/* Modal para exibir as opções */}
+      <Modal testID="modal-container" visible={modalVisible} transparent animationType="fade">
+        <View style={styles(styleProps).modalOverlay}>
+          <View style={{
+              width: "90%",
+              backgroundColor: "#fff",
+              borderRadius: 8,
+              padding: 16,
+              maxHeight: "80%",
+            }}>
+            <View style={{ width: "100%", alignItems: "flex-end" }}>
+              <TouchableOpacity testID="close-icon" onPress={() => setModalVisible(false)}>
+                <Icons
+                  size={theme.fontSizes["md"]}
+                  color={theme.colors.blue[500]}
+                  icon={"CLOSED"}
+                />
+              </TouchableOpacity>
+            </View>
+            <FlatList
+              data={dataOption || []}
+              keyExtractor={(item) => item.value}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={{
+                    width: "100%",
+                    paddingVertical: 12,
+                    paddingHorizontal: 8,
+                    alignItems: "flex-start",
+                    borderBottomWidth: 1,
+                    borderColor: "#eee",
+                  }}
+                  onPress={() => handleSelect(item.value)}
+                >
+                  <Text style={styles(styleProps).optionText}>{item.label}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { SelectOption };

package/src/components/selects/select-option/interface.d.ts

@@ -1,18 +1,18 @@
-/**
- * IMPORTS
- */
-type ISelectDropDownProps = {
-  dataOption: any[];
-  titleLabel: string;
-  sizeTitleLabel?: number;
-  colortitleLabel?: string;
-
-  /**retorna o valor selecionado              */
-  // eslint-disable-next-line no-unused-vars
-  handleSelectDown: (value: string) => void;
-};
-
-/**
- * EXPORTS
- */
-export { ISelectDropDownProps };
+/**
+ * IMPORTS
+ */
+type ISelectDropDownProps = {
+  dataOption: any[];
+  titleLabel: string;
+  sizeTitleLabel?: number;
+  colortitleLabel?: string;
+  backgroundColor?: string;
+  /**retorna o valor selecionado              */
+  // eslint-disable-next-line no-unused-vars
+  handleSelectDown: (value: string) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export { ISelectDropDownProps };