reactjs-use-form/dist/index.js

Reactive form management and input field validation hook

import { useMemo as E, useState as g, useRef as V, useEffect as U, useCallback as F } from "react";
const I = { hasError: !1, message: "" }, z = { hasError: !0, message: "This field is required" };
function m(t, e) {
  const r = Object.keys(t), i = Object.keys(e);
  if (r.length !== i.length) return !1;
  for (const n of r)
    if (t[n] !== e[n]) return !1;
  return !0;
}
function B(t, e) {
  const r = Object.keys(t), i = Object.keys(e);
  if (r.length !== i.length) return !1;
  for (const n of r) {
    const o = t[n], s = e[n];
    if (o.hasError !== s.hasError || o.message !== s.message)
      return !1;
  }
  return !0;
}
function G(t) {
  const e = {};
  for (const r in t)
    e[r] = t[r].value;
  return e;
}
function H(t) {
  const e = {};
  for (const r in t)
    e[r] = I;
  return e;
}
function J(t) {
  const e = {};
  for (const r in t)
    e[r] = !1;
  return e;
}
function K(t) {
  const e = {};
  for (const r in t)
    e[r] = t[r].required;
  return e;
}
function P(t, e, r, i) {
  if (r.required && !e)
    return z;
  if (r.validator && e) {
    const n = r.validator(e, i);
    if (n)
      return { hasError: !0, message: n };
  }
  return I;
}
function W(t, e, r, i) {
  let n = !1, o = i;
  for (const s in t)
    if (t[s]) {
      const k = e[s], l = r[s], y = P(s, k, l, e);
      (y.message !== i[s].message || y.hasError !== i[s].hasError) && (n || (o = { ...i }, n = !0), o[s] = y);
    }
  return o;
}
function X(t) {
  for (const e in t)
    if (t[e].hasError) return !0;
  return !1;
}
function Y(t, e) {
  for (const r in e)
    if (e[r] && !t[r]) return !0;
  return !1;
}
function $(t, e) {
  const r = E(() => G(t), [t]), i = E(() => H(t), [t]), n = E(() => J(t), [t]), o = E(() => K(t), [t]), [s, k] = g(r), [l, y] = g(i), [c, R] = g(n), [C, p] = g(!1), [j, S] = g(!1), [v, q] = g(!1), D = V(s), b = V(c), T = E(() => {
    for (const a in c)
      if (c[a]) return !0;
    return !1;
  }, [c]), d = E(() => X(l) || Y(s, o), [l, s, o]), _ = E(() => !v || d, [v, d]);
  U(() => {
    if (!v) return;
    const a = !m(D.current, s), u = !m(b.current, c);
    if (a || u) {
      const f = W(c, s, t, l);
      B(l, f) || y(f), D.current = s, b.current = c;
    }
  }, [s, c, t, l, v]);
  const x = F(
    (a) => {
      const u = a.target.name, f = a.target.value;
      if (!t[u]) return;
      const h = s[u], w = c[u];
      h === f && w || (q(!0), k((O) => ({
        ...O,
        [u]: f
      })), w || R((O) => ({
        ...O,
        [u]: !0
      })));
    },
    [t, s, c]
  ), A = F(
    async (a) => {
      if (a.preventDefault(), !d) {
        S(!0);
        try {
          await e(s), p(!0), R(n);
        } catch (u) {
          throw console.error("Form submission error:", u), u;
        } finally {
          S(!1);
        }
      }
    },
    [d, e, s, n]
  ), L = F(() => {
    k(r), y(i), R(n), p(!1), S(!1), q(!1), D.current = r, b.current = n;
  }, [r, i, n]), Q = F(
    (a) => {
      var f;
      const u = (f = t[a]) == null ? void 0 : f.value;
      k((h) => ({ ...h, [a]: u })), y((h) => ({ ...h, [a]: I })), R((h) => ({ ...h, [a]: !1 }));
    },
    [t]
  );
  return {
    handleOnChange: x,
    handleOnSubmit: A,
    values: s,
    errors: l,
    isSubmitted: C,
    isSubmitting: j,
    isDisabled: _,
    isDirty: T,
    resetForm: L,
    resetField: Q
  };
}
export {
  $ as useForm
};