@unicom-cloud/ui 0.8.67 → 0.8.68

package/upload/Upload.js

@@ -0,0 +1,627 @@
+import { jsxs as C, Fragment as T, jsx as t } from "react/jsx-runtime";
+import w from "lodash/isFunction";
+import re from "lodash/isNumber";
+import { useContext as D, forwardRef as j, useState as F, useEffect as R, isValidElement as le, useRef as K, useImperativeHandle as oe } from "react";
+import { a as V, I as ae } from "../chunk/ll867Bf3.js";
+import { u as se } from "../chunk/BFTV6myl.js";
+import { m as z } from "../chunk/JPPo5nY_.js";
+import { o as ce } from "../chunk/BKKEev13.js";
+import M from "../utils/warning.js";
+import { STATUS as g } from "./interface.js";
+import { b as de, P as W } from "../chunk/DzVH9IBy.js";
+import ue from "../image/ImagePreviewGroup.js";
+import G from "@unicom-cloud/icons/IconUiDelete";
+import me from "@unicom-cloud/icons/IconUiEye";
+import fe from "@unicom-cloud/icons/IconUiImageClose";
+import J from "@unicom-cloud/icons/IconUiUpload";
+import { l as Q } from "../chunk/CTxjmYmx.js";
+import { u as q } from "../chunk/XTEsYGuF.js";
+import "../chunk/D-TPB2Do.js";
+import he from "@unicom-cloud/icons/IconUiCheck";
+import ge from "@unicom-cloud/icons/IconUiPause";
+import Ue from "@unicom-cloud/icons/IconUiPlayArrowFill";
+import ve from "../progress/index.js";
+import S from "../tooltip/index.js";
+import A from "lodash/isPlainObject.js";
+import xe from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import Ie from "@unicom-cloud/icons/IconUiFile";
+import be from "@unicom-cloud/icons/IconUiFileAudio";
+import X from "@unicom-cloud/icons/IconUiFileImage";
+import $e from "@unicom-cloud/icons/IconUiFilePdf";
+import Pe from "@unicom-cloud/icons/IconUiFileVideo";
+import ye from "./Uploader.js";
+const Y = (e) => {
+  var b, f, s, o, U, x;
+  const m = q(), { file: d, prefixCls: c, progressProps: i, progressRender: r } = e, { locale: l } = D(V), { status: a, percent: P = 0 } = d, v = `${c}-list`, I = i && i.width ? { width: i.width } : {}, h = /* @__PURE__ */ C(T, { children: [
+    a === g.fail && e.reuploadIcon !== null && /* @__PURE__ */ t(
+      "span",
+      {
+        className: `${c}-list-reupload-icon`,
+        onClick: () => {
+          var n;
+          (n = e.onReupload) == null || n.call(e, d);
+        },
+        tabIndex: 0,
+        role: "button",
+        "aria-label": (b = l == null ? void 0 : l.Upload) == null ? void 0 : b.reupload,
+        ...m({
+          onPressEnter: () => {
+            var n;
+            (n = e.onReupload) == null || n.call(e, d);
+          }
+        }),
+        children: e.reuploadIcon || (e.listType === "picture-card" ? /* @__PURE__ */ t(J, {}) : (f = l == null ? void 0 : l.Upload) == null ? void 0 : f.reupload)
+      }
+    ),
+    a === g.success && e.successIcon !== null && /* @__PURE__ */ t("span", { className: `${c}-list-success-icon`, children: e.successIcon || /* @__PURE__ */ t(he, {}) }),
+    a !== g.success && /* @__PURE__ */ C("div", { className: `${v}-status`, style: I, children: [
+      /* @__PURE__ */ t(
+        ve,
+        {
+          showText: !1,
+          className: `${v}-progress`,
+          type: "circle",
+          status: a === g.fail ? "error" : a === g.success ? "success" : "normal",
+          percent: P,
+          size: "mini",
+          ...i
+        }
+      ),
+      a === g.init && e.startIcon !== null && /* @__PURE__ */ t(
+        "span",
+        {
+          tabIndex: 0,
+          role: "button",
+          "aria-label": (s = l == null ? void 0 : l.Upload) == null ? void 0 : s.start,
+          className: `${c}-list-start-icon`,
+          onClick: () => {
+            var n;
+            (n = e.onUpload) == null || n.call(e, d);
+          },
+          ...m({
+            onPressEnter: () => {
+              var n;
+              (n = e.onUpload) == null || n.call(e, d);
+            }
+          }),
+          children: e.startIcon || /* @__PURE__ */ t(S, { content: (o = l == null ? void 0 : l.Upload) == null ? void 0 : o.start, children: /* @__PURE__ */ t(Ue, {}) })
+        }
+      ),
+      a === g.uploading && e.cancelIcon !== null && /* @__PURE__ */ t(
+        "span",
+        {
+          className: `${e.prefixCls}-list-cancel-icon`,
+          onClick: () => {
+            var n;
+            (n = e.onAbort) == null || n.call(e, d);
+          },
+          tabIndex: 0,
+          "aria-label": (U = l == null ? void 0 : l.Upload) == null ? void 0 : U.cancel,
+          ...m({
+            onPressEnter: () => {
+              var n;
+              (n = e.onAbort) == null || n.call(e, d);
+            }
+          }),
+          children: e.cancelIcon || /* @__PURE__ */ t(S, { content: (x = l == null ? void 0 : l.Upload) == null ? void 0 : x.cancel, children: /* @__PURE__ */ t(ge, {}) })
+        }
+      )
+    ] })
+  ] });
+  return w(r) ? r(d, h) : h;
+}, Ce = (e, m) => {
+  const { disabled: d, prefixCls: c, file: i, showUploadList: r, locale: l } = e, a = q(), P = `${c}-list-item-picture`, { status: v, originFile: I } = i, [h, b] = F(i.url), f = A(r) ? r : {};
+  return R(() => {
+    if (i.url !== void 0)
+      b(i.url);
+    else {
+      const s = i.originFile;
+      s && Q(s).then((o) => {
+        b(o);
+      }).catch((o) => {
+        console.error(o);
+      }).finally(() => {
+      });
+    }
+    return () => {
+    };
+  }, [i.url, i.originFile]), R(() => {
+    var s;
+    return (s = e.onChange) == null || s.call(e, { type: "url", data: h }), () => {
+      var o;
+      (o = e.onChange) == null || o.call(e, { type: "url", data: void 0 });
+    };
+  }, [h]), /* @__PURE__ */ t("div", { className: P, ref: m, children: v === g.uploading ? /* @__PURE__ */ t(
+    Y,
+    {
+      onReupload: e.onReupload,
+      onUpload: e.onUpload,
+      onAbort: e.onAbort,
+      listType: "picture-card",
+      file: i,
+      prefixCls: c,
+      progressProps: e.progressProps,
+      ...f
+    }
+  ) : /* @__PURE__ */ C(T, { children: [
+    w(f.imageRender) ? f.imageRender(i) : /* @__PURE__ */ t("img", { src: h, alt: i.name }),
+    /* @__PURE__ */ C("div", { className: `${P}-mask`, role: "radiogroup", children: [
+      i.status === g.fail && /* @__PURE__ */ t("div", { className: `${P}-error-tip`, children: f.errorIcon !== null && /* @__PURE__ */ t("span", { className: `${c}-list-error-icon`, children: f.errorIcon || /* @__PURE__ */ t(fe, {}) }) }),
+      /* @__PURE__ */ C("div", { className: `${P}-operation`, children: [
+        i.status !== g.fail && f.previewIcon !== null && /* @__PURE__ */ t(
+          "span",
+          {
+            className: `${c}-list-preview-icon`,
+            tabIndex: 0,
+            role: "button",
+            "aria-label": l.Upload.preview,
+            ...a({
+              onPressEnter: () => {
+                var s;
+                (s = e.onPreview) == null || s.call(e, i);
+              }
+            }),
+            onClick: () => {
+              var s;
+              (s = e.onPreview) == null || s.call(e, i);
+            },
+            children: f.previewIcon || /* @__PURE__ */ t(me, {})
+          }
+        ),
+        i.status === g.fail && f.reuploadIcon !== null && /* @__PURE__ */ t(
+          "span",
+          {
+            className: `${e.prefixCls}-list-reupload-icon`,
+            onClick: () => {
+              var s;
+              (s = e.onReupload) == null || s.call(e, i);
+            },
+            tabIndex: 0,
+            role: "button",
+            "aria-label": l.Upload.reupload,
+            ...a({
+              onPressEnter: () => {
+                var s;
+                (s = e.onReupload) == null || s.call(e, i);
+              }
+            }),
+            children: f.reuploadIcon || /* @__PURE__ */ t(J, {})
+          }
+        ),
+        !d && f.removeIcon !== null && /* @__PURE__ */ t(
+          "span",
+          {
+            className: `${c}-list-remove-icon`,
+            onClick: () => {
+              var s;
+              (s = e.onRemove) == null || s.call(e, i);
+            },
+            role: "button",
+            "aria-label": l.Upload.delete,
+            tabIndex: 0,
+            ...a({
+              onPressEnter: () => {
+                var s;
+                (s = e.onRemove) == null || s.call(e, i);
+              }
+            }),
+            children: f.removeIcon || /* @__PURE__ */ t(G, {})
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}, Ne = j(Ce), we = (e) => {
+  let m = "";
+  if (e.originFile && e.originFile.type)
+    m = e.originFile.type;
+  else {
+    const c = (e.name || "").split(".").pop() || "";
+    m = c, ["png", "jpg", "jpeg", "bmp", "gif"].indexOf(c) > -1 ? m = "image" : ["mp4", "m2v", "mkv"].indexOf(c) > -1 ? m = "video" : ["mp3", "wav", "wmv"].indexOf(c) > -1 && (m = "audio");
+  }
+  return m.indexOf("image") > -1 ? X : m.indexOf("pdf") > -1 ? $e : m.indexOf("audio") > -1 ? be : m.indexOf("video") > -1 ? Pe : Ie;
+}, Le = (e, m) => {
+  const { prefixCls: d, disabled: c, file: i, locale: r } = e, l = `${d}-list-item-text`, a = q(), P = we(i), v = A(e.showUploadList) ? e.showUploadList : {}, I = A(v) ? v : {}, h = i.name || i.originFile && i.originFile.name, [b, f] = F(i.url);
+  let s = {};
+  return i.status !== g.fail && (s = {
+    popupVisible: !1
+  }), R(() => {
+    if (i.url !== void 0)
+      f(i.url);
+    else {
+      const o = i.originFile;
+      o && Q(o).then((U) => {
+        f(U);
+      }).catch((U) => {
+        console.error(U);
+      }).finally(() => {
+      });
+    }
+    return () => {
+    };
+  }, [i.url, i.originFile]), R(() => {
+    var o;
+    return (o = e.onChange) == null || o.call(e, { type: "url", data: b }), () => {
+      var U;
+      (U = e.onChange) == null || U.call(e, { type: "url", data: void 0 });
+    };
+  }, [b]), /* @__PURE__ */ C(
+    "div",
+    {
+      className: `${d}-list-item ${d}-list-item-${i.status}`,
+      ref: m,
+      children: [
+        /* @__PURE__ */ C("div", { className: l, children: [
+          e.listType === "picture-list" && /* @__PURE__ */ t("div", { className: `${l}-thumbnail`, children: w(v.imageRender) ? v.imageRender(i) : /* @__PURE__ */ t("img", { src: b }) }),
+          /* @__PURE__ */ C("div", { className: `${l}-content`, children: [
+            /* @__PURE__ */ C("div", { className: `${l}-name`, children: [
+              e.listType === "text" && I.fileIcon !== null && /* @__PURE__ */ t("span", { className: `${d}-list-file-icon`, children: I.fileIcon || /* @__PURE__ */ t(P, {}) }),
+              w(v.fileName) ? /* @__PURE__ */ t("span", { className: `${l}-name-text`, children: v.fileName(i) }) : i.url ? /* @__PURE__ */ t(
+                "a",
+                {
+                  href: i.url,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: `${l}-name-link`,
+                  children: h
+                }
+              ) : /* @__PURE__ */ t("span", { className: `${l}-name-text`, children: h }),
+              i.status === g.fail && I.errorIcon !== null && /* @__PURE__ */ t(
+                S,
+                {
+                  content: (typeof i.response == "object" ? le(i.response) && i.response : i.response) || r.Upload.error,
+                  ...s,
+                  disabled: i.status !== g.fail,
+                  children: /* @__PURE__ */ t("span", { className: `${e.prefixCls}-list-error-icon`, children: I.errorIcon || (e.listType === "picture-card" ? /* @__PURE__ */ t(X, {}) : /* @__PURE__ */ t(xe, {})) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t(
+              Y,
+              {
+                file: i,
+                prefixCls: d,
+                progressProps: e.progressProps,
+                onReupload: e.onReupload,
+                onUpload: e.onUpload,
+                onAbort: e.onAbort,
+                ...I
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: `${d}-list-item-operation`, children: !c && I.removeIcon !== null && /* @__PURE__ */ t(
+          ae,
+          {
+            className: `${d}-list-remove-icon-hover`,
+            onClick: () => {
+              var o;
+              (o = e.onRemove) == null || o.call(e, i);
+            },
+            tabIndex: 0,
+            "aria-label": r.Upload.delete,
+            ...a({
+              onPressEnter: () => {
+                var o;
+                (o = e.onRemove) == null || o.call(e, i);
+              }
+            }),
+            children: /* @__PURE__ */ t("span", { className: `${d}-list-remove-icon`, children: I.removeIcon || /* @__PURE__ */ t(G, {}) })
+          }
+        ) })
+      ]
+    }
+  );
+}, Fe = j(Le), Z = (e) => {
+  const { locale: m, rtl: d } = D(V), {
+    listType: c,
+    fileList: i,
+    renderUploadList: r,
+    renderUploadItem: l,
+    prefixCls: a,
+    ...P
+  } = e, [v, I] = F(-1), [h, b] = F([]);
+  if (w(r))
+    return /* @__PURE__ */ t("div", { className: `${a}-list`, children: r(i, P) });
+  const f = (o) => {
+    e.imagePreview && I(o);
+  };
+  function s(o, U, x) {
+    (o == null ? void 0 : o.type) === "url" && [g.init, g.success].indexOf(x.status) > -1 && b((n) => {
+      const N = [...n];
+      return N[U] = o.data, N.filter(Boolean);
+    });
+  }
+  return R(() => () => {
+  }, []), /* @__PURE__ */ C(T, { children: [
+    /* @__PURE__ */ t(
+      de,
+      {
+        className: z(
+          `${a}-list`,
+          `${a}-list-type-${c}`,
+          {
+            [`${a}-list-rtl`]: d
+          }
+        ),
+        children: i.map((o, U) => {
+          let x = c === "picture-card" ? /* @__PURE__ */ t(
+            "div",
+            {
+              className: `${a}-list-item ${a}-list-item-${o.status}`,
+              children: /* @__PURE__ */ t(
+                Ne,
+                {
+                  ...e,
+                  onPreview: (n) => {
+                    var N;
+                    f(U), (N = e.onPreview) == null || N.call(e, n);
+                  },
+                  file: o,
+                  locale: m,
+                  onChange: (n) => {
+                    s(n, U, o);
+                  }
+                }
+              )
+            }
+          ) : /* @__PURE__ */ t(
+            Fe,
+            {
+              ...e,
+              file: o,
+              locale: m,
+              onChange: (n) => {
+                s(n, U, o);
+              }
+            }
+          );
+          return w(l) && (x = l(x, o, i)), c === "picture-card" ? /* @__PURE__ */ t(
+            W,
+            {
+              timeout: { enter: 200, exit: 400 },
+              classNames: `${a}-slide-inline`,
+              onEntered: (n) => {
+                n && (n.style.width = "");
+              },
+              onExit: (n) => {
+                n && (n.style.width = `${n.scrollWidth}px`);
+              },
+              onExiting: (n) => {
+                n && (n.style.width = 0);
+              },
+              onExited: (n) => {
+                n && (n.style.width = 0);
+              },
+              children: x
+            },
+            o.uid
+          ) : /* @__PURE__ */ t(
+            W,
+            {
+              timeout: { enter: 200, exit: 400 },
+              classNames: `${a}-slide-up`,
+              onExit: (n) => {
+                n && (n.style.height = `${n.scrollHeight}px`);
+              },
+              onExiting: (n) => {
+                n && (n.style.height = 0);
+              },
+              onExited: (n) => {
+                n && (n.style.height = 0);
+              },
+              children: x
+            },
+            o.uid
+          );
+        })
+      }
+    ),
+    c === "picture-card" && e.imagePreview && /* @__PURE__ */ t(
+      ue,
+      {
+        srcList: h,
+        visible: v !== -1,
+        current: v,
+        onChange: f,
+        onVisibleChange: (o) => {
+          f(o ? v : -1);
+        }
+      }
+    )
+  ] });
+};
+Z.displayName = "FileList";
+const k = function(e) {
+  const m = [].concat(e || []).filter(Boolean);
+  return m.reduce((d, c, i) => {
+    if (c.uid) {
+      const r = m.findIndex(
+        (a) => c.uid === a.uid && c !== a
+      );
+      M(r !== -1, "[Upload]: duplicate uid");
+      const l = {
+        status: g.success,
+        percent: 100,
+        ...c
+      };
+      r === -1 ? d.push(l) : d.splice(r, 1, l);
+    } else {
+      M(!0, "[Upload]: uid is required");
+      const r = `${String(+/* @__PURE__ */ new Date())}${i}`;
+      d.push({
+        uid: r,
+        status: g.success,
+        percent: 100,
+        ...c
+      });
+    }
+    return d;
+  }, []);
+}, Re = {
+  listType: "text",
+  autoUpload: !0,
+  showUploadList: !0,
+  beforeUpload: () => !0,
+  method: "post"
+}, Ee = (e, m) => {
+  const { getPrefixCls: d, componentConfig: c, rtl: i } = D(V), r = se(
+    e,
+    Re,
+    c == null ? void 0 : c.Upload
+  ), l = d("upload"), a = K(), P = K(), [v, I] = F(() => "fileList" in r ? k(r.fileList) : "defaultFileList" in r ? k(r.defaultFileList) : []), h = "fileList" in r ? k(r.fileList) : v, b = (u, $) => {
+    var y;
+    "fileList" in r || I(u), (y = r.onChange) == null || y.call(r, u, $);
+  }, f = (u) => {
+    u && setTimeout(() => {
+      a.current && a.current.upload(u);
+    }, 0);
+  }, s = (u) => {
+    var $;
+    a.current && a.current.reupload(u), ($ = r.onReupload) == null || $.call(r, u);
+  }, o = (u) => {
+    if (u) {
+      const { onRemove: $ } = r;
+      Promise.resolve(
+        w($) ? $(u, h) : $
+      ).then((y) => {
+        y !== !1 && (a.current && a.current.abort(u), b(
+          h.filter((E) => E.uid !== u.uid),
+          u
+        ));
+      }).catch((y) => {
+        console.error(y);
+      });
+    }
+  }, U = (u) => {
+    u && a.current && a.current.abort(u);
+  };
+  oe(m, () => ({
+    submit: (u) => {
+      let $ = [];
+      u ? $ = [u] : $ = h.filter((y) => y.status === g.init), $.forEach((y) => {
+        f(y);
+      });
+    },
+    // file: fileList中的file对象
+    abort: (u) => {
+      U(u);
+    },
+    // file: fileList中的file对象
+    reupload: (u) => {
+      s(u);
+    },
+    getRootDOMNode: () => P.current
+  }));
+  const {
+    listType: x,
+    className: n,
+    style: N,
+    renderUploadItem: p,
+    showUploadList: H,
+    renderUploadList: ee,
+    progressProps: ie,
+    imagePreview: te,
+    ...ne
+  } = r, L = re(r.limit) ? { hideOnExceedLimit: !0, maxCount: r.limit } : { hideOnExceedLimit: !0, ...r.limit }, O = L.maxCount && L.maxCount <= h.length, _ = "disabled" in r ? r.disabled : !L.hideOnExceedLimit && O, B = /* @__PURE__ */ t(
+    "div",
+    {
+      ...ce(ne, [
+        "disabled",
+        "directory",
+        "onReupload",
+        "defaultFileList",
+        "fileList",
+        "autoUpload",
+        "error",
+        "action",
+        "method",
+        "multiple",
+        "name",
+        "accept",
+        "customRequest",
+        "children",
+        "autoUpload",
+        "limit",
+        "drag",
+        "tip",
+        "headers",
+        "data",
+        "withCredentials",
+        "onChange",
+        "onPreview",
+        "onRemove",
+        "onProgress",
+        "onExceedLimit",
+        "beforeUpload",
+        "onDrop",
+        "onDragOver",
+        "onDragLeave"
+      ]),
+      className: z(
+        l,
+        {
+          [`${l}-type-${x}`]: x,
+          [`${l}-drag`]: r.drag,
+          [`${l}-disabled`]: _,
+          [`${l}-hide`]: L.hideOnExceedLimit && O,
+          [`${l}-rtl`]: i
+        },
+        n
+      ),
+      style: N,
+      ref: P,
+      children: /* @__PURE__ */ t(
+        ye,
+        {
+          ref: a,
+          ...r,
+          limit: L.maxCount,
+          hide: L.hideOnExceedLimit && O,
+          disabled: _,
+          prefixCls: l,
+          fileList: h,
+          onProgress: (u, $) => {
+            var y;
+            u && ("fileList" in r || I(
+              h.map((E) => E.uid === u.uid ? u : E)
+            ), (y = r.onProgress) == null || y.call(r, u, $));
+          },
+          onFileStatusChange: b
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ C(T, { children: [
+    x !== "picture-card" && B,
+    H && /* @__PURE__ */ t(
+      Z,
+      {
+        imagePreview: te,
+        progressProps: ie,
+        showUploadList: H,
+        disabled: r.disabled,
+        listType: x,
+        fileList: h,
+        renderUploadItem: p,
+        renderUploadList: ee,
+        onUpload: f,
+        onAbort: U,
+        onRemove: o,
+        onReupload: s,
+        onPreview: r.onPreview,
+        prefixCls: l
+      }
+    ),
+    x === "picture-card" && B,
+    r.tip && x === "picture-card" && /* @__PURE__ */ t("div", { className: `${l}-trigger-tip`, children: r.tip })
+  ] });
+}, Te = j(
+  Ee
+);
+Te.displayName = "Upload";
+export {
+  g as UPLOAD_STATUS,
+  Z as UploadList,
+  Te as default
+};