gform-react 2.5.3 → 2.6.0

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

@@ -20,74 +20,84 @@ const typeValueDict = {
   checkbox: 'checked',
   number: 'valueAsNumber'
 };
-const generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);
+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 = {};
-  if (!Array.isArray(rows)) rows = [rows];
-  for (const row of rows) {
-    const inputConfigs = _findInputs(row);
-    inputConfigs.forEach(config => {
-      if (fields[config.formKey]) {
-        console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' has already been 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[config.formKey] = {
-        formKey,
-        type,
-        required,
-        max,
-        maxLength,
-        min,
-        minLength,
-        step,
-        pattern,
-        value: inputValue,
-        validatorKey,
-        debounce,
-        dirty: false,
-        touched: false,
-        gid: generateId()
-      };
-      Object.keys(fields[config.formKey]).forEach(key => {
-        if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];
-      });
-    });
-  }
+  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()
+    };
+  });
   return {
-    fields: fields,
-    key: generateId()
+    fields: fields
   };
 };
 const _findInputs = (root, total = []) => {
-  var _root$props, _root$props2;
   if (!root) return total;
-  if (Array.isArray(root)) {
-    root.forEach(element => _findInputs(element, total));
-    return total;
-  }
-  if ((_root$props = root.props) !== null && _root$props !== void 0 && _root$props.formKey) {
-    total.push(root.props);
-    return total;
-  }
-  return _findInputs((_root$props2 = root.props) === null || _root$props2 === void 0 ? void 0 : _root$props2.children, total);
+  React.Children.forEach(root, child => {
+    if (!React.isValidElement(child)) return;
+    if (child.props) {
+      const {
+        formKey,
+        children
+      } = child.props;
+      if (formKey) {
+        total.push(child.props);
+      }
+      if (children) {
+        _findInputs(children, total);
+      }
+    }
+  });
+  return total;
 };
 const _findValidityKey = (validity, exclude = []) => {
   for (const key in validity) {
@@ -390,7 +400,7 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
     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 are 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') 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 (inputValidator) {
@@ -472,30 +482,36 @@ const GFormContextProvider = ({
   optimized
 }) => {
   const stateRef = React.useRef(initialState);
-  const listeners = React.useRef(new Set());
+  const listeners = React.useRef(null);
   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(() => {
+  const store = React.useMemo(() => {
+    if (!listeners.current) {
+      listeners.current = new Set();
+    } else {
+      console.log(`form changed stated from`, stateRef.current, '\nto\n', initialState);
+      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);
     }
-  }, []);
-  const store = React.useRef({
-    getState,
-    setState,
-    subscribe,
-    handlers
-  });
+    return {
+      getState: () => stateRef.current,
+      setState,
+      subscribe: listener => {
+        listeners.current.add(listener);
+        return () => listeners.current.delete(listener);
+      },
+      handlers
+    };
+  }, [initialState]);
   return React.createElement(GFormContext.Provider, {
-    value: store.current
+    value: store
   }, children);
 };
 const useFormStore = () => {
@@ -549,11 +565,11 @@ const FormRenderer = React.forwardRef(({
     formRef.current = element;
   }, [ref]);
   const getFormState = React.useCallback(() => {
-    const isFormInvalid = _checkIfFormIsValid(fields);
+    const isFormValid = _checkIfFormIsValid(fields);
     const formState = {
       ...fields,
-      isValid: !isFormInvalid,
-      isInvalid: isFormInvalid,
+      isValid: isFormValid,
+      isInvalid: !isFormValid,
       toRawData: options => _toRawData(fields, options),
       toFormData: () => _toFormData(formRef.current),
       toURLSearchParams: _toURLSearchParams,
@@ -660,7 +676,6 @@ const GForm = React.forwardRef(({
     return _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
   }, [children]);
   return React.createElement(GFormContextProvider, {
-    key: initialState.key,
     initialState: initialState,
     validators: validators,
     optimized: optimized
@@ -728,7 +743,7 @@ const _GInput = React.forwardRef(({
       } : (e, unknown) => {
         store.handlers._updateInputHandler(inputState, e, unknown);
       };
-      if (!inputState.touched) {
+      if (!inputState.touched && inputState.dispatchChanges) {
         _props.onFocus = rest.onFocus ? e => {
           rest.onFocus(e);
           inputState.dispatchChanges({