@unicom-cloud/ui 0.8.43 → 0.8.45

package/upload/TriggerNode.js

@@ -0,0 +1,118 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import y from "@unicom-cloud/icons/IconUiPlus";
+import A from "@unicom-cloud/icons/IconUiUpload";
+import C, { forwardRef as G, useContext as K, useState as U, useEffect as L } from "react";
+import O from "../Button.js";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import R from "../hooks/useKeyboardEvent.js";
+import I from "@unicom-cloud/utils/class-name";
+import { loopDirectory as B, getFiles as H } from "./util.js";
+import { ConfigContext as S } from "../config-provider/context.js";
+const V = (e, T) => {
+  const k = R(), { locale: l } = K(S), [c, g] = U(!1), [s, m] = U(0), {
+    tip: N,
+    children: f,
+    disabled: n,
+    drag: w,
+    listType: F,
+    prefixCls: r,
+    accept: E,
+    multiple: P
+  } = e, $ = {
+    disabled: n
+  };
+  return L(() => {
+    m(0);
+  }, [c]), f === null ? null : /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${r}-trigger`,
+      onClick: n ? void 0 : e.onClick,
+      ...k({
+        onPressEnter: () => {
+          var t;
+          !n && ((t = e.onClick) == null || t.call(e));
+        }
+      }),
+      ref: T,
+      onDragEnter: () => {
+        m(s + 1);
+      },
+      onDragLeave: (t) => {
+        var a;
+        t.preventDefault(), s === 0 ? (g(!1), !n && ((a = e.onDragLeave) == null || a.call(e, t))) : m(s - 1);
+      },
+      onDrop: (t) => {
+        var a, b;
+        if (t.preventDefault(), !n && e.drag !== !1) {
+          if (g(!1), e.directory)
+            B(t.dataTransfer.items, E, (u) => {
+              var d;
+              (d = e.onDragFiles) == null || d.call(e, u);
+            });
+          else {
+            const u = [].slice.call(t.dataTransfer.items || []).reduce((D, o, j) => {
+              if (o.webkitGetAsEntry) {
+                const h = o.webkitGetAsEntry();
+                return h != null && h.isDirectory ? [...D, j] : D;
+              }
+            }, []), d = [].slice.call(t.dataTransfer.files || []).filter((D, o) => !u.includes(o)), v = H(d, E);
+            v.length > 0 && ((a = e.onDragFiles) == null || a.call(e, P ? v : v.slice(0, 1)));
+          }
+          (b = e.onDrop) == null || b.call(e, t);
+        }
+      },
+      onDragOver: (t) => {
+        var a;
+        t.preventDefault(), !n && !c && (g(!0), (a = e.onDragOver) == null || a.call(e, t));
+      },
+      children: C.isValidElement(f) ? /* @__PURE__ */ i(
+        "div",
+        {
+          className: I({ [`${r}-trigger-custom-active`]: c }),
+          children: C.cloneElement(f, $)
+        }
+      ) : F === "picture-card" ? /* @__PURE__ */ i("div", { className: `${r}-trigger-picture-wrapper`, children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: `${r}-trigger-picture`,
+          tabIndex: 0,
+          "aria-label": l.Upload.upload,
+          children: /* @__PURE__ */ i("div", { className: `${r}-trigger-picture-text`, children: /* @__PURE__ */ i(y, {}) })
+        }
+      ) }) : w ? /* @__PURE__ */ x(
+        "div",
+        {
+          className: I(`${r}-trigger-drag`, {
+            [`${r}-trigger-drag-active`]: c
+          }),
+          tabIndex: 0,
+          "aria-label": l.Upload.drag,
+          children: [
+            /* @__PURE__ */ i(y, {}),
+            /* @__PURE__ */ i("p", { className: `${r}-trigger-drag-text`, children: c ? l.Upload.dragHover : l.Upload.drag }),
+            N && /* @__PURE__ */ i("div", { className: `${r}-trigger-tip`, children: N })
+          ]
+        }
+      ) : /* @__PURE__ */ x(
+        O,
+        {
+          ...$,
+          "aria-label": l.Upload.upload,
+          type: "primary",
+          className: `${r}-trigger-with-icon`,
+          children: [
+            /* @__PURE__ */ i(A, {}),
+            l.Upload.upload
+          ]
+        }
+      )
+    }
+  );
+}, ee = G(
+  V
+);
+export {
+  ee as default
+};

package/upload/Upload.js

@@ -0,0 +1,205 @@
+import { jsx as m, jsxs as M, Fragment as B } from "react/jsx-runtime";
+import H from "lodash/isFunction";
+import W from "lodash/isNumber";
+import { forwardRef as k, useContext as z, useRef as N, useState as G, useImperativeHandle as J } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import K from "../hooks/useMergeProps.js";
+import Q from "@unicom-cloud/utils/class-name";
+import V from "../utils/omit.js";
+import y from "../utils/warning.js";
+import { STATUS as g } from "./interface.js";
+import { FileList as X } from "./list/index.js";
+import Y from "./Uploader.js";
+import { ConfigContext as Z } from "../config-provider/context.js";
+const U = function(f) {
+  const c = [].concat(f || []).filter(Boolean);
+  return c.reduce((d, n, h) => {
+    if (n.uid) {
+      const e = c.findIndex(
+        (s) => n.uid === s.uid && n !== s
+      );
+      y(e !== -1, "[Upload]: duplicate uid");
+      const o = {
+        status: g.success,
+        percent: 100,
+        ...n
+      };
+      e === -1 ? d.push(o) : d.splice(e, 1, o);
+    } else {
+      y(!0, "[Upload]: uid is required");
+      const e = `${String(+/* @__PURE__ */ new Date())}${h}`;
+      d.push({
+        uid: e,
+        status: g.success,
+        percent: 100,
+        ...n
+      });
+    }
+    return d;
+  }, []);
+}, _ = {
+  listType: "text",
+  autoUpload: !0,
+  showUploadList: !0,
+  beforeUpload: () => !0,
+  method: "post"
+}, ee = (f, c) => {
+  const { getPrefixCls: d, componentConfig: n, rtl: h } = z(Z), e = K(
+    f,
+    _,
+    n == null ? void 0 : n.Upload
+  ), o = d("upload"), s = N(), x = N(), [D, b] = G(() => "fileList" in e ? U(e.fileList) : "defaultFileList" in e ? U(e.defaultFileList) : []), a = "fileList" in e ? U(e.fileList) : D, v = (t, i) => {
+    var r;
+    "fileList" in e || b(t), (r = e.onChange) == null || r.call(e, t, i);
+  }, F = (t) => {
+    t && setTimeout(() => {
+      s.current && s.current.upload(t);
+    }, 0);
+  }, R = (t) => {
+    var i;
+    s.current && s.current.reupload(t), (i = e.onReupload) == null || i.call(e, t);
+  }, E = (t) => {
+    if (t) {
+      const { onRemove: i } = e;
+      Promise.resolve(
+        H(i) ? i(t, a) : i
+      ).then((r) => {
+        r !== !1 && (s.current && s.current.abort(t), v(
+          a.filter((p) => p.uid !== t.uid),
+          t
+        ));
+      }).catch((r) => {
+        console.error(r);
+      });
+    }
+  }, C = (t) => {
+    t && s.current && s.current.abort(t);
+  };
+  J(c, () => ({
+    submit: (t) => {
+      let i = [];
+      t ? i = [t] : i = a.filter((r) => r.status === g.init), i.forEach((r) => {
+        F(r);
+      });
+    },
+    // file: fileList中的file对象
+    abort: (t) => {
+      C(t);
+    },
+    // file: fileList中的file对象
+    reupload: (t) => {
+      R(t);
+    },
+    getRootDOMNode: () => x.current
+  }));
+  const {
+    listType: l,
+    className: O,
+    style: S,
+    renderUploadItem: I,
+    showUploadList: P,
+    renderUploadList: T,
+    progressProps: j,
+    imagePreview: q,
+    ...A
+  } = e, u = W(e.limit) ? { hideOnExceedLimit: !0, maxCount: e.limit } : { hideOnExceedLimit: !0, ...e.limit }, L = u.maxCount && u.maxCount <= a.length, w = "disabled" in e ? e.disabled : !u.hideOnExceedLimit && L, $ = /* @__PURE__ */ m(
+    "div",
+    {
+      ...V(A, [
+        "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: Q(
+        o,
+        {
+          [`${o}-type-${l}`]: l,
+          [`${o}-drag`]: e.drag,
+          [`${o}-disabled`]: w,
+          [`${o}-hide`]: u.hideOnExceedLimit && L,
+          [`${o}-rtl`]: h
+        },
+        O
+      ),
+      style: S,
+      ref: x,
+      children: /* @__PURE__ */ m(
+        Y,
+        {
+          ref: s,
+          ...e,
+          limit: u.maxCount,
+          hide: u.hideOnExceedLimit && L,
+          disabled: w,
+          prefixCls: o,
+          fileList: a,
+          onProgress: (t, i) => {
+            var r;
+            t && ("fileList" in e || b(
+              a.map((p) => p.uid === t.uid ? t : p)
+            ), (r = e.onProgress) == null || r.call(e, t, i));
+          },
+          onFileStatusChange: v
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ M(B, { children: [
+    l !== "picture-card" && $,
+    P && /* @__PURE__ */ m(
+      X,
+      {
+        imagePreview: q,
+        progressProps: j,
+        showUploadList: P,
+        disabled: e.disabled,
+        listType: l,
+        fileList: a,
+        renderUploadItem: I,
+        renderUploadList: T,
+        onUpload: F,
+        onAbort: C,
+        onRemove: E,
+        onReupload: R,
+        onPreview: e.onPreview,
+        prefixCls: o
+      }
+    ),
+    l === "picture-card" && $,
+    e.tip && l === "picture-card" && /* @__PURE__ */ m("div", { className: `${o}-trigger-tip`, children: e.tip })
+  ] });
+}, te = k(
+  ee
+);
+te.displayName = "Upload";
+export {
+  te as default
+};

package/upload/Uploader.js

@@ -0,0 +1,205 @@
+import { jsxs as K, Fragment as M, jsx as R } from "react/jsx-runtime";
+import { isFile as Q } from "@unicom-cloud/utils/is";
+import E from "lodash/isFunction";
+import W from "lodash/isNumber";
+import X from "lodash/isPlainObject";
+import Y, { useRef as Z, useState as _, useImperativeHandle as tt } from "react";
+import et from "../utils/CSSTransition.js";
+import it from "./TriggerNode.js";
+import { STATUS as c } from "./interface.js";
+import ot from "./request.js";
+import { isAcceptFile as nt } from "./util.js";
+function st(o, O) {
+  const b = Z(null), [q, T] = _({ uploadRequests: {} });
+  function A(t) {
+    U(t);
+  }
+  function z(t) {
+    var i;
+    const e = q.uploadRequests[t.uid];
+    e && ((i = e.abort) == null || i.call(e), l({
+      ...t,
+      status: c.fail
+    }), g(t.uid));
+  }
+  function H(t) {
+    U({
+      ...t,
+      percent: 0,
+      status: c.uploading
+    });
+  }
+  function g(t) {
+    const e = { ...q.uploadRequests };
+    delete e[t], T({
+      uploadRequests: e
+    });
+  }
+  tt(O, () => ({
+    // 提供 ref 调用
+    upload: A,
+    abort: z,
+    reupload: H,
+    // 删除上传（手动上传时，文件会出现在上传列表，但属于init状态）
+    delete: g
+  }));
+  function l(t, e = o.fileList) {
+    const { onFileStatusChange: i } = o, s = "uid" in t ? "uid" : "name";
+    i == null || i(
+      e.map((p) => p[s] === t[s] ? t : p),
+      t
+    );
+  }
+  function S(t) {
+    const e = "uid" in t ? "uid" : "name";
+    return o.fileList.find((s) => s[e] === t[e]);
+  }
+  async function U(t) {
+    const {
+      action: e,
+      headers: i,
+      name: s,
+      data: p,
+      withCredentials: h,
+      customRequest: r,
+      method: f
+    } = o, $ = {
+      onProgress: (m, n) => {
+        var y, j;
+        const F = S(t);
+        F && (F.status = c.uploading, F.percent = m, (j = (y = this == null ? void 0 : this.props) == null ? void 0 : y.onProgress) == null || j.call(y, F, n));
+      },
+      onSuccess: (m) => {
+        const n = S(t);
+        n && (n.status = c.success, n.response = m, l(n)), g(t.uid);
+      },
+      onError: (m) => {
+        const n = S(t);
+        n && (n.status = c.fail, n.response = m, l(n)), g(t.uid);
+      },
+      headers: i,
+      name: s,
+      file: t.originFile,
+      data: p,
+      withCredentials: h
+    };
+    l(t);
+    let P;
+    e ? P = ot({ ...$, action: e, method: f }) : r && (P = await r($)), T({
+      uploadRequests: {
+        ...q.uploadRequests,
+        [t.uid]: P
+      }
+    });
+  }
+  function k(t) {
+    const { limit: e, fileList: i, onExceedLimit: s, autoUpload: p } = o;
+    if (W(e) && e < i.length + t.length)
+      return s == null ? void 0 : s(t, i);
+    const h = (r, f) => {
+      const a = o.fileList || [], u = {
+        uid: `${String(+/* @__PURE__ */ new Date())}${f}`,
+        originFile: r,
+        percent: 0,
+        status: c.init,
+        name: r.name
+      };
+      l(u), a.push(u), l(u, a), p && setTimeout(() => {
+        U({
+          ...u,
+          status: c.uploading
+        });
+      }, 0);
+    };
+    t.forEach((r, f) => {
+      nt(r, o.accept) && (E(o.beforeUpload) ? Promise.resolve(o.beforeUpload(r, t)).then((a) => {
+        if (a !== !1) {
+          const u = Q(a) ? a : r;
+          h(u, f);
+        }
+      }).catch((a) => {
+        console.error(a);
+      }) : h(r, f));
+    });
+  }
+  const {
+    accept: d,
+    multiple: L,
+    children: w,
+    prefixCls: v,
+    tip: x,
+    disabled: C,
+    drag: D,
+    listType: I,
+    hide: V,
+    directory: N,
+    onDrop: B,
+    onDragOver: G,
+    onDragLeave: J
+  } = o;
+  return /* @__PURE__ */ K(M, { children: [
+    /* @__PURE__ */ R(
+      "input",
+      {
+        ref: b,
+        style: {
+          visibility: "hidden",
+          opacity: 0,
+          position: "fixed",
+          top: "-227px",
+          left: "-227px",
+          zIndex: -999999
+        },
+        type: "file",
+        accept: X(d) ? d == null ? void 0 : d.type : d,
+        multiple: L,
+        ...N ? { webkitdirectory: "true" } : {},
+        onChange: (t) => {
+          const e = t.target.files;
+          e && (k([].slice.call(e)), b.current.value = "");
+        },
+        onClick: (t) => {
+          t.stopPropagation();
+        }
+      },
+      "trigger-input"
+    ),
+    /* @__PURE__ */ R(
+      et,
+      {
+        in: !V,
+        timeout: 100,
+        unmountOnExit: !0,
+        classNames: "fadeIn",
+        children: /* @__PURE__ */ R(
+          it,
+          {
+            directory: N,
+            tip: x,
+            multiple: L,
+            accept: d,
+            disabled: C,
+            drag: D,
+            listType: I,
+            onDrop: B,
+            onDragOver: G,
+            onDragLeave: J,
+            onDragFiles: k,
+            onClick: () => {
+              var t, e;
+              !C && ((e = (t = b.current) == null ? void 0 : t.click) == null || e.call(t));
+            },
+            prefixCls: v,
+            children: E(w) ? w({ fileList: o.fileList }) : w
+          }
+        )
+      },
+      "trigger-node"
+    ),
+    x && I !== "picture-card" && !D ? /* @__PURE__ */ R("div", { className: `${v}-trigger-tip`, children: x }, "trigger-tip") : null
+  ] });
+}
+const yt = Y.forwardRef(st);
+export {
+  yt as default
+};

package/upload/interface.js

@@ -0,0 +1,9 @@
+const i = {
+  init: "init",
+  uploading: "uploading",
+  success: "done",
+  fail: "error"
+};
+export {
+  i as STATUS
+};

package/upload/list/PictureItem.js

@@ -0,0 +1,91 @@
+import { jsx as r, jsxs as s, Fragment as p } from "react/jsx-runtime";
+import R from "@unicom-cloud/icons/IconUiDelete";
+import U from "@unicom-cloud/icons/IconUiEye";
+import P from "@unicom-cloud/icons/IconUiImageClose";
+import g from "@unicom-cloud/icons/IconUiUpload";
+import u from "lodash/isFunction";
+import { forwardRef as h } from "react";
+import w from "../../hooks/useKeyboardEvent.js";
+import { STATUS as a } from "../interface.js";
+import { isObject as $ } from "../../utils/is.js";
+import x from "./UploadProgress.js";
+const N = (e, v) => {
+  const { disabled: f, prefixCls: l, file: o, showUploadList: d, locale: t } = e, c = w(), i = `${l}-list-item-picture`, { status: I, originFile: m } = o, b = o.url !== void 0 ? o.url : m && u(URL.createObjectURL) && URL.createObjectURL(m), n = $(d) ? d : {};
+  return /* @__PURE__ */ r("div", { className: i, ref: v, children: I === a.uploading ? /* @__PURE__ */ r(
+    x,
+    {
+      onReupload: e.onReupload,
+      onUpload: e.onUpload,
+      onAbort: e.onAbort,
+      listType: "picture-card",
+      file: o,
+      prefixCls: l,
+      progressProps: e.progressProps,
+      ...n
+    }
+  ) : /* @__PURE__ */ s(p, { children: [
+    u(n.imageRender) ? n.imageRender(o) : /* @__PURE__ */ r("img", { src: b, alt: o.name }),
+    /* @__PURE__ */ s("div", { className: `${i}-mask`, role: "radiogroup", children: [
+      o.status === a.fail && /* @__PURE__ */ r("div", { className: `${i}-error-tip`, children: n.errorIcon !== null && /* @__PURE__ */ r("span", { className: `${l}-list-error-icon`, children: n.errorIcon || /* @__PURE__ */ r(P, {}) }) }),
+      /* @__PURE__ */ s("div", { className: `${i}-operation`, children: [
+        o.status !== a.fail && n.previewIcon !== null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: `${l}-list-preview-icon`,
+            tabIndex: 0,
+            role: "button",
+            "aria-label": t.Upload.preview,
+            ...c({
+              onPressEnter: () => {
+                e.onPreview && e.onPreview(o);
+              }
+            }),
+            onClick: () => {
+              e.onPreview && e.onPreview(o);
+            },
+            children: n.previewIcon || /* @__PURE__ */ r(U, {})
+          }
+        ),
+        o.status === a.fail && n.reuploadIcon !== null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: `${e.prefixCls}-list-reupload-icon`,
+            onClick: () => {
+              e.onReupload && e.onReupload(o);
+            },
+            tabIndex: 0,
+            role: "button",
+            "aria-label": t.Upload.reupload,
+            ...c({
+              onPressEnter: () => {
+                e.onReupload && e.onReupload(o);
+              }
+            }),
+            children: n.reuploadIcon || /* @__PURE__ */ r(g, {})
+          }
+        ),
+        !f && n.removeIcon !== null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: `${l}-list-remove-icon`,
+            onClick: () => {
+              e.onRemove && e.onRemove(o);
+            },
+            role: "button",
+            "aria-label": t.Upload.delete,
+            tabIndex: 0,
+            ...c({
+              onPressEnter: () => {
+                e.onRemove && e.onRemove(o);
+              }
+            }),
+            children: n.removeIcon || /* @__PURE__ */ r(R, {})
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}, D = h(N);
+export {
+  D as default
+};