gform-react 2.6.3 → 2.7.0

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

@@ -233,6 +233,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;
@@ -352,10 +386,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);
@@ -484,7 +517,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 +587,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 +610,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 +623,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 +640,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 +665,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 +693,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 +769,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 +780,7 @@ const _GInput = React.forwardRef(({
         }
       });
     }
-  }, [stableFetchDeps]);
+  }, [_fetchDeps]);
   return _element;
 });
 const GInput = React.memo(_GInput);