gform-react 2.6.3 → 2.7.2

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

@@ -2,7 +2,6 @@
 
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 
 const isObject = o => o && typeof o === 'object' && !Array.isArray(o);
 const defaultFieldProps = {
@@ -108,8 +107,7 @@ const _findValidityKey = (validity, exclude = []) => {
   }
 };
 const _checkTypeMismatch = input => {
-  var _input$value;
-  const value = (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.toString().trim();
+  const value = input.value?.toString().trim();
   if (!value) return false;
   switch (input.type) {
     case 'email':
@@ -150,19 +148,15 @@ const _toRawData = (fields, options = {}) => {
     transform
   } = options;
   if (include) {
-    include.forEach(key => {
-      var _fields$key;
-      return data[key] = (_fields$key = fields[key]) === null || _fields$key === void 0 ? void 0 : _fields$key.value;
-    });
+    include.forEach(key => data[key] = fields[key]?.value);
   } else for (const f in fields) {
     data[f] = fields[f].value;
   }
-  exclude === null || exclude === void 0 || exclude.forEach(key => delete data[key]);
+  exclude?.forEach(key => delete data[key]);
   if (transform) {
     for (const key in transform) {
-      var _fields$key2;
       const set = transform[key];
-      data[key] = set(((_fields$key2 = fields[key]) === null || _fields$key2 === void 0 ? void 0 : _fields$key2.value) || fields[key]);
+      data[key] = set(fields[key]?.value || fields[key]);
     }
   }
   return data;
@@ -181,19 +175,15 @@ function _toURLSearchParams(options) {
     } = options;
     if (include) {
       data = {};
-      include.forEach(key => {
-        var _this$key;
-        return data[key] = (_this$key = this[key]) === null || _this$key === void 0 ? void 0 : _this$key.value;
-      });
+      include.forEach(key => data[key] = this[key]?.value);
     } else {
       data = this.toRawData();
-      exclude === null || exclude === void 0 || exclude.forEach(key => delete data[key]);
+      exclude?.forEach(key => delete data[key]);
     }
     if (transform) {
       for (const key in transform) {
-        var _this$key2;
         const set = transform[key];
-        data[key] = set((_this$key2 = this[key]) === null || _this$key2 === void 0 ? void 0 : _this$key2.value);
+        data[key] = set(this[key]?.value);
       }
     }
   } else data = this.toRawData();
@@ -201,8 +191,7 @@ function _toURLSearchParams(options) {
 }
 function __debounce(timeout, id) {
   return new Promise(resolve => {
-    var _this$id;
-    if ((_this$id = this[id]) !== null && _this$id !== void 0 && _this$id.timerId) clearTimeout(this[id].timerId);
+    if (this[id]?.timerId) clearTimeout(this[id].timerId);
     const timerId = setTimeout(() => resolve(), timeout);
     if (this[id]) {
       this[id].timerId = timerId;
@@ -213,11 +202,11 @@ function __debounce(timeout, id) {
 }
 const _debounce = __debounce.bind({});
 const _extractValue = (e, unknown) => {
-  if (e !== null && e !== void 0 && e.target) {
+  if (e?.target) {
     if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type]];
     return e.target.value;
   }
-  return (e === null || e === void 0 ? void 0 : e.value) || (isObject(unknown) ? unknown.value : unknown);
+  return e?.value || (isObject(unknown) ? unknown.value : unknown);
 };
 const _checkResult = (handlerResult, value) => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !handlerResult.test(value) : false;
 const _merge = (target = {}, ...nodes) => {
@@ -233,6 +222,40 @@ const _merge = (target = {}, ...nodes) => {
   }
   return _merge(target, ...nodes);
 };
+const _mergeRefs = (refA, refB) => {
+  return value => {
+    if (typeof refA === 'function') {
+      refA(value);
+    } else if (refA) {
+      refA.current = value;
+    }
+    if (typeof refB === 'function') {
+      refB(value);
+    } else if (refB) {
+      refB.current = value;
+    }
+  };
+};
+const _buildFormState = (fields, formElement, dispatchChanges) => {
+  const isFormValid = _checkIfFormIsValid(fields);
+  const formState = {
+    ...fields,
+    isValid: isFormValid,
+    isInvalid: !isFormValid,
+    toRawData: options => _toRawData(fields, options),
+    toFormData: () => _toFormData(formElement),
+    toURLSearchParams: _toURLSearchParams,
+    checkValidity: function () {
+      this.isValid = formElement && formElement.checkValidity() || false;
+      this.isInvalid = !this.isValid;
+      return this.isValid;
+    },
+    dispatchChanges: changes => dispatchChanges({
+      fields: _merge({}, fields, changes)
+    })
+  };
+  return formState;
+};
 
 let handlersMap;
 let validityMap;
@@ -269,26 +292,21 @@ class GValidator {
     return this._asyncHandlers;
   }
   constructor(baseValidator) {
-    _defineProperty(this, "_handlers", void 0);
-    _defineProperty(this, "_constraintHandlers", void 0);
-    _defineProperty(this, "_asyncHandlers", void 0);
-    _defineProperty(this, "track", void 0);
-    const baseHandlers = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.handlers) || [];
-    const baseConstraintHandlers = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.constraintHandlers) || [];
-    const baseHandlersAsync = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.asyncHandlers) || [];
+    const baseHandlers = baseValidator?.handlers || [];
+    const baseConstraintHandlers = baseValidator?.constraintHandlers || [];
+    const baseHandlersAsync = baseValidator?.asyncHandlers || [];
     this._handlers = [].concat(baseHandlers);
     this._constraintHandlers = [].concat(baseConstraintHandlers);
     this._asyncHandlers = [].concat(baseHandlersAsync);
     {
       this.track = [];
-      if (baseValidator !== null && baseValidator !== void 0 && baseValidator.track) {
+      if (baseValidator?.track) {
         this.track = this.track.concat(baseValidator.track);
       }
     }
   }
   hasConstraint(constraint) {
-    var _this$track;
-    return ((_this$track = this.track) === null || _this$track === void 0 ? void 0 : _this$track.includes(constraint)) || false;
+    return this.track?.includes(constraint) || false;
   }
   withRequiredMessage(message) {
     return this.__addConstraintValidationHandler('valueMissing', message);
@@ -352,10 +370,9 @@ 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();
+      const hasInitialValue = !input.dirty && input.value && !input.touched;
       if (hasInitialValue) {
         _checkInputManually(input);
         _dispatchChanges(input, input.formKey);
@@ -399,7 +416,7 @@ 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 && !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 is 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`);
       }
     }
@@ -484,7 +501,12 @@ const GFormContextProvider = ({
   const stateRef = React.useRef(initialState);
   const listeners = React.useRef(null);
   const setState = React.useCallback(updater => {
-    stateRef.current = typeof updater === 'function' ? updater(stateRef.current) : updater;
+    const prevState = stateRef.current;
+    const nextState = typeof updater === "function" ? updater(prevState) : updater;
+    if (Object.is(prevState, nextState)) {
+      return;
+    }
+    stateRef.current = nextState;
     listeners.current.forEach(l => l());
   }, []);
   const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);
@@ -549,46 +571,15 @@ const FormRenderer = React.forwardRef(({
 }, ref) => {
   const formRef = React.useRef(null);
   const {
-    getState,
-    handlers
+    handlers,
+    getState
   } = useFormStore();
   const fields = useFormSelector(state => state.fields);
-  const refHandler = React.useCallback(element => {
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(element);
-      } else {
-        ref.current = element;
-      }
-    }
-    formRef.current = element;
-  }, [ref]);
-  const getFormState = React.useCallback(() => {
-    const isFormValid = _checkIfFormIsValid(fields);
-    const formState = {
-      ...fields,
-      isValid: isFormValid,
-      isInvalid: !isFormValid,
-      toRawData: options => _toRawData(fields, options),
-      toFormData: () => _toFormData(formRef.current),
-      toURLSearchParams: _toURLSearchParams,
-      checkValidity: function () {
-        this.isValid = formRef.current && formRef.current.checkValidity() || false;
-        this.isInvalid = !this.isValid;
-        return this.isValid;
-      },
-      dispatchChanges: changes => handlers._dispatchChanges({
-        fields: _merge({}, fields, changes)
-      })
-    };
-    if (stateRef) stateRef.current = formState;
-    return formState;
-  }, [fields]);
   const formComponent = React.useMemo(() => {
-    const state = getFormState();
+    const state = _buildFormState(fields, formRef.current, handlers._dispatchChanges);
     const formChildren = typeof children === 'function' ? children(state) : children;
     const _onSubmit = e => {
-      const state = getFormState();
+      const state = _buildFormState(fields, formRef.current, handlers._dispatchChanges);
       if (state.isValid && onSubmit) {
         onSubmit(state, e);
       }
@@ -603,6 +594,7 @@ const FormRenderer = React.forwardRef(({
     if (onKeyUp) {
       _onKeyUp = e => onKeyUp(state, e);
     }
+    if (stateRef) stateRef.current = state;
     if (handlers.optimized) {
       if (onChange) {
         _onChange = (e, unknown) => {
@@ -615,7 +607,7 @@ const FormRenderer = React.forwardRef(({
         };
       }
       return React.createElement("form", _extends({}, rest, {
-        ref: refHandler,
+        ref: _mergeRefs(ref, formRef),
         onPaste: _onPaste,
         onKeyDown: _onKeyDown,
         onKeyUp: _onKeyUp,
@@ -632,16 +624,17 @@ const FormRenderer = React.forwardRef(({
       _onChange = e => onChange(state, e);
     }
     return React.createElement("form", _extends({}, rest, {
-      ref: refHandler,
+      ref: _mergeRefs(ref, formRef),
       onSubmit: _onSubmit,
       onChange: _onChange,
       onPaste: _onPaste,
       onKeyDown: _onKeyDown,
       onKeyUp: _onKeyUp
     }), formChildren);
-  }, [children, getFormState]);
+  }, [children, fields]);
   React.useEffect(() => {
-    const state = getFormState();
+    const initialStateFields = getState().fields;
+    const state = _buildFormState(initialStateFields, formRef.current, handlers._dispatchChanges);
     if (!_hasSubmitter(formRef.current)) {
       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`);
     }
@@ -656,13 +649,12 @@ const FormRenderer = React.forwardRef(({
         } else _handler(changes);
       }
     }
-    const fields = getState().fields;
     for (const fieldKey in fields) {
       const field = fields[fieldKey];
       if (!field.value) continue;
       handlers._viHandler(field);
     }
-  }, [getFormState]);
+  }, []);
   return formComponent;
 });
 const GForm = React.forwardRef(({
@@ -685,7 +677,7 @@ const GForm = React.forwardRef(({
 
 const selectFields = [state => state.fields];
 const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
-  const selected = keys.map(key => fields[key]).filter(Boolean);
+  const selected = keys.map(key => JSON.stringify(fields[key].value)).join(', ');
   return selected.length ? selected : null;
 });
 
@@ -761,7 +753,6 @@ const _GInput = React.forwardRef(({
     return React.createElement("input", _props);
   }, [inputState, element]);
   const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
-  const stableFetchDeps = React.useMemo(() => JSON.stringify(_fetchDeps), [_fetchDeps]);
   React.useEffect(() => {
     if (fetch) {
       _debounce(debounce, `${inputState.gid}-fetch`).then(() => {
@@ -773,7 +764,7 @@ const _GInput = React.forwardRef(({
         }
       });
     }
-  }, [stableFetchDeps]);
+  }, [_fetchDeps]);
   return _element;
 });
 const GInput = React.memo(_GInput);