react-native-exp-fig 0.1.37 → 0.1.39

package/src/components/modals/modal-activity-reason/index.tsx

@@ -1,162 +1,163 @@
-/**
- * IMPORTS
- */
-import React, { useState } from "react";
-import { Modal, View } from "react-native";
-
-// components
-import Box from "../../box";
-import { Typography } from "../../typography";
-import { Button } from "../../button";
-
-import InputTextCounter from "../../input-text-counter";
-
-// commons / svg
-import { Icons } from "../../../common/icons-svg";
-
-// typings
-import type { IModalActivityReasonProps } from "./interface";
-
-// styles
-import { theme } from "../../../styles/theme/theme";
-
-const ModalActivityReason: React.FC<IModalActivityReasonProps> = ({
-  visible,
-  onClose,
-  modalConfirm,
-  textTitle,
-  testID,
-}) => {
-  const [isLoading] = useState(false);
-
-  return (
-    <Modal testID={testID} 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[300]}
-              size={22}
-            />
-            <Typography
-              text={`${textTitle ?? "Motivo da exclusão"}`}
-              color={theme.colors.neutral[25]}
-              marginLeft={theme.margins["2xs"]}
-              fontFamily={theme.fonts.inter_bold_700}
-              size={theme.fontSizes.md}
-            />
-          </Box>
-
-          <Box
-            backgroundColor={theme.colors.neutral[300]}
-            paddingStyle={{
-              padding: theme.paddings.xs,
-            }}
-            borderStyled={{
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
-          >
-            <Box width="100%">
-              <InputTextCounter
-                label={`${textTitle || "Motivo da exclusão"}`}
-                placeholderTextColor="#9B9B9B"
-                placeholder="Motivo da exclusão"
-              />
-            </Box>
-            <Box
-              marginStyle={{ marginTop: 4 }}
-              flexStyle={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-              }}
-            >
-              <Button
-                title="CANCELAR"
-                onPress={onClose}
-                width={"48%"}
-                height={40}
-                isLoading={isLoading}
-                disabled={isLoading}
-                backgroundColor={theme.colors.neutral[300]}
-                buttonTextStyle={{
-                  color: theme.colors.blue[100],
-                  fontFamily: "Inter-Medium",
-                  fontSize: theme.fontSizes.xs,
-                  fontWeight: "500",
-                }}
-                flexStyle={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  textAlign: "center",
-                }}
-                borderStyled={{
-                  borderWidth: theme.borderWidths.thin,
-                  borderColor: theme.colors.blue[100],
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-              />
-              <Button
-                title="CONFIRMAR"
-                onPress={() => {
-                  modalConfirm(true);
-                  onClose();
-                }}
-                width={"48%"}
-                height={40}
-                isLoading={isLoading}
-                disabled={isLoading}
-                backgroundColor={theme.colors.blue[500]}
-                buttonTextStyle={{
-                  color: theme.colors.neutral[25],
-                  fontFamily: "Inter-Medium",
-                  fontSize: theme.fontSizes.xs,
-                  fontWeight: "500",
-                }}
-                flexStyle={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  textAlign: "center",
-                }}
-                borderStyled={{
-                  borderWidth: theme.borderWidths.thin,
-                  borderColor: theme.colors.blue[100],
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-              />
-            </Box>
-          </Box>
-        </Box>
-      </View>
-    </Modal>
-  );
-};
-
-ModalActivityReason.displayName = "ModalActivityReason";
-
-export default ModalActivityReason;
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import { Modal, View } from "react-native";
+
+// components
+import Box from "../../box";
+import { Typography } from "../../typography";
+import { Button } from "../../button";
+
+import InputTextCounter from "../../input-text-counter";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalActivityReasonProps } from "./interface";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+
+const ModalActivityReason: React.FC<IModalActivityReasonProps> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  textTitle,
+  testID,
+}) => {
+  const [isLoading] = useState(false);
+  const [description, setDescription] = useState("");
+
+  return (
+    <Modal testID={testID} 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[300]}
+              size={22}
+            />
+            <Typography
+              text={`${textTitle ?? "Motivo da exclusão"}`}
+              color={theme.colors.neutral[25]}
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.md}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{
+              padding: theme.paddings.xs,
+            }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          >
+            <Box width="100%">
+              <InputTextCounter
+                label={`${textTitle || "Motivo da exclusão"}`}
+                placeholderTextColor="#9B9B9B"
+                placeholder="Motivo da exclusão"
+                onChangeText={setDescription}
+              />
+            </Box>
+            <Box
+              marginStyle={{ marginTop: 4 }}
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <Button
+                title="CANCELAR"
+                onPress={onClose}
+                width={"48%"}
+                height={40}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: theme.colors.blue[100],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+              <Button
+                title="CONFIRMAR"
+                onPress={() => {
+                  modalConfirm(description);
+                }}
+                width={"48%"}
+                height={40}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.blue[500]}
+                buttonTextStyle={{
+                  color: theme.colors.neutral[25],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+ModalActivityReason.displayName = "ModalActivityReason";
+
+export default ModalActivityReason;

package/src/components/modals/modal-activity-reason/interface.d.ts

@@ -1,10 +1,10 @@
-/* eslint-disable no-unused-vars */
-interface IModalActivityReasonProps {
-  visible: boolean;
-  onClose: () => void;
-  modalConfirm: (value: true) => void;
-  textTitle?: string;
-  testID?: string;
-}
-
-export type { IModalActivityReasonProps };
+/* eslint-disable no-unused-vars */
+interface IModalActivityReasonProps {
+  visible: boolean;
+  onClose: () => void;
+  modalConfirm: (value: string) => void;
+  textTitle?: string;
+  testID?: string;
+}
+
+export type { IModalActivityReasonProps };

package/src/components/modals/modal-change-activity/index.tsx

@@ -126,7 +126,7 @@ export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
               titleLabel="Selecione atividade"
               sizeTitleLabel={theme.fontSizes.xs}
               dataOption={options}
-              handleSelectDown={(opt) => {
+              handleSelectDown={(opt: any) => {
                 const option = options.find((o) => o.label === opt || o.value === opt);
                 if (option) setSelectedOption(option.value);
               }}

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

@@ -1,124 +1,124 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
-
-// commons / svg
-import { Icons } from "../../../common/icons-svg";
-
-// utils
-import { handleLimitTextdisplayByAmount } from "../../../utils/text-limit";
-
-// typings
-import { asBaseComponent } from "../../../@types/as-base-component";
-import type { ISelectDropDownProps } from "./interface";
-
-// styles
-import { styles } from "./styles";
-import { theme } from "../../../styles/theme/theme";
-
-const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {
-  const {
-    dataOption,
-    handleSelectDown,
-    titleLabel,
-    sizeTitleLabel,
-    colortitleLabel,
-    backgroundColor,
-  } = props;
-
-  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 ref={ref} 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} numberOfLines={1}>
-          {`${handleLimitTextdisplayByAmount({
-            limit: 42,
-            text: dataOption.find((item) => item.value === selectedValue)?.label!,
-          })}`}
-        </Text>
-
-        <Icons
-          size={theme.fontSizes["xs"]}
-          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",
-                height: 40,
-                paddingRight: 8,
-              }}
-            >
-              <TouchableOpacity
-                testID="close-icon"
-                onPress={() => setModalVisible(false)}
-                style={{
-                  width: 40,
-                  height: 45,
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <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>
-  );
-});
-
-/**
- * Componente SelectOption para a interação da  ui.
- */
-export default asBaseComponent(SelectOption);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { View, Text, TouchableOpacity, Modal, FlatList } from "react-native";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// utils
+import { handleLimitTextdisplayByAmount } from "../../../utils/text-limit";
+
+// typings
+import { asBaseComponent } from "../../../@types/as-base-component";
+import type { ISelectDropDownProps } from "./interface";
+
+// styles
+import { styles } from "./styles";
+import { theme } from "../../../styles/theme/theme";
+
+const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {
+  const {
+    dataOption,
+    handleSelectDown,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+    backgroundColor,
+  } = props;
+
+  const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleSelect = (value: number) => {
+    setSelectedValue(value);
+    setModalVisible(false);
+    handleSelectDown(value);
+  };
+
+  const styleProps = {
+    dataOption,
+    handleSelectDown,
+    titleLabel,
+    sizeTitleLabel,
+    colortitleLabel,
+    backgroundColor,
+  } as ISelectDropDownProps;
+  return (
+    <View ref={ref} 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} numberOfLines={1}>
+          {`${handleLimitTextdisplayByAmount({
+            limit: 42,
+            text: dataOption.find((item) => item.value === selectedValue)?.label!,
+          })}`}
+        </Text>
+
+        <Icons
+          size={theme.fontSizes["xs"]}
+          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",
+                height: 40,
+                paddingRight: 8,
+              }}
+            >
+              <TouchableOpacity
+                testID="close-icon"
+                onPress={() => setModalVisible(false)}
+                style={{
+                  width: 40,
+                  height: 45,
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <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>
+  );
+});
+
+/**
+ * Componente SelectOption para a interação da  ui.
+ */
+export default asBaseComponent(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;
-  backgroundColor?: 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: number) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export { ISelectDropDownProps };