react-native-exp-fig 0.1.44 → 2.0.0

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

@@ -1,93 +1,92 @@
-/**
- * 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,
-  useRemove = true,
-  disabled,
-  status,
-  handleTakePhoto,
-  onRemove,
-}: IImageCaptureWithRemoveProps) => {
-  const statusColor = status === "Cancelado" || status === "Pendente";
-
-  return (
-    <TouchableOpacity
-      testID="image-capture-touchable"
-      activeOpacity={0.7}
-      style={{ position: "relative" }}
-      onPress={handleTakePhoto}
-      disabled={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,
-              }}
-            />
-
-            {useRemove && (
-              <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,
+  useRemove = true,
+  status,
+  handleTakePhoto,
+  onRemove,
+}: 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,
+              }}
+            />
+
+            {useRemove && (
+              <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,30 +1,28 @@
-/**
- * IMPORTS
- */
-type IImageCaptureWithRemoveProps = {
-  /**define o tamanho */
-  width?: number;
-  /**define o altura */
-  height?: number;
-  /**Imagem capturada */
-  foto?: string | null;
-
-  /**Define o status das fotos */
-  status?: "Pendente" | "Concluido" | "Cancelado" | "Andamento";
-
-  /**propiedade que define se e para utilizar o metódo de remover */
-  useRemove?: boolean;
-
-  disabled?: boolean;
-
-  /**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;
+
+  /**Define o status das fotos */
+  status?: "Pendente" | "Concluido" | "Cancelado" | "Andamento";
+
+  /**propiedade que define se e para utilizar o metódo de remover */
+  useRemove?: boolean;
+
+  /**Remove a imagem capturada */
+  onRemove: () => void;
+
+  /**Captura a imagem */
+  handleTakePhoto: () => void;
+};
+
+/**
+ * EXPORTS
+ */
+export { IImageCaptureWithRemoveProps };

package/src/components/input/index.tsx

@@ -1,181 +1,181 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Dimensions, TextInput, TouchableOpacity, ViewStyle } from "react-native";
-
-// components
-import Box from "../box";
-import { Typography } from "../typography";
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import { type IInputProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-import { styles } from "./styles";
-
-/**
- *
- * Componente Input para a interação do usuário com ui.
- */
-const Input: React.FC<IInputProps> = ({
-  name,
-  textLabel,
-  messageError,
-  width,
-  backgroundColor,
-  marginStyle,
-  paddingStyle,
-  borderStyled,
-  isVisiblyPassword, // password
-  testID,
-  opacity,
-  children,
-  fontStyle,
-  style,
-  flexStyle,
-  handlePressIsVisiblyPassword, // password
-  append,
-  color,
-  placeholder,
-  textLabelPlaceholder,
-  secureTextEntry,
-  ...props
-}) => {
-  const styleProps = {
-    width,
-    backgroundColor,
-    borderStyled,
-    flexStyle,
-    paddingStyle,
-    marginStyle,
-    testID,
-    opacity,
-    children,
-    fontStyle,
-    color,
-    style,
-    name,
-  } as IInputProps;
-
-  const { width: widthScreen } = Dimensions.get("window");
-  const isMobile = widthScreen < 768;
-
-  const positionIcon: ViewStyle = {
-    position: "absolute",
-    right: 15,
-    top: isMobile ? 65 : 40,
-  };
-  const positionIconPassword: ViewStyle = {
-    position: "absolute",
-    right: isMobile ? 5 : 32,
-    top: isMobile ? 65 : 38,
-  };
-  const positionLabel: ViewStyle = { position: "absolute", right: 35, top: 65 };
-
-  return (
-    <Box paddingStyle={paddingStyle} marginStyle={marginStyle} style={{ position: "relative" }}>
-      <Box>
-        <Typography
-          size={theme.fontSizes.md}
-          text={String(textLabel)}
-          color={color?.colorText ?? theme.colors.gray[900]}
-        />
-
-        <TextInput
-          // @ts-ignore
-          style={[styles(styleProps).input, { backgroundColor }, style]}
-          placeholder={placeholder}
-          secureTextEntry={secureTextEntry}
-          color={theme.colors.gray[900]}
-          {...props}
-        />
-      </Box>
-      {append && (
-        <Box>
-          <Typography
-            size={theme.fontSizes["lg"]}
-            text={append.appendText ?? ""}
-            color={append.appendColor ?? "#000"}
-          />
-        </Box>
-      )}
-
-      {name === "label" && (
-        <Box backgroundColor={"transparent"} style={positionLabel}>
-          <Typography
-            text={textLabelPlaceholder ?? ""}
-            size={theme.fontSizes["sm"]}
-            fontWeight="400"
-            fontFamily={theme.fonts.inter_regular_400}
-            color={theme.colors.blue[500]}
-            lineHeight={24}
-            letterSpacing={"regular"}
-          />
-        </Box>
-      )}
-
-      {name === "password" ||
-        (name === "senha" && (
-          <Box backgroundColor={"transparent"} style={positionIconPassword}>
-            <TouchableOpacity
-              activeOpacity={0.7}
-              testID="eye-icon"
-              onPress={handlePressIsVisiblyPassword}
-            >
-              <Icons
-                size={theme.fontSizes["3xl"]}
-                color={theme.colors.blue[500]}
-                icon={isVisiblyPassword ? "EYE" : "EYE_SLASH"}
-              />
-            </TouchableOpacity>
-          </Box>
-        ))}
-      {name === "data" && (
-        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
-          <Icons
-            testID="CALENDAR"
-            size={theme.fontSizes["lg"]}
-            color={theme.colors.gray[700]}
-            icon={"CALENDAR"}
-          />
-        </Box>
-      )}
-      {name === "hours" && (
-        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
-          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"TIMER"} />
-        </Box>
-      )}
-      {name === "litragem" && (
-        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
-          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"GAS_PUMP"} />
-        </Box>
-      )}
-      {name === "value" && (
-        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
-          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"CURRENCY"} />
-        </Box>
-      )}
-      {Boolean(messageError) && (
-        <Box width={"100%"} backgroundColor={backgroundColor}>
-          <Typography
-            text={messageError ?? ""}
-            size={theme.fontSizes["sm"]}
-            fontFamily="inter_regular_400"
-            color={theme.colors.red[900] ?? "#9F0000"}
-            lineHeight={24}
-            letterSpacing={"regular"}
-            marginTop={2}
-          />
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { Input };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Dimensions, TextInput, TouchableOpacity, ViewStyle } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { type IInputProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+
+/**
+ *
+ * Componente Input para a interação do usuário com ui.
+ */
+const Input: React.FC<IInputProps> = ({
+  name,
+  textLabel,
+  messageError,
+  width,
+  backgroundColor,
+  marginStyle,
+  paddingStyle,
+  borderStyled,
+  isVisiblyPassword, // password
+  testID,
+  opacity,
+  children,
+  fontStyle,
+  style,
+  flexStyle,
+  handlePressIsVisiblyPassword, // password
+  append,
+  color,
+  placeholder,
+  textLabelPlaceholder,
+  secureTextEntry,
+  ...props
+}) => {
+  const styleProps = {
+    width,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    testID,
+    opacity,
+    children,
+    fontStyle,
+    color,
+    style,
+    name,
+  } as IInputProps;
+
+  const { width: widthScreen } = Dimensions.get("window");
+  const isMobile = widthScreen < 768;
+
+  const positionIcon: ViewStyle = {
+    position: "absolute",
+    right: 15,
+    top: isMobile ? 65 : 40,
+  };
+  const positionIconPassword: ViewStyle = {
+    position: "absolute",
+    right: isMobile ? 5 : 32,
+    top: isMobile ? 65 : 38,
+  };
+  const positionLabel: ViewStyle = { position: "absolute", right: 35, top: 65 };
+
+  return (
+    <Box paddingStyle={paddingStyle} marginStyle={marginStyle} style={{ position: "relative" }}>
+      <Box>
+        <Typography
+          size={theme.fontSizes.md}
+          text={String(textLabel)}
+          color={color?.colorText ?? theme.colors.gray[900]}
+        />
+
+        <TextInput
+          // @ts-ignore
+          style={[styles(styleProps).input, { backgroundColor }, style]}
+          placeholder={placeholder}
+          secureTextEntry={secureTextEntry}
+          color={theme.colors.gray[900]}
+          {...props}
+        />
+      </Box>
+      {append && (
+        <Box>
+          <Typography
+            size={theme.fontSizes["lg"]}
+            text={append.appendText ?? ""}
+            color={append.appendColor ?? "#000"}
+          />
+        </Box>
+      )}
+
+      {name === "label" && (
+        <Box backgroundColor={"transparent"} style={positionLabel}>
+          <Typography
+            text={textLabelPlaceholder ?? ""}
+            size={theme.fontSizes["sm"]}
+            fontWeight="400"
+            fontFamily={theme.fonts.inter_regular_400}
+            color={theme.colors.blue[500]}
+            lineHeight={24}
+            letterSpacing={"regular"}
+          />
+        </Box>
+      )}
+
+      {name === "password" ||
+        (name === "senha" && (
+          <Box backgroundColor={"transparent"} style={positionIconPassword}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              testID="eye-icon"
+              onPress={handlePressIsVisiblyPassword}
+            >
+              <Icons
+                size={theme.fontSizes["3xl"]}
+                color={theme.colors.blue[500]}
+                icon={isVisiblyPassword ? "EYE" : "EYE_SLASH"}
+              />
+            </TouchableOpacity>
+          </Box>
+        ))}
+      {name === "data" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons
+            testID="CALENDAR"
+            size={theme.fontSizes["lg"]}
+            color={theme.colors.gray[700]}
+            icon={"CALENDAR"}
+          />
+        </Box>
+      )}
+      {name === "hours" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"TIMER"} />
+        </Box>
+      )}
+      {name === "litragem" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"GAS_PUMP"} />
+        </Box>
+      )}
+      {name === "value" && (
+        <Box width={40} height={70} backgroundColor={"transparent"} style={positionIcon}>
+          <Icons size={theme.fontSizes["lg"]} color={theme.colors.gray[700]} icon={"CURRENCY"} />
+        </Box>
+      )}
+      {Boolean(messageError) && (
+        <Box width={"100%"} backgroundColor={backgroundColor}>
+          <Typography
+            text={messageError ?? ""}
+            size={theme.fontSizes["sm"]}
+            fontFamily="inter_regular_400"
+            color={theme.colors.red[900] ?? "#9F0000"}
+            lineHeight={24}
+            letterSpacing={"regular"}
+            marginTop={2}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Input };