gform-react 2.5.0 → 2.5.3

package/dist/cjs/gform-react.development.js

@@ -28,7 +28,7 @@ const _buildFormInitialValues = (rows = []) => {
     const inputConfigs = _findInputs(row);
     inputConfigs.forEach(config => {
       if (fields[config.formKey]) {
-        console.warn(`[Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);
+        console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);
       }
       const {
         required = false,
@@ -89,8 +89,9 @@ const _findInputs = (root, total = []) => {
   }
   return _findInputs((_root$props2 = root.props) === null || _root$props2 === void 0 ? void 0 : _root$props2.children, total);
 };
-const _findValidityKey = validity => {
+const _findValidityKey = (validity, exclude = []) => {
   for (const key in validity) {
+    if (exclude.includes(key)) continue;
     if (key !== 'valid' && validity[key]) {
       return key;
     }
@@ -123,6 +124,14 @@ const hasSubmitter = form => {
   }
   return false;
 };
+const _checkIfFormIsValid = fields => {
+  for (const f in fields) {
+    if (fields[f].error) {
+      return false;
+    }
+  }
+  return true;
+};
 const _toRawData = (fields, options = {}) => {
   const data = {};
   const {
@@ -225,7 +234,8 @@ let validityMap;
     pattern: 'withPatternMismatchMessage',
     min: 'withRangeUnderflowMessage',
     max: 'withRangeOverflowMessage',
-    step: 'withStepMismatchMessage'
+    step: 'withStepMismatchMessage',
+    type: 'withTypeMismatchMessage'
   };
   validityMap = {
     tooShort: 'minLength',
@@ -234,7 +244,8 @@ let validityMap;
     patternMismatch: 'pattern',
     rangeOverflow: 'max',
     rangeUnderflow: 'min',
-    stepMismatch: 'step'
+    stepMismatch: 'step',
+    typeMismatch: 'type'
   };
 }
 class GValidator {
@@ -265,6 +276,10 @@ class GValidator {
       }
     }
   }
+  hasConstraint(constraint) {
+    var _this$track;
+    return ((_this$track = this.track) === null || _this$track === void 0 ? void 0 : _this$track.includes(constraint)) || false;
+  }
   withRequiredMessage(message) {
     return this.__addConstraintValidationHandler('valueMissing', message);
   }
@@ -303,14 +318,14 @@ class GValidator {
   __addConstraintValidationHandler(validityKey, message) {
     if (this.track) {
       if (this.track.includes(validityKey)) {
-        console.warn(`[Duplicate Handlers] - handler for '${validityKey}' has already been defined`);
+        console.warn(`DEV ONLY - [Duplicate Handlers] - handler for '${validityKey}' has already been defined`);
       }
       this.track.push(validityKey);
     }
     this._constraintHandlers.push((input, key) => {
       {
         if (validityKey && validityMap[validityKey] && typeof input[validityMap[validityKey]] === 'undefined') {
-          console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${validityKey}' but the input hasn't described the constraint '${validityMap[validityKey]}'.\nadd '${validityMap[validityKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[validityKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[validityKey]]}(...)' validation`);
+          console.warn(`DEV ONLY - [Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${validityKey}' but the input hasn't described the constraint '${validityMap[validityKey]}'.\nadd '${validityMap[validityKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[validityKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[validityKey]]}(...)' validation`);
         }
       }
       if (key === validityKey) {
@@ -327,15 +342,18 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
   const _viHandler = (input, e) => {
     if (!input) return;
     const element = e && e.target;
+    const hasInitialValue = !input.dirty && input.value && !input.touched;
+    if (!element && !hasInitialValue) return;
     if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
       if (!input.checkValidity) input.checkValidity = () => element.checkValidity();
-      if (!input.dirty && input.value && !input.touched) {
+      if (hasInitialValue) {
         _checkInputManually(input);
         _dispatchChanges(input, input.formKey);
         return;
       }
       element.setCustomValidity('');
-      const validityKey = _findValidityKey(element.validity);
+      const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
+      const validityKey = _findValidityKey(element.validity, exclude);
       _validateInput(input, validityKey, v => element.setCustomValidity(v));
       if (!validityKey && input.error) {
         element.setCustomValidity(input.errorText || 'error');
@@ -348,6 +366,7 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
     }
   };
   const _checkInputManually = input => {
+    const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
     let validityKey = _findValidityKey({
       valueMissing: input.required && !input.value || false,
       typeMismatch: _checkTypeMismatch(input),
@@ -356,7 +375,7 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
       patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,
       rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,
       rangeOverflow: input.max && Number(input.value) > Number(input.max) || false
-    });
+    }, exclude);
     if (!validityKey && input.error) {
       validityKey = 'customError';
     }
@@ -369,6 +388,11 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
   };
   const _validateInput = (input, validityKey, setValidity) => {
     const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
+    {
+      if (validityKey && !(inputValidator !== null && inputValidator !== void 0 && inputValidator.hasConstraint(validityKey))) {
+        if (validityKey === 'typeMismatch') console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator / custom validation / pattern validator are missing.\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing.\nadd '${handlersMap[validityMap[validityKey]]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);
+      }
+    }
     if (inputValidator) {
       __validateInput(input, inputValidator, validityKey, setValidity);
     }
@@ -427,6 +451,10 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
       });
     }
   };
+  const hasCustomValidation = input => {
+    const validator = validators[input.validatorKey || input.formKey] || validators['*'];
+    return validator && (validator.asyncHandlers.length > 0 || validator.handlers.length > 0);
+  };
   return {
     _updateInputHandler,
     _viHandler,
@@ -493,20 +521,6 @@ function createSelector(selectors, combiner) {
   };
 }
 
-const selectFields = [state => state.fields];
-const selectFirstInvalidField = createSelector(selectFields, fields => {
-  for (const f in fields) {
-    if (fields[f].error) {
-      return true;
-    }
-  }
-  return false;
-});
-const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
-  const selected = keys.map(key => fields[key]).filter(Boolean);
-  return selected.length ? selected : null;
-});
-
 const FormRenderer = React.forwardRef(({
   stateRef,
   onSubmit,
@@ -523,7 +537,7 @@ const FormRenderer = React.forwardRef(({
     getState,
     handlers
   } = useFormStore();
-  const isFormInvalid = useFormSelector(selectFirstInvalidField);
+  const fields = useFormSelector(state => state.fields);
   const refHandler = React.useCallback(element => {
     if (ref) {
       if (typeof ref === 'function') {
@@ -535,7 +549,7 @@ const FormRenderer = React.forwardRef(({
     formRef.current = element;
   }, [ref]);
   const getFormState = React.useCallback(() => {
-    const fields = getState().fields;
+    const isFormInvalid = _checkIfFormIsValid(fields);
     const formState = {
       ...fields,
       isValid: !isFormInvalid,
@@ -554,7 +568,7 @@ const FormRenderer = React.forwardRef(({
     };
     if (stateRef) stateRef.current = formState;
     return formState;
-  }, [isFormInvalid]);
+  }, [fields]);
   const formComponent = React.useMemo(() => {
     const state = getFormState();
     const formChildren = typeof children === 'function' ? children(state) : children;
@@ -614,7 +628,7 @@ const FormRenderer = React.forwardRef(({
   React.useEffect(() => {
     const state = getFormState();
     if (!hasSubmitter(formRef.current)) {
-      console.warn(`[No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
+      console.warn(`DEV ONLY - [No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
     }
     if (onInit) {
       const changes = onInit(state);
@@ -655,6 +669,12 @@ const GForm = React.forwardRef(({
   }, props), children));
 });
 
+const selectFields = [state => state.fields];
+const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
+  const selected = keys.map(key => fields[key]).filter(Boolean);
+  return selected.length ? selected : null;
+});
+
 const _GInput = React.forwardRef(({
   formKey,
   element,
@@ -708,6 +728,18 @@ const _GInput = React.forwardRef(({
       } : (e, unknown) => {
         store.handlers._updateInputHandler(inputState, e, unknown);
       };
+      if (!inputState.touched) {
+        _props.onFocus = rest.onFocus ? e => {
+          rest.onFocus(e);
+          inputState.dispatchChanges({
+            touched: true
+          });
+        } : () => {
+          inputState.dispatchChanges({
+            touched: true
+          });
+        };
+      }
     }
     if (element) {
       return element(inputState, _props);