react-hook-form - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0-beta.1

dist/index.d.ts

@@ -46,2 +46,3 @@ declare type Validate = (data: string | number) => boolean | string | number | Date;
 }
+declare type ValidationSchema = any;
 export interface ErrorMessages {
@@ -52,7 +53,8 @@ [key: string]: {
 }
-export default function useForm({ mode }?: {
+export default function useForm({ mode, validationSchema }?: {
     mode: 'onSubmit' | 'onBlur' | 'onChange';
+    validationSchema?: ValidationSchema;
 }): {
     register: (data: RegisterInput) => void;
-    handleSubmit: (callback: (Object: any, e: any) => void) => (e: any) => void;
+    handleSubmit: (callback: (Object: any, e: any) => void) => (e: any) => Promise<void>;
     errors: ErrorMessages;
@@ -59,0 +61,0 @@ watch: (filedNames?: string | string[], defaultValue?: string | string[]) => any;

dist/index.es.js

@@ -222,3 +222,23 @@ import { useRef, useState, useEffect } from 'react';
 
-function useForm({ mode } = { mode: 'onSubmit' }) {
+function parseErrorSchema(error) {
+    return error.inner.reduce((previous, current, index) => {
+        if (!previous[current.path])
+            previous[current.path] = {};
+        previous[current.path][current.type] = error.errors[index];
+        return previous;
+    }, {});
+}
+async function validateWithSchema(ValidationSchema, data) {
+    try {
+        await ValidationSchema.validate(data, { abortEarly: false });
+        return undefined;
+    }
+    catch (e) {
+        return parseErrorSchema(e);
+    }
+}
+
+function useForm({ mode, validationSchema } = {
+    mode: 'onSubmit',
+}) {
     const fields = useRef({});
@@ -309,34 +329,48 @@ const localErrorMessages = useRef({});
     }
-    const handleSubmit = (callback) => e => {
+    const handleSubmit = (callback) => async (e) => {
         e.preventDefault();
         const allFields = fields.current;
-        const { localErrors, values } = Object.values(allFields).reduce((previous, data) => {
-            const { ref, ref: { name, type }, options, } = data;
-            removeReferenceAndEventListeners(data);
-            if (!fields.current[name])
+        let localErrors;
+        let values;
+        if (validationSchema) {
+            values = Object.values(allFields).map((ref) => getFieldValue(allFields, ref));
+            localErrors = await validateWithSchema(validationSchema, values);
+            if (localErrors === undefined) {
+                callback(values, e);
+                return;
+            }
+        }
+        else {
+            const result = Object.values(allFields).reduce((previous, data) => {
+                const { ref, ref: { name, type }, options, } = data;
+                removeReferenceAndEventListeners(data);
+                if (!fields.current[name])
+                    return previous;
+                const fieldError = validateField(data, allFields);
+                const hasError = fieldError && fieldError[name];
+                if (!hasError) {
+                    previous.values[name] = getFieldValue(allFields, ref);
+                    return previous;
+                }
+                if (isRadioInput(type) && Array.isArray(options)) {
+                    options.forEach(option => {
+                        if (option.eventAttached && option.eventAttached.includes('change'))
+                            return;
+                        option.ref.addEventListener('change', validateWithStateUpdate);
+                        option.eventAttached = [...option.eventAttached, 'change'];
+                    });
+                }
+                else if (fields.current[name].eventAttached && !fields.current[name].eventAttached.includes('input')) {
+                    ref.addEventListener('input', validateWithStateUpdate);
+                    data.eventAttached = [...(data.eventAttached || []), 'input'];
+                }
+                previous.localErrors = Object.assign({}, (previous.localErrors || []), fieldError);
                 return previous;
-            const fieldError = validateField(data, allFields);
-            const hasError = fieldError && fieldError[name];
-            if (!hasError) {
-                previous.values[name] = getFieldValue(allFields, ref);
-                return previous;
-            }
-            if (isRadioInput(type) && Array.isArray(options)) {
-                options.forEach(option => {
-                    if (option.eventAttached && option.eventAttached.includes('change'))
-                        return;
-                    option.ref.addEventListener('change', validateWithStateUpdate);
-                    option.eventAttached = [...option.eventAttached, 'change'];
-                });
-            }
-            else if (fields.current[name].eventAttached && !fields.current[name].eventAttached.includes('input')) {
-                ref.addEventListener('input', validateWithStateUpdate);
-                data.eventAttached = [...(data.eventAttached || []), 'input'];
-            }
-            previous.localErrors = Object.assign({}, (previous.localErrors || []), fieldError);
-            return previous;
-        }, {
-            localErrors: {},
-            values: {},
-        });
+            }, {
+                localErrors: {},
+                values: {},
+            });
+            localErrors = result.localErrors;
+            values = result.values;
+        }
         if (JSON.stringify(localErrorMessages.current) !== JSON.stringify(localErrors)) {
@@ -343,0 +377,0 @@ updateErrorMessage(localErrors);

dist/index.js

@@ -224,3 +224,23 @@ 'use strict';
 
-function useForm({ mode } = { mode: 'onSubmit' }) {
+function parseErrorSchema(error) {
+    return error.inner.reduce((previous, current, index) => {
+        if (!previous[current.path])
+            previous[current.path] = {};
+        previous[current.path][current.type] = error.errors[index];
+        return previous;
+    }, {});
+}
+async function validateWithSchema(ValidationSchema, data) {
+    try {
+        await ValidationSchema.validate(data, { abortEarly: false });
+        return undefined;
+    }
+    catch (e) {
+        return parseErrorSchema(e);
+    }
+}
+
+function useForm({ mode, validationSchema } = {
+    mode: 'onSubmit',
+}) {
     const fields = react.useRef({});
@@ -311,34 +331,48 @@ const localErrorMessages = react.useRef({});
     }
-    const handleSubmit = (callback) => e => {
+    const handleSubmit = (callback) => async (e) => {
         e.preventDefault();
         const allFields = fields.current;
-        const { localErrors, values } = Object.values(allFields).reduce((previous, data) => {
-            const { ref, ref: { name, type }, options, } = data;
-            removeReferenceAndEventListeners(data);
-            if (!fields.current[name])
+        let localErrors;
+        let values;
+        if (validationSchema) {
+            values = Object.values(allFields).map((ref) => getFieldValue(allFields, ref));
+            localErrors = await validateWithSchema(validationSchema, values);
+            if (localErrors === undefined) {
+                callback(values, e);
+                return;
+            }
+        }
+        else {
+            const result = Object.values(allFields).reduce((previous, data) => {
+                const { ref, ref: { name, type }, options, } = data;
+                removeReferenceAndEventListeners(data);
+                if (!fields.current[name])
+                    return previous;
+                const fieldError = validateField(data, allFields);
+                const hasError = fieldError && fieldError[name];
+                if (!hasError) {
+                    previous.values[name] = getFieldValue(allFields, ref);
+                    return previous;
+                }
+                if (isRadioInput(type) && Array.isArray(options)) {
+                    options.forEach(option => {
+                        if (option.eventAttached && option.eventAttached.includes('change'))
+                            return;
+                        option.ref.addEventListener('change', validateWithStateUpdate);
+                        option.eventAttached = [...option.eventAttached, 'change'];
+                    });
+                }
+                else if (fields.current[name].eventAttached && !fields.current[name].eventAttached.includes('input')) {
+                    ref.addEventListener('input', validateWithStateUpdate);
+                    data.eventAttached = [...(data.eventAttached || []), 'input'];
+                }
+                previous.localErrors = Object.assign({}, (previous.localErrors || []), fieldError);
                 return previous;
-            const fieldError = validateField(data, allFields);
-            const hasError = fieldError && fieldError[name];
-            if (!hasError) {
-                previous.values[name] = getFieldValue(allFields, ref);
-                return previous;
-            }
-            if (isRadioInput(type) && Array.isArray(options)) {
-                options.forEach(option => {
-                    if (option.eventAttached && option.eventAttached.includes('change'))
-                        return;
-                    option.ref.addEventListener('change', validateWithStateUpdate);
-                    option.eventAttached = [...option.eventAttached, 'change'];
-                });
-            }
-            else if (fields.current[name].eventAttached && !fields.current[name].eventAttached.includes('input')) {
-                ref.addEventListener('input', validateWithStateUpdate);
-                data.eventAttached = [...(data.eventAttached || []), 'input'];
-            }
-            previous.localErrors = Object.assign({}, (previous.localErrors || []), fieldError);
-            return previous;
-        }, {
-            localErrors: {},
-            values: {},
-        });
+            }, {
+                localErrors: {},
+                values: {},
+            });
+            localErrors = result.localErrors;
+            values = result.values;
+        }
         if (JSON.stringify(localErrorMessages.current) !== JSON.stringify(localErrors)) {
@@ -345,0 +379,0 @@ updateErrorMessage(localErrors);

package.json

 {
   "name": "react-hook-form",
-  "version": "0.3.0",
+  "version": "0.4.0-beta.1",
   "main": "dist/index.js",
@@ -50,3 +50,4 @@ "module": "dist/index.es.js",
     "typescript": "^3.3.3333",
-    "uglify-es": "^3.3.9"
+    "uglify-es": "^3.3.9",
+    "yup": "^0.27.0"
   },
@@ -53,0 +54,0 @@ "dependencies": {

README.md

@@ -30,17 +30,19 @@ <div align="center"><a href="https://react-hook-form.now.sh/"><img src="https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/website/logo.png" alt="React forme Logo - React hook form valiation" width="350px" /></a></div>
 ```jsx
-import React from 'react';
-import useForm from 'react-hook-form';
+import React from 'react'
+import useForm from 'react-hook-form'
 
 function App() {
-    const { register, handleSubmit, errors } = useForm();
-    const onSubmit = (data) => { console.log(data); }
-    console.log(errors);
+  const { register, handleSubmit, errors } = useForm()
+  const onSubmit = (data) => { console.log(data) }
+  console.log(errors)
     
-    return <form onSubmit={handleSubmit(onSubmit}>
-        <input name="firstname" ref={(ref) => register({ ref, required: true })} />
-        <input name="lastname" ref={(ref) => register({ ref, pattern: "[a-z]{1,15}" })} />
-        <input type="submit" />
+  return (
+    <form onSubmit={handleSubmit(onSubmit}>
+      <input name="firstname" ref={(ref) => register({ ref, required: true })} />
+      <input name="lastname" ref={(ref) => register({ ref, pattern: "[a-z]{1,15}" })} />
+      <input type="submit" />
     </form>
+  )
 }
 
 ```

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

40083

increased by6.83%

Number of package files

30

increased by11.11%

Lines of code

890

increased by8.67%

Number of lines in readme file

48

increased by4.35%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes