react-f0rm 0.7.0 → 0.9.0

package/dist/index.umd.js

@@ -263,18 +263,21 @@
     const { emitter, values, deleted } = form;
     values.set(path.key, value);
     reviveBranch(deleted, path);
+    pruneDirtyBaselines(form, path);
+    if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
     bumpDirtyVersion(form);
     if (options?.shouldTouch) setTouchedByPath(form, path);
     if (options?.shouldValidate) form.validators.get(path.key)?.();
     emit(emitter, "change", path);
   }
-  function changeValue(form, name, value) {
-    changeValueByPath(form, create$1(name), value);
+  function changeValue(form, name, value, options) {
+    changeValueByPath(form, create$1(name), value, options);
   }
-  function changeValueByPath(form, path, value) {
+  function changeValueByPath(form, path, value, options) {
+    if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
     const change = form.changeHandlers.get(path.key);
     if (change) change(value);
-    else setValueByPath(form, path, value);
+    else setValueByPath(form, path, value, options);
   }
   function getError(form, name) {
     return getErrorByPath(form, create$1(name));
@@ -302,13 +305,15 @@
   }
   function getFieldState(form, name) {
     const path = create$1(name);
-    const { initialValues, values, touched, validating } = form;
+    const { values, touched, validating } = form;
     const live = values.get(path.key);
     return {
       value: getValueByPath(form, path),
       error: getErrorByPath(form, path),
       errors: getFieldErrorsByPath(form, path),
-      isDirty: values.has(path.key) && get(initialValues, path.value) !== live,
+      // Same rule as getDirtyFields, committed baselines included: the field
+      // is dirty while its live value differs from its effective baseline.
+      isDirty: values.has(path.key) && getDirtyBaseline(form, path.key, path.value) !== live,
       isTouched: touched.has(path.key),
       isValidating: validating.has(path.key)
     };
@@ -391,11 +396,39 @@
     });
     return dirty;
   }
-  function forEachDirtyField({ initialValues, values }, fn) {
-    for (const [key, value] of values) {
+  function forEachDirtyField(form, fn) {
+    for (const [key, value] of form.values) {
       const path = JSON.parse(key);
-      if (get(initialValues, path) !== value) fn(path.join("."));
+      if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
+    }
+  }
+  const dirtyBaselines = /* @__PURE__ */ new WeakMap();
+  function getDirtyBaseline(form, key, segments) {
+    const baselines = dirtyBaselines.get(form);
+    if (baselines?.has(key)) return baselines.get(key);
+    return get(form.initialValues, segments);
+  }
+  function setDirtyBaseline(form, { key }, value) {
+    let baselines = dirtyBaselines.get(form);
+    if (!baselines) {
+      baselines = /* @__PURE__ */ new Map();
+      dirtyBaselines.set(form, baselines);
     }
+    baselines.set(key, value);
+  }
+  function pruneDirtyBaselines(form, { key }) {
+    const baselines = dirtyBaselines.get(form);
+    if (!baselines?.size) return;
+    const stem = `${key.slice(0, -1)},`;
+    for (const baselineKey of baselines.keys()) {
+      if (baselineKey.startsWith(stem)) baselines.delete(baselineKey);
+    }
+  }
+  function clearDirtyBaselines(form, key) {
+    const baselines = dirtyBaselines.get(form);
+    if (!baselines) return;
+    if (key === void 0) baselines.clear();
+    else baselines.delete(key);
   }
   const dirtyFieldsCaches = /* @__PURE__ */ new WeakMap();
   function bumpDirtyVersion(form) {
@@ -444,6 +477,7 @@
     touched.delete(key);
     errors.delete(key);
     validating.delete(key);
+    clearDirtyBaselines(form, key);
     if (!hasLiveBranch(values, segments)) deleted.add(key);
     bumpDirtyVersion(form);
     emit(emitter, "change");
@@ -477,6 +511,7 @@
     form.parsedValues = void 0;
     form.values.clear();
     form.deleted.clear();
+    clearDirtyBaselines(form);
     bumpDirtyVersion(form);
     emit(form.emitter, "change");
   }
@@ -491,6 +526,7 @@
     const { emitter, touched, values, deleted, validating } = form;
     values.clear();
     deleted.clear();
+    clearDirtyBaselines(form);
     if (!options?.keepTouched) touched.clear();
     validating.clear();
     if (!options?.keepIsSubmitting) form.isSubmitting = false;
@@ -512,6 +548,7 @@
     const path = create$1(name);
     const { emitter, values, touched, errors, deleted } = form;
     values.delete(path.key);
+    clearDirtyBaselines(form, path.key);
     if (form.parsedValues !== void 0) {
       form.parsedValues = unset(form.parsedValues, path.value);
       const initial = get(form.initialValues, path.value);
@@ -537,16 +574,13 @@
     const settle = () => waitUntil(
       form.emitter,
       "validating",
-      () => !form.validating.size,
+      () => fieldsSettled(form),
       () => false
     );
     if (name === void 0) {
       form.validators.forEach((validator) => validator());
       await settle();
-      if (form.validate) {
-        const result = await form.validate(getValues(form));
-        applyValidateResult(form, result);
-      }
+      if (form.validate) await runFormValidate(form);
       return !hasErrors(form);
     }
     const keys = typeof name === "string" || isSegmentsPath(name) ? [create$1(name).key] : name.map((one) => create$1(one).key);
@@ -589,19 +623,110 @@
     }
     setFormErrors(form, result);
   }
+  const FORM_VALIDATING_KEY = "__form_validate__";
+  function fieldsSettled(form) {
+    for (const key of form.validating) {
+      if (key !== FORM_VALIDATING_KEY) return false;
+    }
+    return true;
+  }
+  const SETTLED = /* @__PURE__ */ Symbol("form-validate-settled");
+  const formValidateStates = /* @__PURE__ */ new WeakMap();
+  function getFormValidateState(form) {
+    let state = formValidateStates.get(form);
+    if (!state) {
+      state = {
+        timer: null,
+        controller: null,
+        round: null,
+        marked: false,
+        waiters: []
+      };
+      formValidateStates.set(form, state);
+    }
+    return state;
+  }
+  function runFormValidate(form) {
+    const validate2 = form.validate;
+    if (!validate2) return Promise.resolve();
+    const debounce = form.validateDebounce ?? 0;
+    if (debounce <= 0) {
+      const controller = new AbortController();
+      return Promise.resolve(
+        validate2(getValues(form), { form, signal: controller.signal })
+      ).then((result) => {
+        applyValidateResult(form, result);
+      });
+    }
+    const state = getFormValidateState(form);
+    if (state.timer !== null) clearTimeout(state.timer);
+    else {
+      state.marked = true;
+      form.validating.add(FORM_VALIDATING_KEY);
+      emit(form.emitter, "validating");
+    }
+    state.timer = setTimeout(() => {
+      state.timer = null;
+      const round = state.round = {};
+      runFormValidateRound(form, state, round).then(
+        () => settleFormValidate(form, state, round, SETTLED),
+        (error) => settleFormValidate(form, state, round, error)
+      );
+    }, debounce);
+    return new Promise((resolve, reject) => {
+      state.waiters.push({ resolve, reject });
+    });
+  }
+  function runFormValidateRound(form, state, round) {
+    const validate2 = form.validate;
+    if (!validate2) return Promise.resolve();
+    state.controller?.abort();
+    const controller = state.controller = new AbortController();
+    let outcome;
+    try {
+      outcome = Promise.resolve(
+        validate2(getValues(form), { form, signal: controller.signal })
+      );
+    } catch (error) {
+      outcome = Promise.reject(error);
+    }
+    return outcome.then(
+      (result) => {
+        if (state.round === round) applyValidateResult(form, result);
+      },
+      (error) => {
+        if (state.round === round) throw error;
+      }
+    );
+  }
+  function settleFormValidate(form, state, round, outcome) {
+    if (state.round !== round) return;
+    state.round = null;
+    if (state.timer !== null) return;
+    if (state.marked) {
+      state.marked = false;
+      form.validating.delete(FORM_VALIDATING_KEY);
+      emit(form.emitter, "validating");
+    }
+    const waiters = state.waiters;
+    state.waiters = [];
+    for (const waiter of waiters) {
+      if (outcome === SETTLED) waiter.resolve();
+      else waiter.reject(outcome);
+    }
+  }
   async function ensureValidate(form) {
     form.validators.forEach((validator) => validator());
     await waitUntil(
       form.emitter,
       "validating",
-      () => !form.validating.size,
+      () => fieldsSettled(form),
       () => hasErrors(form)
     ).catch(() => {
       throw new Error(getFirstError(form));
     });
     if (form.validate) {
-      const result = await form.validate(getValues(form));
-      applyValidateResult(form, result);
+      await runFormValidate(form);
       if (hasErrors(form)) throw new Error(getFirstError(form));
     }
   }
@@ -1139,6 +1264,24 @@
   function useIsSubmitting(form) {
     return useWatch(form.emitter, "submitting", () => form.isSubmitting);
   }
+  function useCanSubmit(form) {
+    const { emitter } = form;
+    const subscribeFactory = React.useCallback(
+      (invalidate) => {
+        const offErrors = on(emitter, "errors", invalidate);
+        const offSubmitting = on(emitter, "submitting", invalidate);
+        return () => {
+          offErrors();
+          offSubmitting();
+        };
+      },
+      [emitter]
+    );
+    return useWatchCore(
+      subscribeFactory,
+      () => !form.isSubmitting && !hasErrors(form)
+    );
+  }
   function useSubmitCount(form) {
     return useWatch(form.emitter, "submitCount", () => form.submitCount);
   }
@@ -1811,6 +1954,7 @@
   exports.subscribe = subscribe;
   exports.trigger = trigger;
   exports.unsetValidatingByPath = unsetValidatingByPath;
+  exports.useCanSubmit = useCanSubmit;
   exports.useCheckboxGroupContext = useCheckboxGroupContext;
   exports.useDirtyFields = useDirtyFields;
   exports.useError = useError;