react-hook-form - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-beta.1

dist/index.d.ts

@@ -1,26 +0,37 @@
-declare type Validate = (data: string | number) => boolean;
-declare type NumberOrDate = number | Date;
+declare type Validate = (data: string | number) => boolean | string | number | Date;
+declare type NumberOrString = number | string;
 export interface RegisterInput {
     ref: HTMLInputElement | HTMLSelectElement | null;
-    required?: boolean;
-    min?: NumberOrDate;
-    max?: NumberOrDate;
-    maxLength?: number;
-    pattern?: RegExp;
+    required?: boolean | string;
+    min?: NumberOrString | {
+        value: NumberOrString;
+        message: string;
+    };
+    max?: NumberOrString | {
+        value: NumberOrString;
+        message: string;
+    };
+    maxLength?: number | {
+        value: number;
+        message: string;
+    };
+    minLength?: number | {
+        value: number;
+        message: string;
+    };
+    pattern?: RegExp | {
+        value: RegExp;
+        message: string;
+    };
     validate?: Validate | {
         [key: string]: Validate;
+    } | {
+        value: Validate | {
+            [key: string]: Validate;
+        };
+        message: string;
     };
-    minLength?: number;
 }
-export interface Field {
+export interface Field extends RegisterInput {
     ref: any;
-    required?: boolean;
-    min?: NumberOrDate;
-    max?: NumberOrDate;
-    maxLength?: number;
-    pattern?: RegExp;
-    validate?: Validate | {
-        [key: string]: Validate;
-    };
-    minLength?: number;
     eventAttached?: Array<string>;
@@ -37,3 +48,3 @@ watch?: boolean;
     [key: string]: {
-        string: boolean;
+        string: boolean | string;
     } | {};
@@ -40,0 +51,0 @@ }

dist/index.es.js

@@ -64,2 +64,9 @@ import { useRef, useState, useEffect } from 'react';
 
+function getValueAndMessage(item) {
+    return {
+        value: typeof item === 'object' && item.value ? item.value : item,
+        message: typeof item === 'object' && item.message ? item.message : true,
+    };
+}
+
 var validateField = ({ ref: { type, value, name, checked }, options, required, maxLength, minLength, min, max, pattern, validate }, fields) => {
@@ -72,3 +79,3 @@ const copy = {};
         copy[name] = {
-            required: true,
+            required: required,
         };
@@ -83,23 +90,32 @@ }
         const valueNumber = parseFloat(value);
+        const { value: maxValue, message: maxMessage } = getValueAndMessage(max);
+        const { value: minValue, message: minMessage } = getValueAndMessage(min);
         if (type === 'number') {
-            exceedMax = max && valueNumber > max;
-            exceedMin = min && valueNumber < min;
+            exceedMax = maxValue && valueNumber > maxValue;
+            exceedMin = minValue && valueNumber < minValue;
         }
         else if (DATE_INPUTS.includes(type)) {
-            exceedMax = max && new Date(value) > new Date(max);
-            exceedMin = min && new Date(value) < new Date(min);
+            if (typeof maxValue === 'string')
+                exceedMax = maxValue && new Date(value) > new Date(maxValue);
+            if (typeof minValue === 'string')
+                exceedMin = minValue && new Date(value) < new Date(minValue);
         }
         if (exceedMax || exceedMin) {
-            copy[name] = Object.assign({}, copy[name], (exceedMax ? { max: true } : null), (exceedMin ? { min: true } : null));
+            copy[name] = Object.assign({}, copy[name], (exceedMax ? { max: maxMessage } : null), (exceedMin ? { min: minMessage } : null));
         }
     }
     if ((maxLength || minLength) && STRING_INPUTS.includes(type)) {
-        const exceedMax = maxLength && value.toString().length > maxLength;
-        const exceedMin = minLength && value.toString().length < minLength;
+        const { value: maxLengthValue, message: maxLengthMessage } = getValueAndMessage(maxLength);
+        const { value: minLengthValue, message: minLengthMessage } = getValueAndMessage(minLength);
+        const exceedMax = maxLength && value.toString().length > maxLengthValue;
+        const exceedMin = minLength && value.toString().length < minLengthValue;
         if (exceedMax || exceedMin) {
-            copy[name] = Object.assign({}, copy[name], (exceedMax ? { maxLength: true } : null), (exceedMin ? { minLength: true } : null));
+            copy[name] = Object.assign({}, copy[name], (exceedMax ? { maxLength: maxLengthMessage } : null), (exceedMin ? { minLength: minLengthMessage } : null));
         }
     }
-    if (pattern && pattern instanceof RegExp && !pattern.test(value)) {
-        copy[name] = Object.assign({}, copy[name], { pattern: true });
+    if (pattern) {
+        const { value: patternValue, message: patternMessage } = getValueAndMessage(pattern);
+        if (patternValue instanceof RegExp && !patternValue.test(value)) {
+            copy[name] = Object.assign({}, copy[name], { pattern: patternMessage });
+        }
     }
@@ -109,4 +125,5 @@ if (validate) {
         if (typeof validate === 'function') {
-            if (!validate(fieldValue)) {
-                copy[name] = Object.assign({}, copy[name], { validate: true });
+            const result = validate(fieldValue);
+            if (typeof result !== 'boolean' || !result) {
+                copy[name] = Object.assign({}, copy[name], { validate: result || true });
             }
@@ -116,4 +133,5 @@ }
             const result = Object.entries(validate).reduce((previous, [key, validate]) => {
-                if (typeof validate === 'function' && !validate(fieldValue)) {
-                    previous[key] = true;
+                const result = typeof validate === 'function' && validate(fieldValue);
+                if (typeof result !== 'boolean' || !result) {
+                    previous[key] = result || true;
                 }
@@ -319,5 +337,5 @@ return previous;
                 ref.addEventListener('input', validateWithStateUpdate);
-                data.eventAttached = [...data.eventAttached || [], 'input'];
+                data.eventAttached = [...(data.eventAttached || []), 'input'];
             }
-            previous.localErrors = Object.assign({}, previous.localErrors || [], fieldError);
+            previous.localErrors = Object.assign({}, (previous.localErrors || []), fieldError);
             return previous;
@@ -324,0 +342,0 @@ }, {

dist/index.js

@@ -66,2 +66,9 @@ 'use strict';
 
+function getValueAndMessage(item) {
+    return {
+        value: typeof item === 'object' && item.value ? item.value : item,
+        message: typeof item === 'object' && item.message ? item.message : true,
+    };
+}
+
 var validateField = ({ ref: { type, value, name, checked }, options, required, maxLength, minLength, min, max, pattern, validate }, fields) => {
@@ -74,3 +81,3 @@ const copy = {};
         copy[name] = {
-            required: true,
+            required: required,
         };
@@ -85,23 +92,32 @@ }
         const valueNumber = parseFloat(value);
+        const { value: maxValue, message: maxMessage } = getValueAndMessage(max);
+        const { value: minValue, message: minMessage } = getValueAndMessage(min);
         if (type === 'number') {
-            exceedMax = max && valueNumber > max;
-            exceedMin = min && valueNumber < min;
+            exceedMax = maxValue && valueNumber > maxValue;
+            exceedMin = minValue && valueNumber < minValue;
         }
         else if (DATE_INPUTS.includes(type)) {
-            exceedMax = max && new Date(value) > new Date(max);
-            exceedMin = min && new Date(value) < new Date(min);
+            if (typeof maxValue === 'string')
+                exceedMax = maxValue && new Date(value) > new Date(maxValue);
+            if (typeof minValue === 'string')
+                exceedMin = minValue && new Date(value) < new Date(minValue);
         }
         if (exceedMax || exceedMin) {
-            copy[name] = Object.assign({}, copy[name], (exceedMax ? { max: true } : null), (exceedMin ? { min: true } : null));
+            copy[name] = Object.assign({}, copy[name], (exceedMax ? { max: maxMessage } : null), (exceedMin ? { min: minMessage } : null));
         }
     }
     if ((maxLength || minLength) && STRING_INPUTS.includes(type)) {
-        const exceedMax = maxLength && value.toString().length > maxLength;
-        const exceedMin = minLength && value.toString().length < minLength;
+        const { value: maxLengthValue, message: maxLengthMessage } = getValueAndMessage(maxLength);
+        const { value: minLengthValue, message: minLengthMessage } = getValueAndMessage(minLength);
+        const exceedMax = maxLength && value.toString().length > maxLengthValue;
+        const exceedMin = minLength && value.toString().length < minLengthValue;
         if (exceedMax || exceedMin) {
-            copy[name] = Object.assign({}, copy[name], (exceedMax ? { maxLength: true } : null), (exceedMin ? { minLength: true } : null));
+            copy[name] = Object.assign({}, copy[name], (exceedMax ? { maxLength: maxLengthMessage } : null), (exceedMin ? { minLength: minLengthMessage } : null));
         }
     }
-    if (pattern && pattern instanceof RegExp && !pattern.test(value)) {
-        copy[name] = Object.assign({}, copy[name], { pattern: true });
+    if (pattern) {
+        const { value: patternValue, message: patternMessage } = getValueAndMessage(pattern);
+        if (patternValue instanceof RegExp && !patternValue.test(value)) {
+            copy[name] = Object.assign({}, copy[name], { pattern: patternMessage });
+        }
     }
@@ -111,4 +127,5 @@ if (validate) {
         if (typeof validate === 'function') {
-            if (!validate(fieldValue)) {
-                copy[name] = Object.assign({}, copy[name], { validate: true });
+            const result = validate(fieldValue);
+            if (typeof result !== 'boolean' || !result) {
+                copy[name] = Object.assign({}, copy[name], { validate: result || true });
             }
@@ -118,4 +135,5 @@ }
             const result = Object.entries(validate).reduce((previous, [key, validate]) => {
-                if (typeof validate === 'function' && !validate(fieldValue)) {
-                    previous[key] = true;
+                const result = typeof validate === 'function' && validate(fieldValue);
+                if (typeof result !== 'boolean' || !result) {
+                    previous[key] = result || true;
                 }
@@ -321,5 +339,5 @@ return previous;
                 ref.addEventListener('input', validateWithStateUpdate);
-                data.eventAttached = [...data.eventAttached || [], 'input'];
+                data.eventAttached = [...(data.eventAttached || []), 'input'];
             }
-            previous.localErrors = Object.assign({}, previous.localErrors || [], fieldError);
+            previous.localErrors = Object.assign({}, (previous.localErrors || []), fieldError);
             return previous;
@@ -326,0 +344,0 @@ }, {

package.json

 {
   "name": "react-hook-form",
-  "version": "0.2.0",
+  "version": "0.3.0-beta.1",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.es.js",

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

37546

increased by7.41%

Number of package files

27

increased by3.85%

Lines of code

819

increased by6.36%

No dependency changes