gform-react 2.0.1 → 2.5.0

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

@@ -72,10 +72,7 @@ const _buildFormInitialValues = (rows = []) => {
     });
   }
   return {
-    state: {
-      fields,
-      loading: false
-    },
+    fields: fields,
     key: generateId()
   };
 };
@@ -99,6 +96,26 @@ const _findValidityKey = validity => {
     }
   }
 };
+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;
+  }
+};
 const hasSubmitter = form => {
   if (!form) return false;
   for (const element of form) {
@@ -106,14 +123,6 @@ const hasSubmitter = form => {
   }
   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 {
@@ -314,39 +323,13 @@ class GValidator {
   }
 }
 
-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;
@@ -367,6 +350,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,
@@ -379,22 +363,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 {
@@ -414,13 +393,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;
     }
@@ -430,7 +410,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;
           }
@@ -439,184 +419,260 @@ 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 GForm = (() => {
-  return React.forwardRef(({
-    loader = React.createElement("div", null, "loading"),
-    stateRef,
-    onSubmit,
-    onChange,
-    onPaste,
-    children,
-    validators,
-    onInit,
-    optimized,
-    ...rest
-  }, ref) => {
-    const formRef = React.useRef(null);
-    const values = useForm(children, validators, optimized);
-    const {
-      state,
-      _updateInputHandler,
-      _viHandler,
-      _dispatchChanges,
-      key
-    } = values;
-    const refHandler = element => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(element);
-        } else {
-          ref.current = element;
-        }
+const FormRenderer = React.forwardRef(({
+  stateRef,
+  onSubmit,
+  onChange,
+  onPaste,
+  onKeyDown,
+  onKeyUp,
+  children,
+  onInit,
+  ...rest
+}, ref) => {
+  const formRef = React.useRef(null);
+  const {
+    getState,
+    handlers
+  } = useFormStore();
+  const isFormInvalid = useFormSelector(selectFirstInvalidField);
+  const refHandler = React.useCallback(element => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(element);
+      } else {
+        ref.current = element;
       }
-      formRef.current = element;
+    }
+    formRef.current = element;
+  }, [ref]);
+  const getFormState = React.useCallback(() => {
+    const fields = getState().fields;
+    const formState = {
+      ...fields,
+      isValid: !isFormInvalid,
+      isInvalid: isFormInvalid,
+      toRawData: options => _toRawData(fields, options),
+      toFormData: () => _toFormData(formRef.current),
+      toURLSearchParams: _toURLSearchParams,
+      checkValidity: function () {
+        this.isValid = formRef.current && formRef.current.checkValidity() || false;
+        this.isInvalid = !this.isValid;
+        return this.isValid;
+      },
+      dispatchChanges: changes => handlers._dispatchChanges({
+        fields: _merge({}, fields, changes)
+      })
     };
-    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),
-        toFormData: () => _toFormData(formRef.current),
-        toURLSearchParams: _toURLSearchParams,
-        checkValidity: function () {
-          this.isValid = formRef.current && formRef.current.checkValidity() || false;
-          this.isInvalid = !this.isValid;
-          return this.isValid;
-        },
-        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]);
-    const formComponent = React.useMemo(() => {
-      const formChildren = typeof children === 'function' ? children(formState) : children;
-      const _onSubmit = e => {
-        if (formState.isValid && onSubmit) {
-          onSubmit(formState, e);
-        }
-      };
-      let _onPaste;
-      if (onPaste) {
-        _onPaste = e => onPaste(formState, e);
+    if (stateRef) stateRef.current = formState;
+    return formState;
+  }, [isFormInvalid]);
+  const formComponent = React.useMemo(() => {
+    const state = getFormState();
+    const formChildren = typeof children === 'function' ? children(state) : children;
+    const _onSubmit = e => {
+      const state = getFormState();
+      if (state.isValid && onSubmit) {
+        onSubmit(state, e);
       }
-      return optimized ? React.createElement("form", _extends({}, rest, {
+    };
+    let _onPaste, _onChange, _onKeyDown, _onKeyUp;
+    if (onPaste) {
+      _onPaste = e => onPaste(state, e);
+    }
+    if (onKeyDown) {
+      _onKeyDown = e => onKeyDown(state, e);
+    }
+    if (onKeyUp) {
+      _onKeyUp = e => onKeyUp(state, e);
+    }
+    if (handlers.optimized) {
+      if (onChange) {
+        _onChange = (e, unknown) => {
+          handlers._updateInputHandler(state[e.target.name], e, unknown);
+          onChange(state, e);
+        };
+      } else {
+        _onChange = (e, unknown) => {
+          handlers._updateInputHandler(state[e.target.name], e, unknown);
+        };
+      }
+      return React.createElement("form", _extends({}, rest, {
         ref: refHandler,
         onPaste: _onPaste,
-        onBlur: e => {
-          _viHandler(state.fields[e.target.name], e);
-        },
+        onKeyDown: _onKeyDown,
+        onKeyUp: _onKeyUp,
+        onBlur: e => handlers._viHandler(state[e.target.name], e),
         onInvalid: e => {
           e.preventDefault();
-          _viHandler(state.fields[e.target.name], e);
-        },
-        onChange: (e, unknown) => {
-          _updateInputHandler(e.target.name, e, unknown);
-          onChange && onChange(formState, e);
+          handlers._viHandler(state[e.target.name], e);
         },
+        onChange: _onChange,
         onSubmit: _onSubmit
-      }), formChildren) : React.createElement("form", _extends({}, rest, {
-        onChange: e => onChange && onChange(formState, e),
-        ref: refHandler,
-        onSubmit: _onSubmit,
-        onPaste: _onPaste
       }), formChildren);
-    }, [formState, children]);
-    React.useEffect(() => {
-      if (!hasSubmitter(formRef.current)) {
-        console.warn(`[No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
-      }
-      if (onInit) {
-        const _handler = _c => _dispatchChanges({
-          fields: _merge({}, state.fields, _c)
+    }
+    if (onChange) {
+      _onChange = e => onChange(state, e);
+    }
+    return React.createElement("form", _extends({}, rest, {
+      ref: refHandler,
+      onSubmit: _onSubmit,
+      onChange: _onChange,
+      onPaste: _onPaste,
+      onKeyDown: _onKeyDown,
+      onKeyUp: _onKeyUp
+    }), formChildren);
+  }, [children, getFormState]);
+  React.useEffect(() => {
+    const state = getFormState();
+    if (!hasSubmitter(formRef.current)) {
+      console.warn(`[No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
+    }
+    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)
-      });
-    }, []);
-    return React.createElement(GFormContextProvider, {
-      value: values,
-      key: key
-    }, state.loading ? loader : formComponent);
-  });
-})();
+    }
+    const fields = getState().fields;
+    for (const fieldKey in fields) {
+      const field = fields[fieldKey];
+      if (!field.value) continue;
+      handlers._viHandler(field);
+    }
+  }, [getFormState]);
+  return formComponent;
+});
+const GForm = React.forwardRef(({
+  children,
+  validators,
+  optimized,
+  ...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,
+    optimized: optimized
+  }, React.createElement(FormRenderer, _extends({
+    ref: ref
+  }, props), children));
+});
 
-const GInput = React.forwardRef(({
+const _GInput = React.forwardRef(({
   formKey,
   element,
   title,
-  type,
-  validatorKey,
+  type = 'text',
   fetch,
-  fetchDeps = [],
+  fetchDeps,
   optimized,
+  debounce = 300,
   defaultChecked,
   defaultValue,
   checked,
+  validatorKey,
   value,
-  debounce = 300,
   ...rest
 }, ref) => {
-  const {
-    state: {
-      fields
-    },
-    _updateInputHandler,
-    _dispatchChanges,
-    optimized: formOptimized,
-    _viHandler
-  } = useGenericFormContext();
-  const inputState = fields[formKey];
+  const inputState = useFormSelector(state => state.fields[formKey]);
+  const store = useFormStore();
   const _element = React.useMemo(() => {
     let value, checked;
     if (type === 'checkbox') checked = inputState.value || false;else value = inputState.value || '';
@@ -631,19 +687,26 @@ const GInput = React.forwardRef(({
       'aria-required': inputState.required,
       title: title || inputState.errorText
     };
-    if (!formOptimized || !optimized) {
-      _props.onBlur = e => {
-        _viHandler(inputState, e);
-        rest.onBlur && rest.onBlur(e);
+    if (!store.handlers.optimized || !optimized) {
+      _props.onBlur = rest.onBlur ? e => {
+        store.handlers._viHandler(inputState, e);
+        rest.onBlur(e);
+      } : e => {
+        store.handlers._viHandler(inputState, e);
       };
-      _props.onInvalid = e => {
+      _props.onInvalid = rest.onInvalid ? e => {
         e.preventDefault();
-        _viHandler(inputState, e);
-        rest.onInvalid && rest.onInvalid(e);
+        store.handlers._viHandler(inputState, e);
+        rest.onInvalid(e);
+      } : e => {
+        e.preventDefault();
+        store.handlers._viHandler(inputState, e);
       };
-      _props.onChange = (e, unknown) => {
-        _updateInputHandler(formKey, e, unknown);
-        rest.onChange && rest.onChange(e);
+      _props.onChange = rest.onChange ? (e, unknown) => {
+        store.handlers._updateInputHandler(inputState, e, unknown);
+        rest.onChange(e);
+      } : (e, unknown) => {
+        store.handlers._updateInputHandler(inputState, e, unknown);
       };
     }
     if (element) {
@@ -651,20 +714,26 @@ const GInput = React.forwardRef(({
     }
     return React.createElement("input", _props);
   }, [inputState, element]);
-  const _fetchDeps = React.useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);
+  const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
+  const stableFetchDeps = React.useMemo(() => JSON.stringify(_fetchDeps), [_fetchDeps]);
   React.useEffect(() => {
     if (fetch) {
-      inputState.dispatchChanges = changes => _dispatchChanges(changes, formKey);
       _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 GInput = React.memo(_GInput);
 
 exports.GForm = GForm;
 exports.GInput = GInput;
 exports.GValidator = GValidator;
+exports.useFormSelector = useFormSelector;
 //# sourceMappingURL=gform-react.development.js.map