gform-react 2.7.5 → 2.8.0

package/dist/esm/shared.development.js

@@ -1,9 +1,10 @@
-import React, { Children, isValidElement, createContext, useContext, useSyncExternalStore, useRef, useCallback, useMemo } from 'react';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import React, { createContext, useContext, useSyncExternalStore, useRef, useCallback, useMemo } from 'react';
 import { validityMap, handlersMap } from './GValidator.development.js';
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const isObject = o => o && typeof o === 'object' && !Array.isArray(o);
 const defaultFieldProps = {
   text: {
@@ -21,84 +22,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] = _objectSpread$1(_objectSpread$1({}, 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;
-  Children.forEach(root, child => {
-    if (!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;
     }
@@ -222,7 +191,7 @@ const _merge = (target = {}, ...nodes) => {
   const next = nodes.shift();
   if (isObject(next)) {
     for (const key in next) {
-      target[key] = target[key] ? _objectSpread$1(_objectSpread$1({}, target[key]), next[key]) : next[key];
+      target[key] = target[key] ? _objectSpread$2(_objectSpread$2({}, target[key]), next[key]) : next[key];
     }
   }
   return _merge(target, ...nodes);
@@ -243,7 +212,7 @@ const _mergeRefs = (refA, refB) => {
 };
 const _buildFormState = (fields, formElement, dispatchChanges) => {
   const isFormValid = _checkIfFormIsValid(fields);
-  const formState = _objectSpread$1(_objectSpread$1({}, fields), {}, {
+  const formState = _objectSpread$2(_objectSpread$2({}, fields), {}, {
     isValid: isFormValid,
     isInvalid: !isFormValid,
     toRawData: options => _toRawData(fields, options),
@@ -261,36 +230,38 @@ const _buildFormState = (fields, formElement, dispatchChanges) => {
   return formState;
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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: _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),
@@ -299,48 +270,56 @@ 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 !== null && inputValidator !== void 0 && 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 !== null && inputValidator !== void 0 && 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) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        fields: _objectSpread(_objectSpread({}, prev.fields), {}, {
-          [key]: _objectSpread(_objectSpread({}, prev.fields[key]), changes)
+      return _objectSpread$1(_objectSpread$1({}, prev), {}, {
+        fields: _objectSpread$1(_objectSpread$1({}, prev.fields), {}, {
+          [key]: _objectSpread$1(_objectSpread$1({}, prev.fields[key]), changes)
         })
       });
     }
-    return _objectSpread(_objectSpread({}, prev), changes);
+    return _objectSpread$1(_objectSpread$1({}, prev), changes);
   });
   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;
     }
@@ -350,7 +329,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;
           }
@@ -367,10 +347,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,
@@ -380,12 +356,17 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
   };
 };
 
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return (String )(t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const GFormContext = createContext({});
 const GFormContextProvider = ({
   children,
   initialState,
   validators,
-  optimized
+  optimized,
+  formRef
 }) => {
   const stateRef = useRef(initialState);
   const listeners = useRef(null);
@@ -396,19 +377,56 @@ 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 = useCallback(formKey => {
+    if (formRef && formRef.current) {
+      return formRef.current[formKey];
+    }
+  }, []);
+  const registerField = 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 = _objectSpread(_objectSpread({}, prev), {}, {
+      fields: _objectSpread(_objectSpread({}, prev.fields), {}, {
+        [config.formKey]: _objectSpread(_objectSpread({}, inputState), {}, {
+          dispatchChanges: changes => handlers._dispatchChanges(changes, config.formKey)
+        })
+      })
+    });
+  }, [handlers]);
+  const unregisterField = useCallback(formKey => {
+    const prev = stateRef.current;
+    if (!prev.fields[formKey]) return;
+    const _prev$fields = prev.fields,
+      {
+        [formKey]: _
+      } = _prev$fields,
+      remainingFields = _objectWithoutProperties(_prev$fields, [formKey].map(_toPropertyKey));
+    stateRef.current = _objectSpread(_objectSpread({}, prev), {}, {
+      fields: remainingFields
+    });
+    listeners.current.forEach(listener => listener());
+  }, []);
   const store = 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,
@@ -417,7 +435,10 @@ const GFormContextProvider = ({
         listeners.current.add(listener);
         return () => listeners.current.delete(listener);
       },
-      handlers
+      handlers,
+      registerField,
+      unregisterField,
+      getInputElement
     };
   }, [initialState]);
   return React.createElement(GFormContext.Provider, {
@@ -426,7 +447,7 @@ const GFormContextProvider = ({
 };
 const useFormStore = () => {
   const store = 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 => {
@@ -447,5 +468,5 @@ function createSelector(selectors, combiner) {
   };
 }
 
-export { GFormContextProvider as G, _buildFormState as _, useFormSelector as a, _mergeRefs as b, _hasSubmitter as c, _buildFormInitialValues as d, _merge as e, createSelector as f, _debounce as g, useFormStore as u };
+export { GFormContextProvider as G, _buildFormState as _, useFormSelector as a, _mergeRefs as b, _hasSubmitter as c, _merge as d, createSelector as e, _debounce as f, useFormStore as u };
 //# sourceMappingURL=shared.development.js.map