@mantine/form - npm Package Compare versions

Comparing version 5.0.0-alpha.8 to 5.0.0-alpha.9

cjs/use-form.js

@@ -7,3 +7,5 @@ 'use strict';
 var filterErrors = require('./filter-errors/filter-errors.js');
+var shouldValidateOnChange = require('./validate/should-validate-on-change.js');
 var setPath = require('./paths/set-path.js');
+var validateFieldValue = require('./validate/validate-field-value.js');
 var reorderPath = require('./paths/reorder-path.js');
@@ -13,3 +15,2 @@ var removePath = require('./paths/remove-path.js');
 var validateValues = require('./validate/validate-values.js');
-var validateFieldValue = require('./validate/validate-field-value.js');
 var getPath = require('./paths/get-path.js');
@@ -41,2 +42,3 @@ var getInputOnChange = require('./get-input-on-change/get-input-on-change.js');
   clearInputErrorOnChange = true,
+  validateInputOnChange = false,
   validate: rules
@@ -53,5 +55,21 @@ } = {}) {
   const setFieldError = react.useCallback((path, error) => setErrors((current) => __spreadProps(__spreadValues({}, current), { [path]: error })), []);
+  const clearFieldError = react.useCallback((path) => setErrors((current) => {
+    if (typeof path !== "string") {
+      return current;
+    }
+    const clone = __spreadValues({}, current);
+    delete clone[path];
+    return clone;
+  }), []);
   const setFieldValue = react.useCallback((path, value) => {
-    _setValues((current) => setPath.setPath(path, value, current));
-    clearInputErrorOnChange && setFieldError(path, null);
+    const shouldValidate = shouldValidateOnChange.shouldValidateOnChange(path, validateInputOnChange);
+    _setValues((current) => {
+      const result = setPath.setPath(path, value, current);
+      if (shouldValidate) {
+        const validationResults = validateFieldValue.validateFieldValue(path, rules, result);
+        validationResults.hasError ? setFieldError(path, validationResults.error) : clearFieldError(path);
+      }
+      return result;
+    });
+    !shouldValidate && clearInputErrorOnChange && setFieldError(path, null);
   }, []);
@@ -65,10 +83,2 @@ const setValues = react.useCallback((payload) => {
   const insertListItem = react.useCallback((path, item, index) => _setValues((current) => insertPath.insertPath(path, item, index, current)), []);
-  const clearFieldError = react.useCallback((path) => setErrors((current) => {
-    if (typeof path !== "string") {
-      return current;
-    }
-    const clone = __spreadValues({}, current);
-    delete clone[path];
-    return clone;
-  }), []);
   const validate = react.useCallback(() => {
@@ -94,6 +104,10 @@ const results = validateValues.validateValues(rules, values);
   };
-  const onSubmit = (handleSubmit) => (event) => {
+  const onSubmit = (handleSubmit, handleValidationFailure) => (event) => {
     event.preventDefault();
     const results = validate();
-    !results.hasErrors && handleSubmit(values, event);
+    if (results.hasErrors) {
+      handleValidationFailure == null ? void 0 : handleValidationFailure(results.errors, values, event);
+    } else {
+      handleSubmit(values, event);
+    }
   };
@@ -100,0 +114,0 @@ const onReset = react.useCallback((event) => {

esm/use-form.js

 import { useState, useCallback } from 'react';
 import { filterErrors } from './filter-errors/filter-errors.js';
+import { shouldValidateOnChange } from './validate/should-validate-on-change.js';
 import { setPath } from './paths/set-path.js';
+import { validateFieldValue } from './validate/validate-field-value.js';
 import { reorderPath } from './paths/reorder-path.js';
@@ -8,3 +10,2 @@ import { removePath } from './paths/remove-path.js';
 import { validateValues } from './validate/validate-values.js';
-import { validateFieldValue } from './validate/validate-field-value.js';
 import { getPath } from './paths/get-path.js';
@@ -36,2 +37,3 @@ import { getInputOnChange } from './get-input-on-change/get-input-on-change.js';
   clearInputErrorOnChange = true,
+  validateInputOnChange = false,
   validate: rules
@@ -48,5 +50,21 @@ } = {}) {
   const setFieldError = useCallback((path, error) => setErrors((current) => __spreadProps(__spreadValues({}, current), { [path]: error })), []);
+  const clearFieldError = useCallback((path) => setErrors((current) => {
+    if (typeof path !== "string") {
+      return current;
+    }
+    const clone = __spreadValues({}, current);
+    delete clone[path];
+    return clone;
+  }), []);
   const setFieldValue = useCallback((path, value) => {
-    _setValues((current) => setPath(path, value, current));
-    clearInputErrorOnChange && setFieldError(path, null);
+    const shouldValidate = shouldValidateOnChange(path, validateInputOnChange);
+    _setValues((current) => {
+      const result = setPath(path, value, current);
+      if (shouldValidate) {
+        const validationResults = validateFieldValue(path, rules, result);
+        validationResults.hasError ? setFieldError(path, validationResults.error) : clearFieldError(path);
+      }
+      return result;
+    });
+    !shouldValidate && clearInputErrorOnChange && setFieldError(path, null);
   }, []);
@@ -60,10 +78,2 @@ const setValues = useCallback((payload) => {
   const insertListItem = useCallback((path, item, index) => _setValues((current) => insertPath(path, item, index, current)), []);
-  const clearFieldError = useCallback((path) => setErrors((current) => {
-    if (typeof path !== "string") {
-      return current;
-    }
-    const clone = __spreadValues({}, current);
-    delete clone[path];
-    return clone;
-  }), []);
   const validate = useCallback(() => {
@@ -89,6 +99,10 @@ const results = validateValues(rules, values);
   };
-  const onSubmit = (handleSubmit) => (event) => {
+  const onSubmit = (handleSubmit, handleValidationFailure) => (event) => {
     event.preventDefault();
     const results = validate();
-    !results.hasErrors && handleSubmit(values, event);
+    if (results.hasErrors) {
+      handleValidationFailure == null ? void 0 : handleValidationFailure(results.errors, values, event);
+    } else {
+      handleSubmit(values, event);
+    }
   };
@@ -95,0 +109,0 @@ const onReset = useCallback((event) => {

lib/types.d.ts

@@ -28,3 +28,3 @@ /// <reference types="react" />
 export declare type SetErrors = React.Dispatch<React.SetStateAction<FormErrors>>;
-export declare type OnSubmit<Values> = (handleSubmit: (values: Values, event: React.FormEvent<HTMLFormElement>) => void) => (event: React.FormEvent<HTMLFormElement>) => void;
+export declare type OnSubmit<Values> = (handleSubmit: (values: Values, event: React.FormEvent<HTMLFormElement>) => void, handleValidationFailure?: (errors: FormErrors, values: Values, event: React.FormEvent<HTMLFormElement>) => void) => (event: React.FormEvent<HTMLFormElement>) => void;
 export declare type OnReset = (event: React.FormEvent<HTMLFormElement>) => void;
@@ -50,2 +50,3 @@ export declare type GetInputProps<Values> = <Field extends LooseKeys<Values>>(path: Field, options?: {
     clearInputErrorOnChange?: boolean;
+    validateInputOnChange?: boolean | LooseKeys<Values>[];
 }
@@ -52,0 +53,0 @@ export interface UseFormReturnType<Values extends ValuesPlaceholder> {

lib/use-form.d.ts

 import { ValuesPlaceholder, UseFormReturnType, UseFormInput } from './types';
-export declare function useForm<Values extends ValuesPlaceholder>({ initialValues, initialErrors, clearInputErrorOnChange, validate: rules, }?: UseFormInput<Values>): UseFormReturnType<Values>;
+export declare function useForm<Values extends ValuesPlaceholder>({ initialValues, initialErrors, clearInputErrorOnChange, validateInputOnChange, validate: rules, }?: UseFormInput<Values>): UseFormReturnType<Values>;
 //# sourceMappingURL=use-form.d.ts.map

lib/validate/index.d.ts

 export { validateValues } from './validate-values';
 export { validateFieldValue } from './validate-field-value';
+export { shouldValidateOnChange } from './should-validate-on-change';
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@mantine/form",
   "description": "Mantine form management library",
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.9",
   "main": "cjs/index.js",
@@ -6,0 +6,0 @@ "module": "esm/index.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

121465

increased by6.32%

Number of package files

132

increased by4.76%

Lines of code

1046

increased by6.3%

No dependency changes