gform-react 1.11.1 → 2.5.0

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

@@ -2,7 +2,6 @@
 
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var reactNative = require('react-native');
 
 const isObject = o => o && typeof o === 'object' && !Array.isArray(o);
@@ -25,7 +24,7 @@ const generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toStri
 const _buildFormInitialValues = (rows = []) => {
   const fields = {};
   if (!Array.isArray(rows)) rows = [rows];
-  rows.forEach(row => {
+  for (const row of rows) {
     const inputConfigs = _findInputs(row);
     inputConfigs.forEach(config => {
       if (fields[config.formKey]) {
@@ -71,12 +70,9 @@ const _buildFormInitialValues = (rows = []) => {
         if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];
       });
     });
-  });
+  }
   return {
-    state: {
-      fields,
-      loading: false
-    },
+    fields: fields,
     key: generateId()
   };
 };
@@ -100,13 +96,25 @@ const _findValidityKey = validity => {
     }
   }
 };
-const _checkIfFormIsValid = fields => {
-  for (const f in fields) {
-    if (fields[f].error) {
+const _checkTypeMismatch = input => {
+  var _input$value;
+  const value = (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.toString().trim();
+  if (!value) return false;
+  switch (input.type) {
+    case 'email':
+      return !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    case 'url':
+      try {
+        new URL(value);
+        return false;
+      } catch {
+        return true;
+      }
+    case 'tel':
+      return !/^\+?[0-9\s\-().]{7,}$/.test(value);
+    default:
       return false;
-    }
   }
-  return true;
 };
 const _toRawData = (fields, options = {}) => {
   const data = {};
@@ -128,7 +136,7 @@ const _toRawData = (fields, options = {}) => {
     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);
+      data[key] = set(((_fields$key2 = fields[key]) === null || _fields$key2 === void 0 ? void 0 : _fields$key2.value) || fields[key]);
     }
   }
   return data;
@@ -196,147 +204,13 @@ const _merge = (target = {}, ...nodes) => {
   return _merge(target, ...nodes);
 };
 
-let handlersMap;
-let validityMap;
-{
-  handlersMap = {
-    minLength: 'withMinLengthMessage',
-    maxLength: 'withMaxLengthMessage',
-    required: 'withRequiredMessage',
-    pattern: 'withPatternMismatchMessage',
-    min: 'withRangeUnderflowMessage',
-    max: 'withRangeOverflowMessage',
-    step: 'withStepMismatchMessage'
-  };
-  validityMap = {
-    tooShort: 'minLength',
-    valueMissing: 'required',
-    tooLong: 'maxLength',
-    patternMismatch: 'pattern',
-    rangeOverflow: 'max',
-    rangeUnderflow: 'min',
-    stepMismatch: 'step'
-  };
-}
-class GValidator {
-  get handlers() {
-    return this._handlers;
-  }
-  get constraintHandlers() {
-    return this._constraintHandlers;
-  }
-  get asyncHandlers() {
-    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) || [];
-    this._handlers = new Array().concat(baseHandlers);
-    this._constraintHandlers = new Array().concat(baseConstraintHandlers);
-    this._asyncHandlers = new Array().concat(baseHandlersAsync);
-    {
-      this.track = [];
-      if (baseValidator !== null && baseValidator !== void 0 && baseValidator.track) {
-        this.track = this.track.concat(baseValidator.track);
-      }
-    }
-  }
-  withRequiredMessage(message) {
-    return this.__addConstraintValidationHandler('valueMissing', message);
-  }
-  withMaxLengthMessage(message) {
-    return this.__addConstraintValidationHandler('tooLong', message);
-  }
-  withMinLengthMessage(message) {
-    return this.__addConstraintValidationHandler('tooShort', message);
-  }
-  withPatternMismatchMessage(message) {
-    return this.__addConstraintValidationHandler('patternMismatch', message);
-  }
-  withBadInputMessage(message) {
-    return this.__addConstraintValidationHandler('badInput', message);
-  }
-  withRangeUnderflowMessage(message) {
-    return this.__addConstraintValidationHandler('rangeUnderflow', message);
-  }
-  withRangeOverflowMessage(message) {
-    return this.__addConstraintValidationHandler('rangeOverflow', message);
-  }
-  withTypeMismatchMessage(message) {
-    return this.__addConstraintValidationHandler('typeMismatch', message);
-  }
-  withStepMismatchMessage(message) {
-    return this.__addConstraintValidationHandler('stepMismatch', message);
-  }
-  withCustomValidation(handler) {
-    this._handlers.push(handler);
-    return this;
-  }
-  withCustomValidationAsync(handler) {
-    this._asyncHandlers.push(handler);
-    return this;
-  }
-  __addConstraintValidationHandler(validityKey, message) {
-    if (this.track) {
-      if (this.track.includes(validityKey)) {
-        console.warn(`[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`);
-        }
-      }
-      if (key === validityKey) {
-        input.errorText = typeof message === 'string' ? message : message(input);
-        return true;
-      }
-      return false;
-    });
-    return this;
-  }
-}
-
-const useForm = (children, validators = {}, optimized = false) => {
-  const initialValues = React.useMemo(() => {
-    const values = _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
-    {
-      Object.keys(values.state.fields).forEach(key => {
-        const input = values.state.fields[key];
-        const validator = validators[key];
-        if (validator instanceof GValidator) {
-          var _validator$track;
-          const validityKeys = (_validator$track = validator.track) === null || _validator$track === void 0 ? void 0 : _validator$track.filter(key => validityMap[key]);
-          validityKeys === null || validityKeys === void 0 || validityKeys.forEach(vKey => {
-            if (typeof input[validityMap[vKey]] === 'undefined') {
-              console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\nadd '${validityMap[vKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[vKey]]}(...)' validation`);
-            }
-          });
-          Object.entries(validityMap).forEach(([validityKey, constraint]) => {
-            var _validator$track2;
-            if (typeof input[constraint] !== 'undefined' && !((_validator$track2 = validator.track) !== null && _validator$track2 !== void 0 && _validator$track2.some(trackKey => validityKey === trackKey))) {
-              console.warn(`[Missing Validator] - the input '${input.formKey}' has described the constraint '${constraint}' but the input hasn't registered a validator to handle it.\nregister a handler '${handlersMap[constraint]}' for the input validator to handle the '${validityKey}' violation.\nexample:\ncosnt validators = {\n\t${input.formKey}: new GValidator().${handlersMap[constraint]}(...)\n}`);
-            }
-          });
-        }
-      });
-    }
-    return values;
-  }, []);
-  const [state, setState] = React.useState(initialValues.state);
+const useFormHandlers = (getState, setState, validators = {}, optimized = false) => {
   const _viHandler = (input, e) => {
     if (!input) return;
     const element = e && e.target;
     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) {
+      if (!input.dirty && input.value && !input.touched) {
         _checkInputManually(input);
         _dispatchChanges(input, input.formKey);
         return;
@@ -357,6 +231,7 @@ const useForm = (children, validators = {}, optimized = false) => {
   const _checkInputManually = input => {
     let validityKey = _findValidityKey({
       valueMissing: input.required && !input.value || false,
+      typeMismatch: _checkTypeMismatch(input),
       tooShort: input.minLength && input.value.toString().length < input.minLength || false,
       tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,
       patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,
@@ -369,22 +244,17 @@ const useForm = (children, validators = {}, optimized = false) => {
     _validateInput(input, validityKey);
     return !input.error;
   };
-  const _updateInputHandler = (key, e, unknown) => {
-    const value = _extractValue(e, unknown);
-    const input = _updateInput(key, value);
+  const _updateInputHandler = (input, e, unknown) => {
+    input.value = _extractValue(e, unknown);
     _viHandler(input, e);
   };
   const _validateInput = (input, validityKey, setValidity) => {
     const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
-    inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);
+    if (inputValidator) {
+      __validateInput(input, inputValidator, validityKey, setValidity);
+    }
     input.touched = true;
   };
-  const _updateInput = (key, value) => {
-    const input = state.fields[key];
-    input.value = value;
-    input.dirty = true;
-    return input;
-  };
   const _dispatchChanges = (changes, key) => setState(prev => {
     if (key) {
       return {
@@ -404,13 +274,14 @@ const useForm = (children, validators = {}, optimized = false) => {
     };
   });
   const __validateInput = (input, inputValidator, validityKey, setValidity) => {
+    const fields = getState().fields;
     for (const index in inputValidator.constraintHandlers) {
       const result = inputValidator.constraintHandlers[index](input, validityKey);
       input.error = _checkResult(result, input.value);
       if (input.error) return;
     }
     for (const index in inputValidator.handlers) {
-      const result = inputValidator.handlers[index](input, state.fields);
+      const result = inputValidator.handlers[index](input, fields);
       input.error = _checkResult(result, input.value);
       if (input.error) return;
     }
@@ -420,7 +291,7 @@ const useForm = (children, validators = {}, optimized = false) => {
       _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {
         const validateAsync = async () => {
           for (const index in inputValidator.asyncHandlers) {
-            const result = await inputValidator.asyncHandlers[index](input, state.fields);
+            const result = await inputValidator.asyncHandlers[index](input, fields);
             input.error = _checkResult(result, input.value);
             if (input.error) break;
           }
@@ -429,138 +300,202 @@ const useForm = (children, validators = {}, optimized = false) => {
             error: input.error,
             errorText: input.errorText
           }, input.formKey);
-          setValidity && setValidity(input.errorText);
+          if (setValidity) {
+            setValidity(input.errorText);
+          }
         };
         validateAsync();
       });
     }
   };
   return {
-    state,
     _updateInputHandler,
     _viHandler,
     _dispatchChanges,
     optimized,
-    key: initialValues.key,
     _createInputChecker: _checkInputManually
   };
 };
 
-const gFormContext = React.createContext({
-  state: {
-    fields: {},
-    loading: false
-  },
-  _updateInputHandler: () => null,
-  _viHandler: () => null,
-  _dispatchChanges: () => null,
-  _createInputChecker: () => false,
-  optimized: false,
-  key: ''
+const GFormContext = React.createContext({});
+const GFormContextProvider = ({
+  children,
+  initialState,
+  validators,
+  optimized
+}) => {
+  const stateRef = React.useRef(initialState);
+  const listeners = React.useRef(new Set());
+  const setState = React.useCallback(updater => {
+    stateRef.current = typeof updater === 'function' ? updater(stateRef.current) : updater;
+    listeners.current.forEach(l => l());
+  }, []);
+  const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);
+  const getState = React.useCallback(() => stateRef.current, []);
+  const subscribe = React.useCallback(listener => {
+    listeners.current.add(listener);
+    return () => listeners.current.delete(listener);
+  }, []);
+  React.useEffect(() => {
+    for (const fieldKey in initialState.fields) {
+      initialState.fields[fieldKey].dispatchChanges = changes => handlers._dispatchChanges(changes, fieldKey);
+    }
+  }, []);
+  const store = React.useRef({
+    getState,
+    setState,
+    subscribe,
+    handlers
+  });
+  return React.createElement(GFormContext.Provider, {
+    value: store.current
+  }, children);
+};
+const useFormStore = () => {
+  const store = React.useContext(GFormContext);
+  if (!store) 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()));
+};
+function createSelector(selectors, combiner) {
+  let lastArgs = [];
+  let lastResult;
+  return state => {
+    const args = selectors.map(fn => fn(state));
+    if (lastArgs.length === args.length && args.every((val, i) => val === lastArgs[i])) {
+      return lastResult;
+    }
+    lastArgs = args;
+    lastResult = combiner(...args);
+    return lastResult;
+  };
+}
+
+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 useGenericFormContext = () => React.useContext(gFormContext);
-const GFormContextProvider = gFormContext.Provider;
 
-const RNGForm = (() => {
-  return React.forwardRef(({
-    loader = React.createElement("div", null, "loading"),
-    stateRef,
-    children,
-    validators,
-    onInit,
-    el: El,
-    ...rest
-  }, ref) => {
-    const values = useForm(children, validators);
-    const {
-      state,
-      _dispatchChanges,
-      key,
-      _viHandler
-    } = values;
-    const formState = React.useMemo(() => {
-      const _isFormValid = _checkIfFormIsValid(state.fields);
-      const formState = {
-        ...state.fields,
-        isValid: _isFormValid,
-        isInvalid: !_isFormValid,
-        loading: state.loading,
-        toRawData: options => _toRawData(state.fields, options),
-        toURLSearchParams: _toURLSearchParams,
-        checkValidity: () => {
-          for (const i in state.fields) {
-            const valid = state.fields[i].checkValidity();
-            if (!valid) {
-              return false;
-            }
+const FormRenderer = React.forwardRef(({
+  stateRef,
+  children,
+  onInit,
+  el: El,
+  ...rest
+}, ref) => {
+  const {
+    getState,
+    handlers
+  } = 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;
-        },
-        setLoading: p => _dispatchChanges({
-          loading: typeof p === 'function' ? p(state.loading) : p
-        }),
-        dispatchChanges: changes => _dispatchChanges({
-          fields: _merge({}, state.fields, changes)
-        })
-      };
-      if (stateRef) stateRef.current = formState;
-      return formState;
-    }, [state.fields]);
-    React.useEffect(() => {
-      if (onInit) {
-        const _handler = _c => _dispatchChanges({
-          fields: _merge({}, state.fields, _c)
+        }
+        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 formChildren = typeof children === 'function' ? children(state) : children;
+    return React.createElement(El, _extends({}, rest, {
+      ref: ref
+    }), formChildren);
+  }, [getFormState, children]);
+  React.useEffect(() => {
+    const state = getFormState();
+    if (onInit) {
+      const changes = onInit(state);
+      if (changes) {
+        const _handler = _c => handlers._dispatchChanges({
+          fields: _merge({}, state, _c)
         });
-        const changes = onInit(formState);
-        changes instanceof Promise ? changes.then(_handler) : _handler(changes);
+        if (changes instanceof Promise) {
+          changes.then(_handler);
+        } else _handler(changes);
       }
-      const dipatchers = {};
-      Object.values(state.fields).forEach(field => {
-        dipatchers[field.formKey] = {
-          dispatchChanges: changes => _dispatchChanges(changes, field.formKey)
-        };
-        if (!field.value) return;
-        _viHandler(field);
-      });
-      _dispatchChanges({
-        fields: _merge(dipatchers, state.fields)
-      });
-    }, []);
-    const formComponent = React.useMemo(() => {
-      const formChildren = typeof children === 'function' ? children(formState) : children;
-      return React.createElement(El, _extends({}, rest, {
-        ref: ref
-      }), formChildren);
-    }, [formState, children]);
-    return React.createElement(GFormContextProvider, {
-      value: values,
-      key: key
-    }, state.loading ? loader : formComponent);
-  });
-})();
+    }
+    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(({
+  children,
+  validators,
+  ...props
+}, ref) => {
+  const initialState = React.useMemo(() => {
+    return _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
+  }, [children]);
+  return React.createElement(GFormContextProvider, {
+    key: initialState.key,
+    initialState: initialState,
+    validators: validators
+  }, React.createElement(FormRenderer, _extends({
+    ref: ref
+  }, props), children));
+});
 
-const RNGInput = React.forwardRef(({
+const _RNGInput = React.forwardRef(({
   formKey,
   element,
   type,
-  validatorKey,
   fetch,
-  fetchDeps = [],
+  fetchDeps,
+  debounce = 300,
   defaultValue,
+  validatorKey,
   value,
-  debounce = 300,
   ...rest
 }, ref) => {
-  const {
-    state: {
-      fields
-    },
-    _updateInputHandler,
-    _dispatchChanges,
-    _viHandler,
-    _createInputChecker
-  } = useGenericFormContext();
-  const inputState = fields[formKey];
+  const inputState = useFormSelector(state => state.fields[formKey]);
+  const store = useFormStore();
   const _element = React.useMemo(() => {
     const value = inputState.value || '';
     const _props = {
@@ -569,41 +504,44 @@ const RNGInput = React.forwardRef(({
       inputMode: type,
       ref
     };
-    _props.onEndEditing = e => {
-      _viHandler(inputState);
-      rest.onEndEditing && rest.onEndEditing(e);
+    _props.onEndEditing = rest.onEndEditing ? e => {
+      store.handlers._viHandler(inputState);
+      rest.onEndEditing(e);
+    } : () => {
+      store.handlers._viHandler(inputState);
     };
-    _props.onChangeText = e => {
-      _updateInputHandler(formKey, undefined, {
+    _props.onChangeText = rest.onChangeText ? e => {
+      store.handlers._updateInputHandler(inputState, undefined, {
+        value: e
+      });
+      rest.onChangeText(e);
+    } : e => {
+      store.handlers._updateInputHandler(inputState, undefined, {
         value: e
       });
-      rest.onChangeText && rest.onChangeText(e);
     };
     if (element) {
       return element(inputState, _props);
     }
     return React.createElement(reactNative.TextInput, _props);
   }, [inputState, element]);
-  const _fetchDeps = React.useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);
-  React.useEffect(() => {
-    inputState.checkValidity = () => {
-      const result = _createInputChecker(inputState);
-      _dispatchChanges(inputState, formKey);
-      return result;
-    };
-    inputState.dispatchChanges = changes => _dispatchChanges(changes, formKey);
-    _dispatchChanges(inputState, formKey);
-  }, []);
+  const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
+  const stableFetchDeps = React.useMemo(() => JSON.stringify(_fetchDeps), [_fetchDeps]);
   React.useEffect(() => {
     if (fetch) {
       _debounce(debounce, `${inputState.gid}-fetch`).then(() => {
-        const res = fetch(inputState, fields);
-        res instanceof Promise ? res.then(state => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);
+        const res = fetch(inputState, store.getState().fields);
+        if (res instanceof Promise) {
+          res.then(state => state && store.handlers._dispatchChanges(state, formKey));
+        } else if (res) {
+          store.handlers._dispatchChanges(res, formKey);
+        }
       });
     }
-  }, _fetchDeps);
+  }, [stableFetchDeps]);
   return _element;
 });
+const RNGInput = React.memo(_RNGInput);
 
 exports.RNGForm = RNGForm;
 exports.RNGInput = RNGInput;