gform-react 2.7.2 → 2.8.0

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

@@ -21,87 +21,52 @@ const typeValueDict = {
   number: 'valueAsNumber'
 };
 const _generateIdUnsafe = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);
-const _copyStateFields = (source, destination) => {
-  for (const key in destination.fields) {
-    const sourceField = source.fields[key];
-    const destField = destination.fields[key];
-    if (!sourceField || sourceField.type !== destField.type) continue;
-    destination.fields[key] = {
-      ...destField,
-      ...sourceField
-    };
-  }
-};
-const _buildFormInitialValues = (rows = []) => {
-  const fields = {};
-  const inputs = _findInputs(rows);
-  inputs.forEach(config => {
-    if (fields[config.formKey]) {
-      console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' already defined.`);
-    }
-    const {
-      required = false,
-      max,
-      maxLength,
-      min,
-      minLength,
-      step,
-      pattern,
-      type = "text",
-      defaultValue,
-      value,
-      checked,
-      defaultChecked,
-      formKey,
-      debounce,
-      validatorKey
-    } = config;
-    const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;
-    const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;
-    fields[formKey] = {
-      formKey,
-      type,
-      required,
-      max,
-      maxLength,
-      min,
-      minLength,
-      step,
-      pattern,
-      value: inputValue,
-      validatorKey,
-      debounce,
-      dirty: false,
-      touched: false,
-      gid: _generateIdUnsafe()
-    };
-  });
+const _buildInputInitialValues = input => {
+  const {
+    required = false,
+    max,
+    maxLength,
+    min,
+    minLength,
+    step,
+    pattern,
+    type = "text",
+    defaultValue,
+    value,
+    checked,
+    defaultChecked,
+    formKey,
+    debounce,
+    validatorKey
+  } = input;
+  const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;
+  const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;
   return {
-    fields: fields
-  };
-};
-const _findInputs = (root, total = []) => {
-  if (!root) return total;
-  React$1.Children.forEach(root, child => {
-    if (!React$1.isValidElement(child)) return;
-    if (child.props) {
-      const {
-        formKey,
-        children
-      } = child.props;
-      if (formKey) {
-        total.push(child.props);
-      }
-      if (children) {
-        _findInputs(children, total);
-      }
+    formKey,
+    type,
+    required,
+    max,
+    maxLength,
+    min,
+    minLength,
+    step,
+    pattern,
+    value: inputValue,
+    validatorKey,
+    debounce,
+    dirty: false,
+    touched: false,
+    gid: _generateIdUnsafe(),
+    error: false,
+    errorText: '',
+    dispatchChanges(changes) {},
+    checkValidity() {
+      return false;
     }
-  });
-  return total;
+  };
 };
-const _findValidityKey = (validity, exclude = []) => {
+const _findValidityKey = validity => {
   for (const key in validity) {
-    if (exclude.includes(key)) continue;
     if (key !== 'valid' && validity[key]) {
       return key;
     }
@@ -265,30 +230,32 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
   const _viHandler = (input, e) => {
     if (!input) return;
     const element = e && e.target;
+    input.touched = true;
     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;
+      const hasInitialValue = !input.dirty && input.value;
       if (hasInitialValue) {
-        _checkInputManually(input);
+        const {
+          validityKey = 'custom'
+        } = _checkInputManually(input);
+        element.setCustomValidity(validityKey);
         _dispatchChanges(input, input.formKey);
         return;
       }
       element.setCustomValidity('');
-      const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
-      const validityKey = _findValidityKey(element.validity, exclude);
+      const validityKey = _findValidityKey(element.validity);
       _validateInput(input, validityKey, v => element.setCustomValidity(v));
       if (!validityKey && input.error) {
         element.setCustomValidity(input.errorText || 'error');
       }
       _dispatchChanges(input, input.formKey);
     } else {
-      input.checkValidity = () => _checkInputManually(input);
+      input.checkValidity = () => _checkInputManually(input).isValid;
       input.checkValidity();
       _dispatchChanges(input, input.formKey);
     }
   };
   const _checkInputManually = input => {
-    const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
     let validityKey = _findValidityKey({
       valueMissing: input.required && !input.value || false,
       typeMismatch: _checkTypeMismatch(input),
@@ -297,28 +264,34 @@ 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';
     }
     _validateInput(input, validityKey);
-    return !input.error;
+    return {
+      isValid: !input.error,
+      validityKey
+    };
   };
   const _updateInputHandler = (input, e, unknown) => {
     input.value = _extractValue(e, unknown);
+    input.dirty = true;
     _viHandler(input, e);
   };
   const _validateInput = (input, validityKey, setValidity) => {
     const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
     {
       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`);
+        if (validityKey === 'typeMismatch') {
+          if (!inputValidator?.handlers.length) 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]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withTypeMismatchMessage('pattern mismatch'),\n\t...\n}\nif you added on of these validators then the input is still suffering from '${validityKey}' violation.\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props.\n`);else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing or not satisfies the native constraint.\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withTypeMismatchMessage('pattern mismatch'),\n\t...\n}\n\nif you already have a Custom Validation then the input is still not satisfies the native type pattern.\neither enforce it or 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`);
+        console.warn(`form submition is prevented due to violation(s) of input '${input.formKey}': violation '${validityKey}' caused by '${validityMap[validityKey]}' property (<Ginput ${validityMap[validityKey]}={...} />)`);
       }
     }
     if (inputValidator) {
       __validateInput(input, inputValidator, validityKey, setValidity);
     }
-    input.touched = true;
   };
   const _dispatchChanges = (changes, key) => setState(prev => {
     if (key) {
@@ -341,12 +314,14 @@ const useFormHandlers = (getState, setState, 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);
+      const handler = inputValidator.constraintHandlers[index];
+      const result = handler(input, validityKey);
       input.error = _checkResult(result, input.value);
       if (input.error) return;
     }
     for (const index in inputValidator.handlers) {
-      const result = inputValidator.handlers[index](input, fields);
+      const handler = inputValidator.handlers[index];
+      const result = handler(input, fields);
       input.error = _checkResult(result, input.value);
       if (input.error) return;
     }
@@ -356,7 +331,8 @@ const useFormHandlers = (getState, setState, 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, fields);
+            const handler = inputValidator.asyncHandlers[index];
+            const result = await handler(input, fields);
             input.error = _checkResult(result, input.value);
             if (input.error) break;
           }
@@ -373,10 +349,6 @@ 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,
@@ -391,7 +363,8 @@ const GFormContextProvider = ({
   children,
   initialState,
   validators,
-  optimized
+  optimized,
+  formRef
 }) => {
   const stateRef = React$1.useRef(initialState);
   const listeners = React$1.useRef(null);
@@ -402,19 +375,59 @@ const GFormContextProvider = ({
       return;
     }
     stateRef.current = nextState;
-    listeners.current.forEach(l => l());
+    listeners.current.forEach(listener => listener());
   }, []);
   const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);
+  const getInputElement = React$1.useCallback(formKey => {
+    if (formRef && formRef.current) {
+      return formRef.current[formKey];
+    }
+  }, []);
+  const registerField = React$1.useCallback(config => {
+    const prev = stateRef.current;
+    if (prev.fields[config.formKey]) {
+      {
+        console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' already defined.`);
+      }
+      return;
+    }
+    const inputState = _buildInputInitialValues(config);
+    stateRef.current = {
+      ...prev,
+      fields: {
+        ...prev.fields,
+        [config.formKey]: {
+          ...inputState,
+          dispatchChanges: changes => handlers._dispatchChanges(changes, config.formKey)
+        }
+      }
+    };
+  }, [handlers]);
+  const unregisterField = React$1.useCallback(formKey => {
+    const prev = stateRef.current;
+    if (!prev.fields[formKey]) return;
+    const {
+      [formKey]: _,
+      ...remainingFields
+    } = prev.fields;
+    stateRef.current = {
+      ...prev,
+      fields: remainingFields
+    };
+    listeners.current.forEach(listener => listener());
+  }, []);
   const store = React$1.useMemo(() => {
     if (!listeners.current) {
       listeners.current = new Set();
+      stateRef.current = initialState;
+      for (const fieldKey in initialState.fields) {
+        initialState.fields[fieldKey].dispatchChanges = changes => handlers._dispatchChanges(changes, fieldKey);
+      }
     } else {
       listeners.current.clear();
-      _copyStateFields(stateRef.current, initialState);
-    }
-    stateRef.current = initialState;
-    for (const fieldKey in initialState.fields) {
-      initialState.fields[fieldKey].dispatchChanges = changes => handlers._dispatchChanges(changes, fieldKey);
+      for (const fieldKey in stateRef.current.fields) {
+        stateRef.current.fields[fieldKey].dispatchChanges = changes => handlers._dispatchChanges(changes, fieldKey);
+      }
     }
     return {
       getState: () => stateRef.current,
@@ -423,7 +436,10 @@ const GFormContextProvider = ({
         listeners.current.add(listener);
         return () => listeners.current.delete(listener);
       },
-      handlers
+      handlers,
+      registerField,
+      unregisterField,
+      getInputElement
     };
   }, [initialState]);
   return React$1.createElement(GFormContext.Provider, {
@@ -432,7 +448,7 @@ const GFormContextProvider = ({
 };
 const useFormStore = () => {
   const store = React$1.useContext(GFormContext);
-  if (!store.getState) throw new Error('useGFormStore must be used within `GForm` component');
+  if (!store.getState) throw new Error('useFormStore must be used within `GForm` component');
   return store;
 };
 const useFormSelector = selector => {
@@ -501,9 +517,9 @@ const RNGForm = React$1.forwardRef(({
   validators,
   ...props
 }, ref) => {
-  const initialState = React$1.useMemo(() => {
-    return _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
-  }, [children]);
+  const initialState = React$1.useMemo(() => ({
+    fields: {}
+  }), []);
   return React.createElement(GFormContextProvider, {
     initialState: initialState,
     validators: validators
@@ -518,22 +534,37 @@ const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
   return selected.length ? selected : null;
 });
 
-const _RNGInput = React$1.forwardRef(({
-  formKey,
-  element,
-  type,
-  fetch,
-  fetchDeps,
-  debounce = 300,
-  defaultValue,
-  validatorKey,
-  value,
-  ...rest
-}, ref) => {
-  const inputState = useFormSelector(state => state.fields[formKey]);
+const _RNGInput = React$1.forwardRef((props, ref) => {
   const store = useFormStore();
+  const {
+    formKey,
+    element,
+    type,
+    fetch,
+    fetchDeps,
+    debounce = 300,
+    defaultValue,
+    validatorKey,
+    value,
+    ...rest
+  } = props;
+  if (!store.getState().fields[formKey]) {
+    store.registerField(props);
+  }
+  const inputState = useFormSelector(state => state.fields[formKey]);
+  const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
+  React$1.useEffect(() => {
+    if (inputState.value) {
+      store.handlers._viHandler(inputState, {
+        target: store.getInputElement(formKey)
+      });
+    }
+    return () => {
+      store.unregisterField(formKey);
+    };
+  }, []);
   const _element = React$1.useMemo(() => {
-    const value = inputState.value || '';
+    const value = inputState.value ?? '';
     const _props = {
       ...rest,
       value,
@@ -556,24 +587,11 @@ const _RNGInput = React$1.forwardRef(({
         value: e
       });
     };
-    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);
     }
     return React.createElement(reactNative.TextInput, _props);
   }, [inputState, element]);
-  const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
   React$1.useEffect(() => {
     if (fetch) {
       _debounce(debounce, `${inputState.gid}-fetch`).then(() => {