synapse-react-client/dist/components/file/upload/UploadFilePanel.js

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

import { jsxs as n, Fragment as p, jsx as e } from "react/jsx-runtime";
import v from "@mui/material/Link";
import F from "@mui/material/Stack";
import f from "@mui/material/Typography";
import { useRef as m, useState as T } from "react";
import { SynapseSpinner as D } from "../../LoadingScreen/LoadingScreen.js";
import S from "@mui/material/Menu";
import U from "@mui/material/Fade";
import u from "@mui/material/MenuItem";
const w = {
  pointerEvents: "none",
  filter: "opacity(33%)"
};
function P(g) {
  const {
    onUploadFileList: o,
    allowMultipleFiles: r,
    isLoading: a = !1,
    loadingText: h = "Loading...",
    disabled: y = !1,
    message: k,
    disableDragAndDrop: x = !1
  } = g, t = m(null), s = m(null), [d, c] = T(null), C = !!d, b = (l) => {
    r ? c(l.currentTarget) : t.current.click();
  }, i = () => {
    c(null);
  };
  return /* @__PURE__ */ n(
    F,
    {
      sx: {
        py: 3,
        gap: 1,
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        border: "1px dashed #D9D9D9",
        backgroundColor: "grey.100",
        textAlign: "center",
        ...y ? w : {}
      },
      children: [
        a && /* @__PURE__ */ n(p, { children: [
          /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(D, { size: 40 }) }),
          /* @__PURE__ */ e(
            f,
            {
              variant: "smallText1",
              sx: {
                my: 2
              },
              children: h
            }
          )
        ] }),
        !a && /* @__PURE__ */ n(p, { children: [
          /* @__PURE__ */ e(
            "img",
            {
              src: "https://s3.us-east-1.amazonaws.com/static.synapse.org/images/upload_illustration.svg"
            }
          ),
          /* @__PURE__ */ e(
            "input",
            {
              type: "file",
              id: "filesToUpload",
              name: "file upload",
              style: { display: "none" },
              "aria-hidden": "true",
              multiple: r,
              ref: t,
              onChange: (l) => {
                l.target.files != null && o(l.target.files);
              }
            }
          ),
          /* @__PURE__ */ e(
            "input",
            {
              type: "file",
              id: "folderToUpload",
              name: "folder upload",
              style: { display: "none" },
              "aria-hidden": "true",
              ref: s,
              onChange: (l) => {
                l.target.files != null && o(l.target.files);
              },
              webkitdirectory: "true"
            }
          ),
          /* @__PURE__ */ n(
            f,
            {
              variant: "body1",
              sx: {
                my: 2
              },
              children: [
                /* @__PURE__ */ e(v, { onClick: b, children: "Click to upload" }),
                !x && " or drag and drop"
              ]
            }
          ),
          /* @__PURE__ */ n(
            S,
            {
              anchorEl: d,
              open: C,
              onClose: i,
              anchorOrigin: { vertical: "bottom", horizontal: "left" },
              transformOrigin: { vertical: "top", horizontal: "left" },
              slots: {
                transition: U
              },
              children: [
                /* @__PURE__ */ e(
                  u,
                  {
                    onClick: () => {
                      i(), t.current.click();
                    },
                    children: "Files"
                  }
                ),
                /* @__PURE__ */ e(
                  u,
                  {
                    onClick: () => {
                      i(), s.current.click();
                    },
                    children: "Folder"
                  }
                )
              ]
            }
          ),
          k
        ] })
      ]
    }
  );
}
export {
  P as default
};
//# sourceMappingURL=UploadFilePanel.js.map