react-native-form-container - npm Package Compare versions

Comparing version 1.0.41 to 1.0.42

index.d.ts

 declare module 'react-native-form-container' {
-  import { MutableRefObject, ReactNode } from 'react';
-  import { ViewProps, TextInputProps } from 'react-native';
+  import {MutableRefObject, ReactNode} from 'react';
+  import {ViewProps, TextInputProps} from 'react-native';
 
@@ -48,3 +48,2 @@ export interface FormContainerProps extends ViewProps {
     validation?: keyof ValidationFields;
-
   }
@@ -55,2 +54,4 @@
     id: string;
+    validation: Exclude<keyof ValidationFields, 'password'>;
+    pattern?: RegExp;
   }
@@ -66,2 +67,4 @@ export interface NonValidationProps extends InputProps {
 
+    required: true;
+    id: string;
   }
@@ -72,9 +75,14 @@
     passwordOptions?: never;
+
+    id: string;
   }
 
-  export type FormInputProps = ValidationProps | NonValidationProps;
-  export type FormInputProps = PasswordInputProps | NonPasswordFormInputProps;
+  export type FormInputProps =
+    | ValidationProps
+    | NonValidationProps
+    | PasswordInputProps
+    | NonPasswordFormInputProps;
 
   const FormInput: (props: FormInputProps) => JSX.Element;
-  export { FormInput };
+  export {FormInput};
 }

package.json

 {
   "name": "react-native-form-container",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "A form container component for React Native",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/FormInput.tsx

@@ -1,21 +0,12 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import {
   View,
   TextInput,
-  TextInputProps,
   TouchableOpacity,
-  ActivityIndicator,
   Platform,
   StyleSheet,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
   Text,
 } from 'react-native';
-import { FormInputProps } from 'react-native-form-container';
+import {FormInputProps} from 'react-native-form-container';
 
-
-
-
-
 export default function FormInput({
@@ -27,3 +18,3 @@ iconPosition = 'left',
   errorMessage,
-  required = false,
+  required,
   passwordHideIcon,
@@ -34,3 +25,3 @@ passwordShowIcon,
   errorMessageComponent,
-  errorMessageTextStyle = { color: 'red', marginTop: 5 },
+  errorMessageTextStyle = {color: 'red', marginTop: 5},
   errorMessageContainerStyle,
@@ -88,3 +79,3 @@ ...props
         <TouchableOpacity
-          style={[styles.passwordIcon, { top: iconTop, right: 10 }]}
+          style={[styles.passwordIcon, {top: iconTop, right: 10}]}
           onPress={() => setPasswordShow(!passwordShow)}>
@@ -96,3 +87,3 @@ {passwordShow ? passwordShowIcon() : passwordHideIcon()}
       {iconPosition === 'right' && icon !== undefined && (
-        <View style={[styles.icon, { top: iconTop, right: 10 }]}>{icon()}</View>
+        <View style={[styles.icon, {top: iconTop, right: 10}]}>{icon()}</View>
       )}
@@ -99,0 +90,0 @@ {errorMessage && (

src/FormContainer.tsx

@@ -1,17 +0,6 @@
-import React, {
-  MutableRefObject,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import { View } from 'react-native';
-import {
-  isValidation,
-  checkPasswordOptions,
-} from './Validation';
-import { FormContainerProps } from 'react-native-form-container';
+import React, {ReactNode, useCallback, useEffect, useState} from 'react';
+import {View} from 'react-native';
+import {isValidation, checkPasswordOptions} from './Validation';
+import {FormContainerProps} from 'react-native-form-container';
 
-
-
 export default function FormContainer(props: FormContainerProps) {
@@ -26,3 +15,3 @@ const {
   );
-  const [errors, setErrors] = useState<{ [key: string]: string | undefined }>({});
+  const [errors, setErrors] = useState<{[key: string]: string | undefined}>({});
   const checkValidation = useCallback((errorData: any) => {
@@ -36,3 +25,3 @@ handleErrorMessage(errorData);
       if (React.isValidElement(child)) {
-        const childProps = { ...child.props };
+        const childProps = {...child.props};
         if (childProps.id) {
@@ -86,3 +75,3 @@ let checkValidation = childProps?.validation;
         if (React.isValidElement(child)) {
-          var childProps = { ...child.props };
+          var childProps = {...child.props};
 
@@ -92,18 +81,36 @@ if (childProps.id) {
               let error = errors?.[childProps.id];
-              let validationCheck = childProps?.validation;
+              let validationCheck = childProps?.validation || 'text';
+
               if (validationCheck) {
                 let result = isValidation(
-                  childProps?.validation,
+                  childProps?.validation || 'text',
                   childProps?.value,
                   childProps?.passwordOptions,
+                  childProps?.pattern,
                 );
+                console.log('result', result);
                 if (!result) {
-                  let errorOptions = checkPasswordOptions(
-                    childProps?.passwordOptions,
-                    childProps?.value,
-                    childProps?.id,
-                  );
-                  let findKeyErrorOptions = Object.keys(errorOptions)[0];
+                  let validation = childProps?.validation || 'text';
+                  if (validation === 'password') {
+                    let errorOptions = checkPasswordOptions(
+                      childProps?.passwordOptions,
+                      childProps?.value,
+                      childProps?.id,
+                    );
+                    let findKeyErrorOptions = Object.keys(errorOptions)[0];
+                    childProps[errorMessageField] =
+                      errors?.[findKeyErrorOptions];
+                  } else {
+                    if (error) {
+                      let validationOrIdErroMessageField =
+                        childProps?.value === ''
+                          ? error
+                          : errors?.[validation] || error
+                          ? errors?.[validation] || error
+                          : error;
 
-                  childProps[errorMessageField] = errors?.[findKeyErrorOptions];
+                      childProps[errorMessageField] =
+                        validationOrIdErroMessageField;
+                    }
+                  }
                 }
@@ -110,0 +117,0 @@ } else {

src/Validation.ts

@@ -1,4 +0,6 @@
-import { ValidationFieldsKeys, ValidationPasswordOptions } from "react-native-form-container";
+import {
+  ValidationFieldsKeys,
+  ValidationPasswordOptions,
+} from 'react-native-form-container';
 
-
 export const ValidationFields = {
@@ -50,2 +52,3 @@ email: {
   passwordOptions?: ValidationPasswordOptions,
+  pattern?: RegExp,
 ) => {
@@ -56,3 +59,6 @@ if (value === undefined || value === null || value === '') {
   if (validation === 'email') {
-    if (!ValidationFields.email.pattern.value.test(value)) {
+    if (
+      !pattern?.test(value) ??
+      !ValidationFields.email.pattern.value.test(value)
+    ) {
       return false;
@@ -63,3 +69,6 @@ }
     if (passwordOptions?.lowerCase) {
-      if (!ValidationFields.lowerCaseCharacter.pattern.value.test(value)) {
+      if (
+        !pattern?.test(value) ??
+        !ValidationFields.lowerCaseCharacter.pattern.value.test(value)
+      ) {
         return false;
@@ -69,3 +78,6 @@ }
     if (passwordOptions?.upperCase) {
-      if (!ValidationFields.upperCaseCharacter.pattern.value.test(value)) {
+      if (
+        !pattern?.test(value) ??
+        !ValidationFields.upperCaseCharacter.pattern.value.test(value)
+      ) {
         return false;
@@ -75,3 +87,6 @@ }
     if (passwordOptions?.number) {
-      if (!ValidationFields.number.pattern.value.test(value)) {
+      if (
+        !pattern?.test(value) ??
+        !ValidationFields.number.pattern.value.test(value)
+      ) {
         return false;
@@ -81,3 +96,6 @@ }
     if (passwordOptions?.speacial) {
-      if (!ValidationFields.speacialCharacter.pattern.value.test(value)) {
+      if (
+        !pattern?.test(value) ??
+        !ValidationFields.speacialCharacter.pattern.value.test(value)
+      ) {
         return false;
@@ -91,3 +109,6 @@ }
   if (validation === 'text') {
-    if (!ValidationFields.text.pattern.value.test(value)) {
+    if (
+      !pattern?.test(value) ??
+      !ValidationFields.text.pattern.value.test(value)
+    ) {
       return false;
@@ -97,3 +118,6 @@ }
   if (validation === 'phone') {
-    if (!ValidationFields.phone.pattern.value.test(value)) {
+    if (
+      !pattern?.test(value) ??
+      !ValidationFields.phone.pattern.value.test(value)
+    ) {
       return false;
@@ -103,3 +127,6 @@ }
   if (validation === 'number') {
-    if (!ValidationFields.number.pattern.value.test(value)) {
+    if (
+      !pattern?.test(value) ??
+      !ValidationFields.number.pattern.value.test(value)
+    ) {
       return false;
@@ -129,3 +156,3 @@ }
   if (options?.lowerCase) {
-    if (ValidationFields.lowerCaseCharacter.pattern.value.test(value)) {
+    if (!ValidationFields.lowerCaseCharacter.pattern.value.test(value)) {
       result = {
@@ -137,3 +164,3 @@ lowerCase: true,
   if (options?.upperCase) {
-    if (ValidationFields.upperCaseCharacter.pattern.value.test(value)) {
+    if (!ValidationFields.upperCaseCharacter.pattern.value.test(value)) {
       result = {
@@ -145,3 +172,3 @@ upperCase: true,
   if (options?.number) {
-    if (ValidationFields.number.pattern.value.test(value)) {
+    if (!ValidationFields.number.pattern.value.test(value)) {
       result = {
@@ -153,3 +180,3 @@ number: true,
   if (options?.speacial) {
-    if (ValidationFields.speacialCharacter.pattern.value.test(value)) {
+    if (!ValidationFields.speacialCharacter.pattern.value.test(value)) {
       result = {
@@ -161,3 +188,3 @@ speacial: true,
   if (options?.minLength) {
-    if (ValidationFields.minPassword.pattern.value.test(value)) {
+    if (!ValidationFields.minPassword.pattern.value.test(value)) {
       result = {
@@ -164,0 +191,0 @@ minLength: true,

No alert changes

Improved metrics

Total package byte prevSize

21943

5.44%

Lines of code

506

8.35%

No dependency changes