react-formr - npm Package Compare versions

Comparing version 1.1.8 to 1.2.0

lib/formr.js

@@ -12,46 +12,53 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useRef, useState, useCallback, useEffect } from "react";
 import { validator, fieldBools } from "./utils";
 var Formr = function (_a) {
-    var formFields = _a.formFields, children = _a.children, validation = _a.validation, _b = _a.onChange, onChange = _b === void 0 ? function (vals) { } : _b;
-    var _c = useState(formFields), values = _c[0], setValues = _c[1];
-    var _d = useState(fieldBools(formFields)), touched = _d[0], setTouched = _d[1];
-    var _e = useState(fieldBools(validation || {})), valid = _e[0], setValid = _e[1];
+    var formFields = _a.formFields, children = _a.children, validation = _a.validation, _b = _a.onChange, onChange = _b === void 0 ? function (vals) { } : _b, _c = _a.onFinishFocuse, onFinishFocuse = _c === void 0 ? function () { } : _c;
+    // States & refs
+    var _d = useState(formFields), values = _d[0], setValues = _d[1];
+    var _e = useState(fieldBools(formFields)), touched = _e[0], setTouched = _e[1];
+    var valid = useRef(fieldBools(validation || {}));
+    var refs = useRef([]);
+    // Additional listener for any change in form fields
     useEffect(function () {
         onChange(values);
     }, [values]);
-    // Input change listner
-    var onHandleChange = useCallback(function (key, value) {
-        // Set form values
-        setValues(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[key] = value, _a)));
-        });
-        // run validation & set validation
+    // Setting valid helper
+    var setValid = useCallback(function (key, validated) {
+        var _a;
+        valid.current = __assign(__assign({}, valid.current), (_a = {}, _a[key] = validated, _a));
+    }, [valid]);
+    // run validation & set validation
+    var fieldValidation = function (key, value) {
         if (validation && validation[key]) {
-            var validationObj_1 = validation[key];
+            var validationObj = validation[key];
             // if validation type is set
-            if (validationObj_1.type) {
-                var validation_1 = validator(validationObj_1.type, value);
-                setValid(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[key] = validation_1, _a)));
-                });
+            if (validationObj.type) {
+                var validation_1 = validator(validationObj.type, value);
+                setValid(key, validation_1);
             }
-            else if (validationObj_1.rules) {
+            else if (validationObj.rules) {
                 // if validation rules is set
-                setValid(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[key] = validator("rules", value, validationObj_1.rules), _a)));
-                });
+                var validation_2 = validator("rules", value, validationObj.rules);
+                setValid(key, validation_2);
             }
+            else if (validationObj.required) {
+                var validation_3 = value !== "";
+                setValid(key, validation_3);
+            }
             else {
                 // no validation
-                setValid(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[key] = true, _a)));
-                });
+                setValid(key, true);
             }
         }
-    }, [setValid, setValues]);
+    };
+    // Input change listner
+    var onHandleChange = useCallback(function (key, value) {
+        // Set form values
+        setValues(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = value, _a)));
+        });
+        fieldValidation(key, value);
+    }, [setValues, values]);
     // Input Blur listner
@@ -63,5 +70,10 @@ var onHandleBlur = useCallback(function (key) {
         });
-    }, [setTouched]);
+        fieldValidation(key, values[key]);
+    }, [setTouched, values]);
     // formSubmit listner
     var handleSubmit = useCallback(function (callback) {
+        // run validation
+        Object.keys(values).forEach(function (key) {
+            fieldValidation(key, values[key]);
+        });
         var submissionAllowed = !Object.keys(formFields).some(function (key) {
@@ -73,3 +85,3 @@ // reurn true if any nonvalid formfields
                 validation[key].required) {
-                return valid[key] === false;
+                return valid.current[key] === false;
             }
@@ -87,5 +99,3 @@ else {
             // blurr all fields to show error if any
-            Object.keys(touched).forEach(function (acc) {
-                onHandleBlur(acc);
-            });
+            Object.keys(touched).forEach(onHandleBlur);
         }
@@ -95,2 +105,4 @@ return false;
     var inputBinder = useCallback(function (key) {
+        var cField = Object.keys(formFields).indexOf(key);
+        var tFields = Object.keys(formFields).length;
         return {
@@ -101,5 +113,21 @@ onChangeText: function (text) { return onHandleChange(key, text); },
             touched: touched[key],
-            valid: valid[key],
+            valid: valid.current[key],
+            ref: function (ref) {
+                return (refs.current[Object.keys(formFields).indexOf(key)] = ref);
+            },
+            onSubmitEditing: function () {
+                if (cField + 1 < tFields) {
+                    refs.current[Object.keys(formFields).indexOf(key) + 1].focus();
+                }
+                else {
+                    onFinishFocuse(values);
+                }
+            },
         };
-    }, [onHandleChange, onHandleBlur, values, touched, valid]);
+    }, [onHandleChange, onHandleBlur, values, touched, valid, formFields]);
+    // Mapping ref object to formField keys to destruct while using
+    var outputRefs = __assign({}, formFields);
+    Object.keys(formFields).map(function (val, key) {
+        outputRefs[val] = refs.current[key];
+    });
     var returnItem = {
@@ -111,4 +139,5 @@ onHandleChange: onHandleChange,
         touched: touched,
-        valid: valid,
+        valid: valid.current,
         inputBinder: inputBinder,
+        refs: outputRefs,
     };
@@ -115,0 +144,0 @@ return children(returnItem);

lib/Types.d.ts

@@ -15,5 +15,11 @@ export interface FormMessages {
 }
+export interface NullObject {
+    [key: string]: null;
+}
 export interface StringObject {
     [key: string]: string;
 }
+export interface AnyObject {
+    [key: string]: any;
+}
 export interface FormrValidation {
@@ -24,7 +30,6 @@ [key: string]: FormValidation;
     children: any;
-    formFields: {
-        [key: string]: string;
-    };
+    formFields: StringObject;
     validation?: FormrValidation;
-    onChange?: () => object;
+    onChange?: (values: StringObject) => object;
+    onFinishFocuse?: (values: StringObject) => void;
 }
@@ -34,5 +39,7 @@ export interface InputBinderProps {
     onBlur: () => void;
+    onSubmitEditing: () => void;
     value: string;
     valid: boolean;
     touched: boolean;
+    ref: any;
 }
@@ -47,2 +54,3 @@ export interface FormrFunctions {
     inputBinder: Function;
+    refs: AnyObject;
 }

lib/utils.d.ts

@@ -1,3 +0,4 @@
-import { StringObject, BoolObject, FormValidation } from "./Types";
+import { StringObject, BoolObject, FormValidation, NullObject } from "./Types";
 export declare const validator: (type: string | undefined, value: string, rule?: string) => boolean;
 export declare const fieldBools: (obj: StringObject | FormValidation) => BoolObject;
+export declare const fieldNulls: (obj: StringObject | FormValidation) => NullObject;

lib/utils.js

@@ -26,1 +26,7 @@ import validatorFn from "validator";
 };
+export var fieldNulls = function (obj) {
+    return Object.keys(obj).reduce(function (acc, key) {
+        acc[key] = null;
+        return acc;
+    }, {});
+};

package.json

 {
   "name": "react-formr",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Form managing component for React & React Native",
@@ -28,5 +28,8 @@ "main": "./lib/index.js",
   "peerDependencies": {
-    "react": "^16.0,0",
-    "validator": "~13.1.1"
+    "react": "^16.0.0"
   },
+  "dependencies": {
+    "validator": "~13.1.1",
+    "yarn": "^1.22.5"
+  },
   "devDependencies": {
@@ -33,0 +36,0 @@ "@types/react": "^16.9.34",

README.md

 # react-formr
 
+[![npm version](https://badge.fury.io/js/react-formr.svg)](https://badge.fury.io/js/react-formr)
+[![npm](https://img.shields.io/npm/dt/react-formr.svg)](https://www.npmjs.com/package/react-formr)
+![MIT](https://img.shields.io/dub/l/vibe-d.svg)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
 Centralised Solution for managing values & validation in react native
@@ -4,0 +9,0 @@

src/formr.ts

@@ -17,7 +17,11 @@ import React, { useRef, useState, useCallback, useEffect } from "react";
   onChange = (vals: StringObject) => {},
+  onFinishFocuse = () => {},
 }) => {
+  // States & refs
   const [values, setValues] = useState<StringObject>(formFields);
   const [touched, setTouched] = useState<BoolObject>(fieldBools(formFields));
-  const [valid, setValid] = useState<BoolObject>(fieldBools(validation || {}));
+  const valid = useRef<BoolObject>(fieldBools(validation || {}));
+  const refs = useRef<any>([]);
 
+  // Additional listener for any change in form fields
   useEffect(() => {
@@ -27,2 +31,32 @@ onChange(values);
 
+  // Setting valid helper
+  const setValid = useCallback(
+    (key: string, validated: boolean) => {
+      valid.current = { ...valid.current, [key]: validated };
+    },
+    [valid]
+  );
+
+  // run validation & set validation
+  const fieldValidation = (key: string, value: string) => {
+    if (validation && validation[key]) {
+      const validationObj: FormValidation = validation[key];
+      // if validation type is set
+      if (validationObj.type) {
+        const validation = validator(validationObj.type, value);
+        setValid(key, validation);
+      } else if (validationObj.rules) {
+        // if validation rules is set
+        const validation = validator("rules", value, validationObj.rules);
+        setValid(key, validation);
+      } else if (validationObj.required) {
+        const validation = value !== "";
+        setValid(key, validation);
+      } else {
+        // no validation
+        setValid(key, true);
+      }
+    }
+  };
+
   // Input change listner
@@ -33,29 +67,5 @@ const onHandleChange = useCallback(
       setValues((prev) => ({ ...prev, [key]: value }));
-
-      // run validation & set validation
-      if (validation && validation[key]) {
-        const validationObj: FormValidation = validation[key];
-        // if validation type is set
-        if (validationObj.type) {
-          const validation = validator(validationObj.type, value);
-          setValid((prev) => ({
-            ...prev,
-            [key]: validation,
-          }));
-        } else if (validationObj.rules) {
-          // if validation rules is set
-          setValid((prev) => ({
-            ...prev,
-            [key]: validator("rules", value, validationObj.rules),
-          }));
-        } else {
-          // no validation
-          setValid((prev) => ({
-            ...prev,
-            [key]: true,
-          }));
-        }
-      }
+      fieldValidation(key, value);
     },
-    [setValid, setValues]
+    [setValues, values]
   );
@@ -67,4 +77,5 @@
       setTouched((prev) => ({ ...prev, [key]: true }));
+      fieldValidation(key, values[key]);
     },
-    [setTouched]
+    [setTouched, values]
   );
@@ -75,2 +86,6 @@
     (callback: (vals: StringObject) => {}): boolean => {
+      // run validation
+      Object.keys(values).forEach((key) => {
+        fieldValidation(key, values[key]);
+      });
       const submissionAllowed: boolean = !Object.keys(formFields).some(
@@ -85,3 +100,3 @@ (key) => {
           ) {
-            return valid[key] === false;
+            return valid.current[key] === false;
           } else {
@@ -99,5 +114,3 @@ // if no validation or no required fields
         // blurr all fields to show error if any
-        Object.keys(touched).forEach((acc) => {
-          onHandleBlur(acc);
-        });
+        Object.keys(touched).forEach(onHandleBlur);
       }
@@ -111,2 +124,4 @@ return false;
     (key: string): InputBinderProps => {
+      const cField = Object.keys(formFields).indexOf(key);
+      const tFields = Object.keys(formFields).length;
       return {
@@ -117,8 +132,23 @@ onChangeText: (text: string) => onHandleChange(key, text),
         touched: touched[key],
-        valid: valid[key],
+        valid: valid.current[key],
+        ref: (ref: any) =>
+          (refs.current[Object.keys(formFields).indexOf(key)] = ref),
+        onSubmitEditing: () => {
+          if (cField + 1 < tFields) {
+            refs.current[Object.keys(formFields).indexOf(key) + 1].focus();
+          } else {
+            onFinishFocuse(values);
+          }
+        },
       };
     },
-    [onHandleChange, onHandleBlur, values, touched, valid]
+    [onHandleChange, onHandleBlur, values, touched, valid, formFields]
   );
 
+  // Mapping ref object to formField keys to destruct while using
+  const outputRefs = { ...formFields };
+  Object.keys(formFields).map((val, key) => {
+    outputRefs[val] = refs.current[key];
+  });
+
   const returnItem: FormrFunctions = {
@@ -130,4 +160,5 @@ onHandleChange,
     touched,
-    valid,
+    valid: valid.current,
     inputBinder,
+    refs: outputRefs,
   };
@@ -134,0 +165,0 @@ return children(returnItem);

src/Types.ts

@@ -16,2 +16,5 @@ export interface FormMessages {
 }
+export interface NullObject {
+  [key: string]: null;
+}
 export interface StringObject {
@@ -21,2 +24,6 @@ [key: string]: string;
 
+export interface AnyObject {
+  [key: string]: any;
+}
+
 export interface FormrValidation {
@@ -28,5 +35,6 @@ [key: string]: FormValidation;
   children: any;
-  formFields: { [key: string]: string };
+  formFields: StringObject;
   validation?: FormrValidation;
-  onChange?: () => object;
+  onChange?: (values: StringObject) => object;
+  onFinishFocuse?: (values: StringObject) => void;
 }
@@ -36,5 +44,7 @@ export interface InputBinderProps {
   onBlur: () => void;
+  onSubmitEditing: () => void;
   value: string;
   valid: boolean;
   touched: boolean;
+  ref: any;
 }
@@ -49,2 +59,3 @@ export interface FormrFunctions {
   inputBinder: Function;
+  refs: AnyObject;
 }

src/utils.ts

 import validatorFn from "validator";
-import { StringObject, BoolObject, FormValidation } from "./Types";
+import { StringObject, BoolObject, FormValidation, NullObject } from "./Types";
 export const validator = (
@@ -29,1 +29,7 @@ type: string = "",
   }, {});
+
+export const fieldNulls = (obj: StringObject | FormValidation) =>
+  Object.keys(obj).reduce((acc: NullObject, key: string) => {
+    acc[key] = null;
+    return acc;
+  }, {});

tsconfig.json

@@ -69,3 +69,4 @@ {
     "outDir": "./lib",
-    "declaration": true
+    "declaration": true,
+    "watch": true
   },
@@ -72,0 +73,0 @@ "include": ["./src"],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28718

increased by8.64%

Lines of code

544

increased by8.15%

Number of lines in readme file

104

increased by5.05%

Worsened metrics

Dependency count

3

increased by50%

Number of package files

17

decreased by-5.56%

Dependency changes

• + Addedvalidator@~13.1.1

• + Addedyarn@^1.22.5

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedyarn@1.22.22(transitive)