@reportportal/ui-kit 0.0.1-alpha.92 → 0.0.1-alpha.94

package/dist/fileDropArea.js

@@ -0,0 +1,353 @@
+import { jsx as f, jsxs as F } from "react/jsx-runtime";
+import { c as h } from "./bind-06a7ff84.js";
+import { useState as C, useCallback as d, useRef as A, createContext as L, useMemo as z, useContext as M } from "react";
+import { g as k, A as B } from "./index-b073dd45.js";
+import { B as S } from "./button-97d9e587.js";
+import w from "react-dropzone";
+import "./close-4d480ef7.js";
+import "./xls-995781cc.js";
+function P(e) {
+  return Number.isSafeInteger(e) && e >= 0;
+}
+function U(e) {
+  return e != null && typeof e != "function" && P(e.length);
+}
+function Z(e) {
+  return e == null ? e === void 0 ? "[object Undefined]" : "[object Null]" : Object.prototype.toString.call(e);
+}
+function V(e) {
+  return ArrayBuffer.isView(e) && !(e instanceof DataView);
+}
+function $(e) {
+  return e !== null && typeof e == "object" && Z(e) === "[object Arguments]";
+}
+function W(e) {
+  const r = e == null ? void 0 : e.constructor, t = typeof r == "function" ? r.prototype : Object.prototype;
+  return e === t;
+}
+function X(e) {
+  return V(e);
+}
+function E(e) {
+  if (e == null)
+    return !0;
+  if (U(e))
+    return typeof e.splice != "function" && typeof e != "string" && (typeof Buffer > "u" || !Buffer.isBuffer(e)) && !X(e) && !$(e) ? !1 : e.length === 0;
+  if (typeof e == "object") {
+    if (e instanceof Map || e instanceof Set)
+      return e.size === 0;
+    const r = Object.keys(e);
+    return W(e) ? r.filter((t) => t !== "constructor").length === 0 : r.length === 0;
+  }
+  return !0;
+}
+const me = {
+  png: "image/png",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  csv: "text/csv",
+  txt: "text/plain",
+  zip: "application/zip",
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  xml: "application/xml",
+  html: "text/html",
+  javascript: "application/javascript",
+  json: "application/json",
+  css: "text/css",
+  php: "application/x-httpd-php",
+  har: "application/json",
+  rar: "application/vnd.rar",
+  tgz: "application/gzip",
+  taz: "application/x-compress",
+  tar: "application/x-tar",
+  gzip: "application/gzip",
+  plain: "text/plain",
+  image: "image/*",
+  jar: "application/java-archive",
+  gtar: "application/x-gtar",
+  kml: "application/vnd.google-earth.kml+xml"
+};
+var g = /* @__PURE__ */ ((e) => (e.INCORRECT_FILE_SIZE = "INCORRECT_FILE_SIZE", e.INCORRECT_FILE_FORMAT = "INCORRECT_FILE_FORMAT", e))(g || {});
+const q = (e, r) => {
+  const { maxFileSize: t, acceptFileMimeTypes: i = [] } = r, n = [];
+  if (t && e.size > t && n.push(g.INCORRECT_FILE_SIZE), !E(i)) {
+    const s = k(e.name);
+    i.some(
+      (o) => o.startsWith(".") ? s === o.slice(1) : e.type === o
+    ) || n.push(g.INCORRECT_FILE_FORMAT);
+  }
+  return n;
+}, I = (e, r) => E(e) ? null : {
+  [g.INCORRECT_FILE_SIZE]: r.incorrectFileSize,
+  [g.INCORRECT_FILE_FORMAT]: r.incorrectFileFormat
+}[e[0]], Y = 128, b = Y * 1024 * 1024, G = ({
+  maxFileSize: e = b,
+  acceptFileMimeTypes: r = [],
+  onFilesAdded: t
+}) => {
+  const [i, n] = C(null), s = d(
+    (a) => {
+      n(null);
+      const p = a.map((u) => ({
+        file: u,
+        validationErrors: q(u, { maxFileSize: e, acceptFileMimeTypes: r })
+      }));
+      t(p);
+      const m = p.find(
+        ({ validationErrors: u }) => !E(u)
+      );
+      m && n(m.validationErrors[0]);
+    },
+    [e, r, t]
+  ), l = d(
+    (a) => {
+      s(a);
+    },
+    [s]
+  ), o = d(
+    (a) => {
+      const { files: p } = a.currentTarget;
+      p && s([...p]), a.currentTarget.value = "";
+    },
+    [s]
+  ), c = d(() => {
+    n(null);
+  }, []);
+  return {
+    onDrop: l,
+    handleFileInputChange: o,
+    error: i,
+    clearError: c
+  };
+}, H = ({
+  maxFileSize: e = b,
+  acceptFileMimeTypes: r = [],
+  onFilesAdded: t
+}) => {
+  const { onDrop: i, handleFileInputChange: n, error: s, clearError: l } = G({
+    maxFileSize: e,
+    acceptFileMimeTypes: r,
+    onFilesAdded: t
+  }), o = d(() => {
+    l();
+  }, [l]);
+  return {
+    error: s,
+    onDrop: i,
+    handleDropzoneClick: o,
+    handleFileInputChange: n,
+    clearError: l
+  };
+}, J = ({ isOverlay: e = !1 }) => {
+  const [r, t] = C(!1), i = A(null), n = d((a) => {
+    var p;
+    a.preventDefault(), (p = a.dataTransfer) != null && p.types.includes("Files") && t(!0);
+  }, []), s = d((a) => {
+    a.preventDefault(), i.current && !i.current.contains(a.relatedTarget) && t(!1);
+  }, []), l = d((a) => {
+    a.preventDefault();
+  }, []), o = d((a) => {
+    a.preventDefault(), t(!1);
+  }, []);
+  return {
+    handlers: e ? {
+      ref: i,
+      onDragEnter: n,
+      onDragLeave: s,
+      onDragOver: l,
+      onDrop: o
+    } : {},
+    ...e && { isDragActive: r }
+  };
+}, y = L(null);
+y.displayName = "FileDropAreaContext";
+const K = ({
+  children: e,
+  ...r
+}) => {
+  const t = A(null), i = d((l) => {
+    t.current = l;
+  }, []), n = d(() => {
+    r.isDisabled || !t.current || (r.clearError(), t.current());
+  }, [r]), s = z(
+    () => ({ ...r, registerOpenFunction: i, openFileDialog: n }),
+    [r, i, n]
+  );
+  return /* @__PURE__ */ f(y.Provider, { value: s, children: e });
+}, v = () => {
+  const e = M(y);
+  if (!e)
+    throw new Error("useFileDropAreaContext must be used within a FileDropAreaProvider");
+  return e;
+}, Q = ({
+  children: e,
+  className: r,
+  variant: t = "text",
+  ...i
+}) => {
+  const { openFileDialog: n, isDisabled: s } = v();
+  return /* @__PURE__ */ f(
+    S,
+    {
+      ...i,
+      variant: t,
+      adjustWidthOn: "content",
+      disabled: s,
+      className: r,
+      onClick: (o) => {
+        o.stopPropagation(), n();
+      },
+      children: e
+    }
+  );
+}, D = {
+  "file-drop-area": "_file-drop-area_1fufl_16",
+  "file-drop-area--active": "_file-drop-area--active_1fufl_27",
+  "file-drop-area--disabled": "_file-drop-area--disabled_1fufl_31",
+  "file-drop-area--error": "_file-drop-area--error_1fufl_35",
+  "file-drop-area__content": "_file-drop-area__content_1fufl_38",
+  "file-drop-area__icon": "_file-drop-area__icon_1fufl_45",
+  "file-drop-area__text": "_file-drop-area__text_1fufl_53",
+  "file-drop-area__description": "_file-drop-area__description_1fufl_59",
+  "file-drop-area__browse-button": "_file-drop-area__browse-button_1fufl_72",
+  "file-drop-area__file-size-info": "_file-drop-area__file-size-info_1fufl_75",
+  "file-drop-area__hidden-input": "_file-drop-area__hidden-input_1fufl_79",
+  "file-drop-area__error-message": "_file-drop-area__error-message_1fufl_82",
+  "file-drop-area--overlay": "_file-drop-area--overlay_1fufl_88",
+  "file-drop-area--overlay-mode": "_file-drop-area--overlay-mode_1fufl_106"
+}, ee = h.bind(D), re = ({ className: e }) => {
+  const { error: r, messages: t } = v();
+  return r ? /* @__PURE__ */ f(
+    "div",
+    {
+      className: ee("file-drop-area__error-message", e),
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      children: I([r], t) || r
+    }
+  ) : null;
+}, _ = h.bind(D), te = ({ icon: e, description: r, fileSizeMessage: t, className: i }) => {
+  const {
+    variant: n = "default",
+    error: s,
+    isDisabled: l,
+    isMultipleFiles: o,
+    overlayProps: c,
+    onDrop: a,
+    handleDropzoneClick: p,
+    registerOpenFunction: m
+  } = v(), u = n === "overlay";
+  return /* @__PURE__ */ f(w, { multiple: o, disabled: l, noClick: u, onDrop: a, children: ({ getRootProps: R, getInputProps: T, isDragActive: N, open: O }) => {
+    m(O);
+    const j = u ? !!(c != null && c.isDragActive) : N;
+    return /* @__PURE__ */ F(
+      "div",
+      {
+        ...R({
+          className: _("file-drop-area", i, {
+            "file-drop-area--active": j,
+            "file-drop-area--disabled": l,
+            "file-drop-area--error": !!s,
+            "file-drop-area--overlay-mode": u
+          }),
+          onClick: u ? void 0 : p
+        }),
+        children: [
+          /* @__PURE__ */ f("input", { ...T() }),
+          /* @__PURE__ */ F("div", { className: _("file-drop-area__content"), children: [
+            /* @__PURE__ */ f("div", { className: _("file-drop-area__icon"), children: e }),
+            /* @__PURE__ */ F("div", { className: _("file-drop-area__text"), children: [
+              r && /* @__PURE__ */ f("div", { className: _("file-drop-area__description"), children: r }),
+              t && /* @__PURE__ */ f("div", { className: _("file-drop-area__file-size-info"), children: t })
+            ] })
+          ] })
+        ]
+      }
+    );
+  } });
+}, oe = {
+  "attached-files-list": "_attached-files-list_lg6ri_16"
+}, ie = h.bind(oe), ne = ({
+  files: e,
+  className: r,
+  onRemoveFile: t,
+  onDownloadFile: i
+}) => {
+  const { messages: n } = v(), s = d(
+    (o) => () => t(o.id),
+    [t]
+  ), l = d(
+    (o) => () => i == null ? void 0 : i(o),
+    [i]
+  );
+  return E(e) ? null : /* @__PURE__ */ f("div", { className: ie("attached-files-list", r), children: e.map((o) => {
+    const c = I(
+      o.validationErrors ?? [],
+      n
+    ), a = !o.isUploadFailed && c;
+    return /* @__PURE__ */ f(
+      B,
+      {
+        fileName: o.fileName,
+        size: o.size,
+        uploadingProgress: o.uploadingProgress,
+        isUploadFailed: o.isUploadFailed || !!c,
+        isUploading: o.isUploading,
+        onRemove: s(o),
+        ...a && { uploadFailedMessage: c },
+        ...i && { onDownload: l(o) }
+      },
+      o.id
+    );
+  }) });
+}, ae = h.bind(D), x = ({
+  maxFileSize: e,
+  acceptFileMimeTypes: r,
+  isMultipleFiles: t,
+  isDisabled: i,
+  variant: n = "default",
+  children: s,
+  messages: l,
+  onFilesAdded: o
+}) => {
+  const c = n === "overlay", a = H({
+    maxFileSize: e,
+    acceptFileMimeTypes: r,
+    messages: l,
+    isMultipleFiles: t,
+    isDisabled: i,
+    onFilesAdded: o
+  }), p = J({
+    isOverlay: c
+  });
+  return /* @__PURE__ */ f(
+    K,
+    {
+      ...a,
+      variant: n,
+      messages: l,
+      overlayProps: p,
+      isDisabled: i,
+      isMultipleFiles: t,
+      children: (() => c ? /* @__PURE__ */ f("div", { className: ae("file-drop-area--overlay"), ...p.handlers, children: s }) : s)()
+    }
+  );
+};
+x.DropZone = te;
+x.BrowseButton = Q;
+x.Error = re;
+x.AttachedFilesList = ne;
+export {
+  x as FileDropArea,
+  me as MIME_TYPES
+};