@effector-reform/react/dist/index.js

React bindings for effector composable forms

import { primitiveFieldSymbol as V, arrayFieldSymbol as M, isPrimitiveValue as F } from "@effector-reform/core";
import { useUnit as C, useProvidedScope as E } from "effector-react";
import { useMemo as y, useState as P, useEffect as R } from "react";
import { createWatch as U, scopeBind as w } from "effector";
function i(e, r) {
  return r ? r.getState(e) : e.getState();
}
function c(e, r) {
  return r ? w(e, { scope: r }) : e;
}
function B(e, r) {
  return {
    value: i(e.$value, r),
    error: i(e.$error, r),
    meta: i(e.$meta, r),
    isValid: i(e.$isValid, r),
    isFocused: i(e.$isFocused, r),
    onChangeError: c(e.changeError, r),
    onChange: c(e.change, r),
    onFocus: c(e.focus, r),
    onBlur: c(e.blur, r),
    onChangeMeta: c(e.changeMeta, r)
  };
}
function l(e, r) {
  const a = {}, t = (s) => i(s, r), o = (s) => c(s, r);
  for (const s in e) {
    const n = e[s];
    switch (n["@@type"]) {
      case M: {
        a[s] = {
          values: t(n.$values).map(
            (u) => F(u) ? u : l(u, r)
          ),
          meta: t(n.$meta),
          isValid: t(n.$isValid),
          error: t(n.$error),
          onChange: o(n.change),
          onChangeError: o(n.changeError),
          onReset: o(n.reset),
          onPush: o(n.push),
          onSwap: o(n.swap),
          onMove: o(n.move),
          onInsert: o(n.insert),
          onUnshift: o(n.unshift),
          onRemove: o(n.remove),
          onPop: o(n.pop),
          onReplace: o(n.replace),
          onChangeMeta: o(n.changeMeta)
        };
        break;
      }
      case V: {
        a[s] = {
          value: t(n.$value),
          error: t(n.$error),
          meta: t(n.$meta),
          isValid: t(n.$isValid),
          isFocused: t(n.$isFocused),
          onChangeMeta: o(n.changeMeta),
          onChangeError: o(n.changeError),
          onChange: o(n.change),
          onFocus: o(n.focus),
          onBlur: o(n.blur)
        };
        break;
      }
      default:
        a[s] = l(
          e[s],
          r
        );
    }
  }
  return a;
}
function I(e, r, a) {
  const t = [];
  for (const o of e)
    t.push(
      U({
        unit: o,
        fn: a,
        scope: r ?? void 0,
        batch: !0
      })
    );
  return {
    subscriptions: t,
    unsubscribe: () => {
      for (const o of t)
        o.unsubscribe();
    }
  };
}
function N(e) {
  return C(e), B(e, E());
}
function W(e) {
  const r = E(), {
    values: a,
    meta: t,
    changeMeta: o,
    change: s,
    changeError: n,
    reset: u,
    pop: g,
    push: m,
    replace: v,
    remove: d,
    swap: b,
    move: p,
    unshift: f,
    insert: h,
    ...S
  } = C(e);
  return {
    values: y(
      () => a.map(
        ($) => F($) ? $ : l($, r)
      ),
      [a]
    ),
    meta: t,
    onChangeMeta: o,
    onChange: s,
    onChangeError: n,
    onReset: u,
    onSwap: b,
    onMove: p,
    onUnshift: f,
    onInsert: h,
    onReplace: v,
    onRemove: d,
    onPop: g,
    onPush: m,
    ...S
  };
}
function j(e, r) {
  const a = E(), {
    values: t,
    errors: o,
    snapshot: s,
    forceUpdateSnapshot: n,
    submit: u,
    reset: g,
    clearOuterErrors: m,
    clearInnerErrors: v,
    validate: d,
    ...b
  } = C(e), [p, f] = P(
    () => l(e.fields, a)
  );
  return R(() => {
    const { unsubscribe: h } = I(
      [e.$values, e.$errors, e.metaChanged],
      a,
      () => f(l(e.fields, a))
    );
    return () => {
      h(), r != null && r.resetOnUnmount && g();
    };
  }, []), {
    values: t,
    errors: o,
    fields: p,
    snapshot: s,
    onSubmit: (h) => {
      h.preventDefault(), u();
    },
    onForceUpdateSnapshot: n,
    onReset: g,
    onValidate: d,
    onClearOuterErrors: m,
    onClearInnerErrors: v,
    ...b
  };
}
export {
  W as useArrayField,
  N as useField,
  j as useForm
};