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

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

import { jsxs as t, jsx as r } from "react/jsx-runtime";
import { JsonSchemaForm as v } from "../JsonSchemaForm/JsonSchemaForm.js";
import { TextWidget as A } from "../SchemaDrivenAnnotationEditor/widget/TextWidget.js";
import { Box as f, Button as c, Collapse as T, TextField as E, Alert as V, AlertTitle as b, Typography as F } from "@mui/material";
import { useState as u, useMemo as I, useCallback as N } from "react";
import { transformErrors as j } from "../SchemaDrivenAnnotationEditor/AnnotationEditorUtils.js";
import D, { UseParseCsvError as k } from "./useParseCsv.js";
const y = { type: "string" };
function J(o = y) {
  return {
    $schema: "http://json-schema.org/draft-07/schema#",
    type: "array",
    items: o
  };
}
function U(o) {
  const {
    value: a = [],
    onChange: n,
    onSubmit: C,
    arrayItemDefinition: i = y,
    formRef: g
  } = o, [x, l] = u(!1), [s, d] = u(""), [m, h] = u([]), S = I(
    () => J(i),
    [i]
  ), { parse: p } = D({
    jsonSchemaDefinition: i
  }), w = N(async () => {
    if (s)
      try {
        const e = await p(s);
        n([...a, ...e]), h([]), d(""), l(!1);
      } catch (e) {
        if (e instanceof k)
          h(e.parseErrors);
        else
          throw e;
      }
  }, [n, s, a, p]);
  return /* @__PURE__ */ t(
    f,
    {
      className: "JsonSchemaFormContainer",
      sx: {
        // Hide the label/button to show more info
        ".JsonSchemaForm .LabelContainer": {
          display: "none",
          visibility: "hidden"
        }
      },
      children: [
        /* @__PURE__ */ r(
          v,
          {
            formRef: g,
            schema: S,
            noHtml5Validate: !0,
            uiSchema: {
              "ui:submitButtonOptions": {
                norender: !0
              }
            },
            formData: a,
            formContext: {
              allowRemovingLastItemInArray: !0
            },
            onChange: ({ formData: e }) => n(e),
            onSubmit: ({ formData: e }) => C(e),
            transformErrors: j,
            widgets: {
              TextWidget: A
            }
          }
        ),
        /* @__PURE__ */ r(c, { onClick: () => l(!0), children: "Paste new values" }),
        /* @__PURE__ */ t(T, { sx: { mt: 2 }, in: x, children: [
          /* @__PURE__ */ r(
            E,
            {
              multiline: !0,
              rows: 5,
              placeholder: "Place comma or tab delimited values here",
              value: s,
              onChange: (e) => d(e.target.value),
              slotProps: {
                input: { inputProps: { "aria-label": "CSV or TSV to Append" } }
              }
            }
          ),
          /* @__PURE__ */ t(
            f,
            {
              sx: {
                my: 1,
                display: "flex",
                justifyContent: "flex-end"
              },
              children: [
                /* @__PURE__ */ r(c, { onClick: () => l(!1), children: "Cancel" }),
                /* @__PURE__ */ r(
                  c,
                  {
                    onClick: () => {
                      w();
                    },
                    children: "Add"
                  }
                )
              ]
            }
          ),
          m && m.length > 0 && /* @__PURE__ */ t(V, { severity: "error", sx: { my: 2 }, children: [
            /* @__PURE__ */ r(b, { children: "Parsing errors encountered:" }),
            /* @__PURE__ */ r("ul", { children: m.map((e, P) => /* @__PURE__ */ t(
              F,
              {
                component: "li",
                variant: "smallText1",
                sx: {
                  lineHeight: 1.5
                },
                children: [
                  e.row ? `At ${e.row}: ` : "",
                  e.message
                ]
              },
              P
            )) })
          ] })
        ] })
      ]
    }
  );
}
export {
  U as default
};
//# sourceMappingURL=JSONArrayEditor.js.map