@codex-storage/marketplace-ui-components/dist/components/Upload/Upload.js

Marketplace UI components for Codex decentralized storage network.

import { jsxs as e, Fragment as F, jsx as s } from "react/jsx-runtime";
import { useRef as P } from "react";
import { attributes as E } from "../utils/attributes.js";
import { UploadFile as N } from "./UploadFile.js";
import { useUploadStategy as O } from "./useUploadStrategy.js";
import { classnames as R } from "../utils/classnames.js";
import '../../assets/Upload.css';function G({
  onMouseEnter: u,
  onMouseLeave: c,
  onClick: t,
  onFileChange: a,
  Icon: f,
  multiple: n = !0,
  editable: m = !0,
  onDeleteItem: l,
  onSuccess: g,
  codexData: h,
  successMessage: v = "File uploaded successfully"
  // useWorker = !!window.Worker,
}) {
  const { deleteFile: b, files: x, uploadFiles: d, warning: i } = O(
    n ? "multiple" : "single",
    m
  ), o = P(null), p = (r) => {
    r.stopPropagation(), r.preventDefault();
  }, y = (r) => {
    p(r), d(r.dataTransfer.files);
  }, U = (r) => {
    r.target.files && d(r.target.files), o.current && (o.current.value = ""), a == null || a(r);
  }, w = (r) => {
    b(r), l == null || l(r);
  }, j = () => {
    var r;
    t == null || t(), (r = o.current) == null || r.click();
  };
  return /* @__PURE__ */ e(F, { children: [
    /* @__PURE__ */ e(
      "div",
      {
        className: R(["upload"], ["upload--warning", !!i]),
        tabIndex: 1,
        onClick: j,
        onDragOver: p,
        onDragEnter: p,
        onDrop: y,
        onMouseEnter: u,
        onMouseLeave: c,
        children: [
          /* @__PURE__ */ e("div", { children: [
            /* @__PURE__ */ e("b", { children: [
              "Drop your ",
              n ? "file(s)" : "file",
              " here or",
              " ",
              /* @__PURE__ */ s("span", { children: "browse" })
            ] }),
            /* @__PURE__ */ e("small", { children: [
              " ",
              n ? "Up to 10 files" : "Choose one single file"
            ] })
          ] }),
          f && /* @__PURE__ */ s(f, {}),
          /* @__PURE__ */ s(
            "input",
            {
              "data-testid": "upload",
              type: "file",
              hidden: !0,
              ref: o,
              onChange: U,
              ...E({ multiple: n })
            }
          ),
          i && /* @__PURE__ */ s("span", { children: i })
        ]
      }
    ),
    x.map(({ id: r, file: D }) => /* @__PURE__ */ s(
      N,
      {
        file: D,
        onClose: () => w(r),
        id: r,
        onSuccess: g,
        codexData: h,
        successMessage: v
      },
      r
    ))
  ] });
}
export {
  G as Upload
};
//# sourceMappingURL=Upload.js.map