react-forminate/dist/index-G1NXbaM4.js

React.js + Typescript package that creates dynamic UI forms based on the JSON schema

import { a as A, j as l } from "./index-BPZpMa2Y.js";
import L, { useState as I, useEffect as P, useCallback as b, useMemo as k } from "react";
const C = (e) => e instanceof File, O = (e) => !!e && typeof e == "object" && "name" in e, R = ({ file: e, previewUrl: f, storageFormat: d, onRemove: r }) => {
  if (!e) return null;
  const y = () => {
    if (d === "blobUrl" || d === "base64") {
      const c = f || (typeof e == "string" ? e : null);
      return c ? /* @__PURE__ */ l.jsx("img", { src: c, alt: "File preview" }) : null;
    }
    return C(e) ? /* @__PURE__ */ l.jsx("span", { children: e.name }) : O(e) ? /* @__PURE__ */ l.jsx("span", { children: e.name }) : typeof e == "string" ? /* @__PURE__ */ l.jsx("span", { children: e }) : null;
  };
  return /* @__PURE__ */ l.jsxs("div", { className: "file-preview", children: [
    y(),
    r && /* @__PURE__ */ l.jsx("button", { type: "button", onClick: r, className: "remove-file", children: "Remove" })
  ] });
}, E = (e) => {
  const {
    eventHandlers: f,
    fieldParams: d,
    fieldValue: r = null,
    isTouched: y,
    setValue: c
  } = A(e), i = e.storageFormat || "file", [u, j] = I([]), { htmlHandlers: U, customHandlers: m } = f;
  P(() => () => {
    u.forEach((t) => URL.revokeObjectURL(t));
  }, [u]);
  const h = b(
    async (t) => ({
      file: async () => t,
      fileList: async () => [t],
      base64: async () => new Promise((n) => {
        const a = new FileReader();
        a.onload = () => n(a.result), a.readAsDataURL(t);
      }),
      blobUrl: async () => URL.createObjectURL(t),
      arrayBuffer: async () => new Promise((n) => {
        const a = new FileReader();
        a.onload = () => n(a.result), a.readAsArrayBuffer(t);
      }),
      remoteUrl: async () => `https://example.com/uploads/${t.name}`,
      metadata: async () => ({
        name: t.name,
        type: t.type,
        size: t.size,
        lastModified: t.lastModified
      })
    })[i](),
    [i]
  ), F = b(
    async (t) => {
      if (!t.target.files?.length) return;
      const s = Array.from(t.target.files), n = await Promise.all(s.map(h));
      ["base64", "blobUrl"].includes(i) && j(s.map((o) => URL.createObjectURL(o)));
      const a = i === "fileList" ? t.target.files : n.length === 1 ? n[0] : n;
      c(e.fieldId, a), m?.onUpload?.(n, e.fieldId);
    },
    [h, i, c, e.fieldId, m]
  ), p = b(
    (t) => {
      const s = Array.isArray(r), n = s ? [r[t]] : [r], a = s ? r.filter((o, v) => v !== t) : null;
      n.forEach((o) => {
        i === "blobUrl" && typeof o == "string" && URL.revokeObjectURL(o);
      }), c(e.fieldId, a), j(
        (o) => s ? o.filter((v, x) => x !== t) : []
      ), m?.onRemove?.(n[0], e.fieldId);
    },
    [r, i, c, e.fieldId, m]
  ), w = k(
    () => Array.isArray(e.accept) ? e.accept.join(",") : e.accept,
    [e.accept]
  ), g = () => r ? Array.isArray(r) ? r.map((t, s) => /* @__PURE__ */ l.jsx(
    R,
    {
      file: t,
      previewUrl: u[s],
      storageFormat: i,
      onRemove: () => p(s)
    },
    `${e.fieldId}-${s}`
  )) : typeof r == "object" && !Object.keys(r).length ? null : /* @__PURE__ */ l.jsx(
    R,
    {
      file: r,
      previewUrl: u[0],
      storageFormat: i,
      onRemove: () => p()
    }
  ) : null;
  return /* @__PURE__ */ l.jsxs("div", { className: "file-input-container", children: [
    /* @__PURE__ */ l.jsx(
      "input",
      {
        ...d,
        ...U,
        type: "file",
        onChange: F,
        accept: w,
        multiple: e.multiple,
        "data-touched": y
      }
    ),
    /* @__PURE__ */ l.jsx("div", { className: "file-previews", children: g() })
  ] });
}, V = L.memo(E);
export {
  V as default
};