gform-react 2.6.3 → 2.7.2

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

@@ -1,8 +1,7 @@
 'use strict';
 
 var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-require('@babel/runtime/helpers/defineProperty');
+var React$1 = require('react');
 var reactNative = require('react-native');
 
 const isObject = o => o && typeof o === 'object' && !Array.isArray(o);
@@ -83,8 +82,8 @@ const _buildFormInitialValues = (rows = []) => {
 };
 const _findInputs = (root, total = []) => {
   if (!root) return total;
-  React.Children.forEach(root, child => {
-    if (!React.isValidElement(child)) return;
+  React$1.Children.forEach(root, child => {
+    if (!React$1.isValidElement(child)) return;
     if (child.props) {
       const {
         formKey,
@@ -109,8 +108,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':
@@ -128,6 +126,14 @@ const _checkTypeMismatch = input => {
       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 {
@@ -136,19 +142,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;
@@ -163,19 +165,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();
@@ -183,8 +181,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;
@@ -195,11 +192,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) => {
@@ -215,6 +212,29 @@ const _merge = (target = {}, ...nodes) => {
   }
   return _merge(target, ...nodes);
 };
+const _buildRNFormState = (fields, dispatchChanges) => {
+  const isFormValid = _checkIfFormIsValid(fields);
+  const formState = {
+    ...fields,
+    isValid: isFormValid,
+    isInvalid: !isFormValid,
+    toRawData: options => _toRawData(fields, options),
+    toURLSearchParams: _toURLSearchParams,
+    checkValidity: () => {
+      for (const i in fields) {
+        const valid = fields[i].checkValidity();
+        if (!valid) {
+          return false;
+        }
+      }
+      return true;
+    },
+    dispatchChanges: changes => dispatchChanges({
+      fields: _merge({}, fields, changes)
+    })
+  };
+  return formState;
+};
 
 let handlersMap;
 let validityMap;
@@ -245,10 +265,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);
@@ -292,7 +311,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`);
       }
     }
@@ -367,21 +386,26 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
   };
 };
 
-const GFormContext = React.createContext({});
+const GFormContext = React$1.createContext({});
 const GFormContextProvider = ({
   children,
   initialState,
   validators,
   optimized
 }) => {
-  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 stateRef = React$1.useRef(initialState);
+  const listeners = React$1.useRef(null);
+  const setState = React$1.useCallback(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);
-  const store = React.useMemo(() => {
+  const store = React$1.useMemo(() => {
     if (!listeners.current) {
       listeners.current = new Set();
     } else {
@@ -402,18 +426,18 @@ const GFormContextProvider = ({
       handlers
     };
   }, [initialState]);
-  return React.createElement(GFormContext.Provider, {
+  return React$1.createElement(GFormContext.Provider, {
     value: store
   }, children);
 };
 const useFormStore = () => {
-  const store = React.useContext(GFormContext);
+  const store = React$1.useContext(GFormContext);
   if (!store.getState) throw new Error('useGFormStore must be used within `GForm` component');
   return store;
 };
 const useFormSelector = selector => {
   const store = useFormStore();
-  return React.useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+  return React$1.useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
 };
 function createSelector(selectors, combiner) {
   let lastArgs = [];
@@ -429,21 +453,7 @@ 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(({
+const FormRenderer = React$1.forwardRef(({
   stateRef,
   children,
   onInit,
@@ -451,43 +461,21 @@ const FormRenderer = React.forwardRef(({
   ...rest
 }, ref) => {
   const {
-    getState,
-    handlers
+    handlers,
+    getState
   } = useFormStore();
-  const isFormInvalid = useFormSelector(selectFirstInvalidField);
-  const getFormState = React.useCallback(() => {
-    const fields = getState().fields;
-    const formState = {
-      ...fields,
-      isValid: !isFormInvalid,
-      isInvalid: isFormInvalid,
-      toRawData: options => _toRawData(fields, options),
-      toURLSearchParams: _toURLSearchParams,
-      checkValidity: () => {
-        for (const i in fields) {
-          const valid = fields[i].checkValidity();
-          if (!valid) {
-            return false;
-          }
-        }
-        return true;
-      },
-      dispatchChanges: changes => handlers._dispatchChanges({
-        fields: _merge({}, fields, changes)
-      })
-    };
-    if (stateRef) stateRef.current = formState;
-    return formState;
-  }, [isFormInvalid]);
-  const formComponent = React.useMemo(() => {
-    const state = getFormState();
+  const fields = useFormSelector(state => state.fields);
+  const formComponent = React$1.useMemo(() => {
+    const state = _buildRNFormState(fields, handlers._dispatchChanges);
+    if (stateRef) stateRef.current = state;
     const formChildren = typeof children === 'function' ? children(state) : children;
     return React.createElement(El, _extends({}, rest, {
       ref: ref
     }), formChildren);
-  }, [getFormState, children]);
-  React.useEffect(() => {
-    const state = getFormState();
+  }, [children, fields]);
+  React$1.useEffect(() => {
+    const initialStateFields = getState().fields;
+    const state = _buildRNFormState(initialStateFields, handlers._dispatchChanges);
     if (onInit) {
       const changes = onInit(state);
       if (changes) {
@@ -499,33 +487,21 @@ const FormRenderer = React.forwardRef(({
         } else _handler(changes);
       }
     }
-    const dispatchers = {};
     const fields = getState().fields;
     for (const fieldKey in fields) {
-      dispatchers[fieldKey] = {
-        dispatchChanges: changes => handlers._dispatchChanges(changes, fieldKey),
-        checkValidity: () => {
-          const result = handlers._createInputChecker(state[fieldKey]);
-          handlers._dispatchChanges(state[fieldKey], fieldKey);
-          return result;
-        }
-      };
       const field = fields[fieldKey];
       if (!field.value) continue;
       handlers._viHandler(field);
     }
-    handlers._dispatchChanges({
-      fields: _merge(dispatchers, state)
-    });
-  }, [getFormState]);
+  }, []);
   return formComponent;
 });
-const RNGForm = React.forwardRef(({
+const RNGForm = React$1.forwardRef(({
   children,
   validators,
   ...props
 }, ref) => {
-  const initialState = React.useMemo(() => {
+  const initialState = React$1.useMemo(() => {
     return _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
   }, [children]);
   return React.createElement(GFormContextProvider, {
@@ -536,7 +512,13 @@ const RNGForm = React.forwardRef(({
   }, props), children));
 });
 
-const _RNGInput = React.forwardRef(({
+const selectFields = [state => state.fields];
+const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
+  const selected = keys.map(key => JSON.stringify(fields[key].value)).join(', ');
+  return selected.length ? selected : null;
+});
+
+const _RNGInput = React$1.forwardRef(({
   formKey,
   element,
   type,
@@ -550,7 +532,7 @@ const _RNGInput = React.forwardRef(({
 }, ref) => {
   const inputState = useFormSelector(state => state.fields[formKey]);
   const store = useFormStore();
-  const _element = React.useMemo(() => {
+  const _element = React$1.useMemo(() => {
     const value = inputState.value || '';
     const _props = {
       ...rest,
@@ -592,8 +574,7 @@ const _RNGInput = React.forwardRef(({
     return React.createElement(reactNative.TextInput, _props);
   }, [inputState, element]);
   const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
-  const stableFetchDeps = React.useMemo(() => JSON.stringify(_fetchDeps), [_fetchDeps]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (fetch) {
       _debounce(debounce, `${inputState.gid}-fetch`).then(() => {
         const res = fetch(inputState, store.getState().fields);
@@ -604,10 +585,10 @@ const _RNGInput = React.forwardRef(({
         }
       });
     }
-  }, [stableFetchDeps]);
+  }, [_fetchDeps]);
   return _element;
 });
-const RNGInput = React.memo(_RNGInput);
+const RNGInput = React$1.memo(_RNGInput);
 
 exports.RNGForm = RNGForm;
 exports.RNGInput = RNGInput;