informed - npm Package Compare versions

Comparing version 4.55.1 to 4.56.0

dist/cjs/hooks/useForm.js

@@ -17,3 +17,3 @@ 'use strict';
 
-var _excluded = ["onSubmit", "onReset", "onChange", "onSubmitFailure", "onValueChange", "onValueSet", "onValid", "onInvalid", "onValueModified", "initialValues", "validateFields", "autocomplete", "showErrorIfError", "showErrorIfTouched", "showErrorIfDirty", "validateOn", "validateOnMount", "formApiRef", "dontPreventDefault", "yupSchema", "allowEmptyStrings", "disabled", "preventEnter", "validateModified", "schema", "ajv", "ajvErrors", "components", "errorMessage", "fieldMap", "adapter", "name", "keepState", "keepStateIfRelevant", "focusOnInvalid", "resetOnlyOnscreen"];
+var _excluded = ["onSubmit", "onReset", "onChange", "onSubmitFailure", "onValueChange", "onValueSet", "onValid", "onInvalid", "onValueModified", "initialValues", "validateFields", "autocomplete", "showErrorIfError", "showErrorIfTouched", "showErrorIfDirty", "validateOn", "validateOnMount", "formApiRef", "dontPreventDefault", "yupSchema", "allowEmptyStrings", "disabled", "preventEnter", "validateModified", "schema", "ajv", "ajvErrors", "components", "errorMessage", "fieldMap", "adapter", "name", "keepState", "keepStateIfRelevant", "focusOnInvalid", "scrollOnInvalid", "resetOnlyOnscreen"];
 var logger = debug.Debug('informed:useForm' + '\t');
@@ -56,2 +56,3 @@ var useForm = function useForm(_ref) {
     focusOnInvalid = _ref.focusOnInvalid,
+    scrollOnInvalid = _ref.scrollOnInvalid,
     resetOnlyOnscreen = _ref.resetOnlyOnscreen,
@@ -95,2 +96,3 @@ userProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
     focusOnInvalid: focusOnInvalid,
+    scrollOnInvalid: scrollOnInvalid,
     resetOnlyOnscreen: resetOnlyOnscreen
@@ -97,0 +99,0 @@ };

dist/esm/FormController.js

@@ -190,2 +190,3 @@ import { createClass as _createClass, objectSpread2 as _objectSpread2, classCallCheck as _classCallCheck } from './_virtual/_rollupPluginBabelHelpers.js';
     this.focusFirstError = this.focusFirstError.bind(this);
+    this.scrollToFirstError = this.scrollToFirstError.bind(this);
     this.setPristine = this.setPristine.bind(this);
@@ -1023,2 +1024,5 @@ this.disableForm = this.disableForm.bind(this);
           }
+          if (this.options.current.scrollOnInvalid) {
+            this.scrollToFirstError();
+          }
           this.emit('field', name);
@@ -1249,2 +1253,31 @@ this.emit('failure');
   }, {
+    key: "scrollToFirstError",
+    value: function scrollToFirstError() {
+      var _this4 = this;
+      if (this.options.current.scrollOnInvalid) {
+        // Itterate through and call validate on every field
+
+        Array.from(this.fieldsMap.values()).some(function (fieldMeta) {
+          // Get meta off field
+          var meta = fieldMeta.current;
+
+          // Get ref to input
+          var formFieldRef = meta.fieldRef;
+
+          // Get error for that field
+          var err = _this4.getError(meta.name);
+
+          // Only focus if we can
+          if (err && formFieldRef) {
+            if (typeof formFieldRef.current.scrollIntoView === 'function') {
+              debug('Scrolling to', meta.name);
+              formFieldRef.current.scrollIntoView(_this4.options.current.scrollOnInvalid);
+            }
+            return true;
+          }
+          return false;
+        });
+      }
+    }
+  }, {
     key: "resetField",
@@ -1420,3 +1453,3 @@ value: function resetField(name) {
     value: function validate() {
-      var _this4 = this;
+      var _this5 = this;
       debug('Validating all fields');
@@ -1452,3 +1485,3 @@ var values = this.state.values;
         var meta = fieldMeta.current;
-        var value = _this4.getValue(meta.name);
+        var value = _this5.getValue(meta.name);
         var error = meta.validate ? meta.validate(value, values) : undefined;
@@ -1472,3 +1505,3 @@ if (error != null) {
     value: function asyncValidate(done) {
-      var _this5 = this;
+      var _this6 = this;
       debug('Async Validating all fields');
@@ -1481,3 +1514,3 @@ this.done = done;
         // Get error to determine if we even want to validateAsync
-        if (_this5.getError(name) === undefined) _this5.validateAsync(name);
+        if (_this6.getError(name) === undefined) _this6.validateAsync(name);
       });
@@ -1596,3 +1629,3 @@ }
     value: function touchAllFields() {
-      var _this6 = this;
+      var _this7 = this;
       // Touch all the fields
@@ -1603,3 +1636,3 @@ // TODO maybe do this all at once !?
           debug("TouchAllFields - setting ".concat(meta.current.name, "'s touched to true"));
-          ObjectMap.set(_this6.state.touched, meta.current.name, true);
+          ObjectMap.set(_this7.state.touched, meta.current.name, true);
         }
@@ -1640,2 +1673,5 @@ });
         }
+        if (this.options.current.scrollOnInvalid) {
+          this.scrollToFirstError();
+        }
         this.emit('failure');
@@ -1642,0 +1678,0 @@ }

dist/esm/hooks/useForm.js

@@ -9,3 +9,3 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-var _excluded = ["onSubmit", "onReset", "onChange", "onSubmitFailure", "onValueChange", "onValueSet", "onValid", "onInvalid", "onValueModified", "initialValues", "validateFields", "autocomplete", "showErrorIfError", "showErrorIfTouched", "showErrorIfDirty", "validateOn", "validateOnMount", "formApiRef", "dontPreventDefault", "yupSchema", "allowEmptyStrings", "disabled", "preventEnter", "validateModified", "schema", "ajv", "ajvErrors", "components", "errorMessage", "fieldMap", "adapter", "name", "keepState", "keepStateIfRelevant", "focusOnInvalid", "resetOnlyOnscreen"];
+var _excluded = ["onSubmit", "onReset", "onChange", "onSubmitFailure", "onValueChange", "onValueSet", "onValid", "onInvalid", "onValueModified", "initialValues", "validateFields", "autocomplete", "showErrorIfError", "showErrorIfTouched", "showErrorIfDirty", "validateOn", "validateOnMount", "formApiRef", "dontPreventDefault", "yupSchema", "allowEmptyStrings", "disabled", "preventEnter", "validateModified", "schema", "ajv", "ajvErrors", "components", "errorMessage", "fieldMap", "adapter", "name", "keepState", "keepStateIfRelevant", "focusOnInvalid", "scrollOnInvalid", "resetOnlyOnscreen"];
 var logger = Debug('informed:useForm' + '\t');
@@ -48,2 +48,3 @@ var useForm = function useForm(_ref) {
     focusOnInvalid = _ref.focusOnInvalid,
+    scrollOnInvalid = _ref.scrollOnInvalid,
     resetOnlyOnscreen = _ref.resetOnlyOnscreen,
@@ -87,2 +88,3 @@ userProps = _objectWithoutProperties(_ref, _excluded);
     focusOnInvalid: focusOnInvalid,
+    scrollOnInvalid: scrollOnInvalid,
     resetOnlyOnscreen: resetOnlyOnscreen
@@ -89,0 +91,0 @@ };

index.d.ts

@@ -201,2 +201,5 @@ import React from 'react';
   errorMessage?: Record<string, unknown>;
+  focusOnInvalid?: boolean;
+  resetOnlyOnscreen?: boolean;
+  scrollOnInvalid?: ScrollIntoViewOptions;
 } & Omit<UserProps, 'onSubmit' | 'onReset' | 'onChange' | 'onSubmitFailure'>;
@@ -203,0 +206,0 @@

package.json

 {
   "name": "informed",
-  "version": "4.55.1",
+  "version": "4.56.0",
   "description": "A lightweight framework and utility for building powerful forms in React applications",
@@ -5,0 +5,0 @@ "type": "module",

No alert changes

Improved metrics

Total package byte prevSize

602840

increased by0.44%

Lines of code

15171

increased by0.47%

No dependency changes