synapse-react-client/dist/components/DynamicForm/DynamicForm.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { useState as P } from "react";
import { useQuery as d, useMutation as B } from "@tanstack/react-query";
import O from "@rjsf/mui";
import $ from "@rjsf/validator-ajv8";
import { displayToast as f } from "../ToastMessage/ToastMessage.js";
import { Box as a, Typography as z, Alert as A, Button as y } from "@mui/material";
import "@mui/material/Skeleton";
import "lodash-es";
import { SkeletonParagraph as K } from "../Skeleton/SkeletonParagraph.js";
function W(g) {
  const {
    schemaUrl: i,
    uiSchemaUrl: m,
    postUrl: S,
    mutateFormDataBeforePost: c,
    onCancel: u,
    onSubmit: p
  } = g, [b, x] = P({}), h = (r) => ({
    queryFn: async () => {
      const o = await fetch(r);
      if (!o.ok)
        throw new Error("Error fetching schema");
      return o.json();
    }
  }), {
    data: E,
    status: F,
    isError: w,
    error: D
  } = d({
    ...h(i),
    queryKey: ["DynamicForm", "schema", i]
  }), {
    data: v,
    status: U,
    isError: j,
    error: C
  } = d({
    ...h(m),
    queryKey: ["DynamicForm", "uiSchema", m]
  }), { mutate: T, isPending: l } = B({
    mutationFn: async (r) => {
      const o = c ? c(r) : r, s = await fetch(S, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json"
        },
        body: JSON.stringify(o)
      });
      if (!s.ok) {
        const q = await s.text();
        throw new Error(q);
      }
      return s.json();
    },
    onSuccess: () => {
      f("Form submitted successfully!", "success"), p && p();
    },
    onError: (r) => {
      f(`Error submitting form: ${r.message}`, "danger");
    }
  }), k = (r) => {
    T(r);
  };
  if (F == "pending" || U == "pending")
    return /* @__PURE__ */ n(a, { children: [
      /* @__PURE__ */ e(z, { variant: "body1", children: "Loading form..." }),
      /* @__PURE__ */ e(K, { numRows: 20, rowHeight: "40px" })
    ] });
  const t = [];
  return w && t.push(`Unable to retrieve schema: ${D.message}`), j && t.push(`Unable to retrieve UI schema: ${C.message}`), t.length > 0 ? /* @__PURE__ */ n(A, { severity: "error", children: [
    "Unable to retrieve schema(s):",
    " ",
    t.map((r) => /* @__PURE__ */ e(a, { children: r }, r))
  ] }) : /* @__PURE__ */ e(a, { sx: { p: "30px 10px" }, children: /* @__PURE__ */ e(
    O,
    {
      schema: E,
      uiSchema: v,
      formData: b,
      validator: $,
      onChange: ({ formData: r }) => x(r),
      onSubmit: ({ formData: r }) => k(r),
      disabled: l,
      children: /* @__PURE__ */ n(a, { sx: { display: "flex", gap: "10px", justifyContent: "flex-end" }, children: [
        u && /* @__PURE__ */ e(
          y,
          {
            variant: "outlined",
            color: "primary",
            size: "large",
            onClick: u,
            children: "Cancel"
          }
        ),
        /* @__PURE__ */ e(
          y,
          {
            type: "submit",
            variant: "contained",
            color: "primary",
            size: "large",
            disabled: l,
            children: "Submit"
          }
        )
      ] })
    }
  ) });
}
export {
  W as default
};
//# sourceMappingURL=DynamicForm.js.map