@kingteza/crud-component 1.44.1 → 1.45.0

package/dist/common/picker/ImagePicker.es.js

@@ -1,296 +1,342 @@
-import { jsx as r, jsxs as B, Fragment as pe } from "react/jsx-runtime";
+import { jsx as r, jsxs as U, Fragment as ue } from "react/jsx-runtime";
 import { Cropper as Be } from "react-advanced-cropper";
-import { RotateLeftOutlined as Pe, RotateRightOutlined as Te, UploadOutlined as we, LoadingOutlined as De } from "@ant-design/icons";
-import { Form as He, Modal as ue, Space as me, Upload as Le } from "antd";
-import K, { useRef as Q, useState as m, useCallback as J, useEffect as W, useMemo as fe } from "react";
+import { RotateLeftOutlined as Re, RotateRightOutlined as Te, UploadOutlined as ve, LoadingOutlined as Le } from "@ant-design/icons";
+import { Form as De, Modal as me, Space as fe, Upload as He } from "antd";
+import G, { useRef as K, useState as I, useCallback as E, useEffect as M, useMemo as ge } from "react";
 import { useTranslationLib as Ve } from "../../locale/index.es.js";
-import y from "../button/Button.es.js";
-import ge from "../../util/ImageUtil.es.js";
+import x from "../button/Button.es.js";
+import he from "../../util/ImageUtil.es.js";
 import _e from "../../icons/FlipHIcon.es.js";
 import Ee from "../../icons/FlipVIcon.es.js";
-const Me = He.Item, he = "crud-component.image-picker.button-state";
-function X(o) {
-  return new Promise((p, f) => {
-    const i = new FileReader();
-    i.readAsDataURL(o), i.onload = () => p(i.result), i.onerror = (g) => f(g);
+const Me = De.Item, we = "crud-component.image-picker.button-state";
+function Q(c) {
+  return new Promise((b, y) => {
+    const n = new FileReader();
+    n.readAsDataURL(c), n.onload = () => b(n.result), n.onerror = (m) => y(m);
   });
 }
-const et = ({
-  values: o = [],
-  required: p,
-  buttonType: f,
-  label: i,
-  name: g,
-  onChange: h,
-  aspectRatio: O,
-  buttonTitle: x,
-  hidePreview: S,
-  buttonSize: w = "large",
-  showButtonText: v = !0,
-  showOnlyIcon: Y = !1,
-  icon: P = /* @__PURE__ */ r(we, {}),
-  loading: T,
-  maxCount: R = 1,
-  onAdd: n,
-  onRemove: D,
-  listType: H,
-  showSkipCropButton: ve,
-  skipResize: Z,
-  asyncUpload: j,
+const tt = ({
+  values: c = [],
+  getRealUrl: b,
+  required: y,
+  buttonType: n,
+  label: m,
+  name: J,
+  onChange: C,
+  aspectRatio: F,
+  buttonTitle: z,
+  hidePreview: O,
+  buttonSize: k = "large",
+  showButtonText: B = !0,
+  showOnlyIcon: X = !1,
+  icon: R = /* @__PURE__ */ r(ve, {}),
+  loading: N,
+  maxCount: s = 1,
+  onAdd: S,
+  onRemove: T,
+  listType: Y,
+  showSkipCropButton: be,
+  skipCrop: Z = !1,
+  skipResize: W,
+  asyncUpload: L,
   ...q
 }) => {
-  const [be, Ce] = K.useState(""), [Ie, ke] = K.useState(""), [Fe, ee] = K.useState(!1), L = Q(), l = Q(null), [s, b] = m([]), [C, V] = m(), ye = Q(), Oe = () => ee(!1), xe = async (e) => {
-    !e.url && !e.preview && (e.preview = await X(e.originFileObj)), ke(e.url || e.preview), ee(!0), Ce(e.name);
-  }, [te, z] = m(!1), re = (e) => {
+  const [ye, Fe] = G.useState(""), [Ie, Ce] = G.useState(""), [Oe, ee] = G.useState(!1), D = K(), f = K(null), [d, g] = I([]), [j, H] = I(), ke = K(), Se = () => ee(!1), je = async (e) => {
+    !e.url && !e.preview && (e.preview = await Q(e.originFileObj)), Ce(e.url || e.preview), ee(!0), Fe(e.name);
+  }, [te, P] = I(!1), re = (e) => {
     var t;
-    (t = l.current) == null || t.rotateImage(e ? -90 : 90);
-  }, oe = J((e) => {
+    (t = f.current) == null || t.rotateImage(e ? -90 : 90);
+  }, oe = E((e) => {
     var t;
-    l.current && ((t = l.current) == null || t.flipImage(e === "h", e === "v"));
+    f.current && ((t = f.current) == null || t.flipImage(e === "h", e === "v"));
   }, []);
-  W(() => {
-    h == null || h(s[0], s);
-  }, [s, h]);
-  const [_, $] = m(), ie = J(
+  M(() => {
+    C == null || C(d[0], d);
+  }, [d, C]);
+  const [V, $] = I(), _ = E(
     async (e) => {
-      var N;
-      const { type: t, size: a, name: I, uid: k } = L.current;
-      if ($(e ? "skip-crop" : "crop"), z(!0), e) {
-        const F = L.current, E = Z ? F : await ge.resizeImage(F), U = await X(E), u = {
-          url: U,
-          name: I,
-          uid: k,
-          type: t,
-          size: a,
-          thumbUrl: U,
-          originFileObj: E,
-          status: j ? "uploading" : void 0
-        };
-        if (n)
+      var de;
+      const { type: t, size: i, name: w, uid: a } = D.current;
+      $(e ? "skip-crop" : "crop"), P(!0);
+      const v = async (o) => {
+        if (S)
           try {
-            z(!0), j ? n(u).then(() => {
-              b(
-                (M) => M.map(
-                  (d) => d.uid === u.uid ? { ...d, status: "done" } : d
-                )
+            if (P(!0), L)
+              g(
+                (l) => s <= 1 ? [o] : [o, ...l]
+              ), S(o).then((l) => {
+                g(
+                  (p) => p.map(
+                    (u) => u.uid === o.uid ? {
+                      ...u,
+                      status: "done",
+                      response: l ?? u.response
+                    } : u
+                  )
+                );
+              });
+            else {
+              const l = await S(o), p = {
+                ...o,
+                response: l ?? o.response,
+                status: "done"
+              };
+              g(
+                (u) => s <= 1 ? [p] : [p, ...u]
               );
-            }) : await n(u);
+            }
           } finally {
-            z(!1);
+            P(!1);
           }
-        b([u, ...s]), z(!1), V(void 0), $(void 0);
+        else
+          g((l) => s <= 1 ? [o] : [o, ...l]);
+      };
+      if (e) {
+        const o = D.current, l = W ? o : await he.resizeImage(o), p = await Q(l);
+        await v({
+          url: p,
+          name: w,
+          uid: a,
+          type: t,
+          size: i,
+          thumbUrl: p,
+          originFileObj: l,
+          status: L ? "uploading" : void 0
+        }), P(!1), H(void 0), $(void 0);
       } else {
-        const F = (N = l.current) == null ? void 0 : N.getCanvas();
-        F == null || F.toBlob(async (E) => {
-          const U = Object.assign(new File([E], I, { type: t }), {
-            uid: k
-          }), u = Z ? U : await ge.resizeImage(U), M = await X(u), d = {
-            url: M,
-            name: I,
-            uid: k,
+        const o = (de = f.current) == null ? void 0 : de.getCanvas();
+        o == null || o.toBlob(async (l) => {
+          const p = Object.assign(new File([l], w, { type: t }), {
+            uid: a
+          }), u = W ? p : await he.resizeImage(p), pe = await Q(u);
+          await v({
+            url: pe,
+            name: w,
+            uid: a,
             type: t,
-            size: a,
-            thumbUrl: M,
+            size: i,
+            thumbUrl: pe,
             originFileObj: u,
-            status: j ? "uploading" : void 0
-          };
-          n && (j ? n(d).then(() => {
-            b(
-              (Ue) => Ue.map(
-                (G) => G.uid === d.uid ? { ...G, status: "done" } : G
-              )
-            );
-          }) : await n(d)), b([d, ...s]), z(!1);
-        }), V(void 0), $(void 0);
+            status: L ? "uploading" : void 0
+          }), P(!1), H(void 0), $(void 0);
+        });
       }
     },
-    [j]
-  ), Se = () => {
-    V(void 0), L.current = void 0;
-  }, ne = J((e) => {
-    const t = e;
-    if (t) {
-      L.current = t;
-      const a = new FileReader();
-      a.addEventListener("load", () => {
-        var I;
-        if (typeof a.result == "string") {
-          V(a.result);
-          const k = localStorage.getItem(he), N = k ? JSON.parse(k) : void 0;
-          N && ((I = l.current) == null || I.setState(N)), setTimeout(() => {
-            de(l.current);
+    [L, s, S, W]
+  ), xe = () => {
+    H(void 0), D.current = void 0;
+  }, ie = E(
+    (e) => {
+      const t = e;
+      if (!t) return;
+      if (D.current = t, Z) {
+        _(!0);
+        return;
+      }
+      const i = new FileReader();
+      i.addEventListener("load", () => {
+        var w;
+        if (typeof i.result == "string") {
+          H(i.result);
+          const a = localStorage.getItem(we), v = a ? JSON.parse(a) : void 0;
+          v && ((w = f.current) == null || w.setState(v)), setTimeout(() => {
+            ce(f.current);
           }, 100);
         }
-      }), a.readAsDataURL(t);
-    }
-  }, []);
-  W(() => {
-    if (o != null && o.length || typeof o == "string") {
-      const e = Array.isArray(o) ? o.map((t) => [{ uid: o, url: t }]) : [{ uid: o, url: o }];
-      b(e);
-    }
-  }, [o]);
-  const { t: c } = Ve(), Re = fe(
-    () => p ? {
-      required: p,
-      validator: (e, t, a) => {
-        C || s != null && s.length ? a() : a(`${i ?? ""} ${c("err.validation.required")}`);
+      }), i.readAsDataURL(t);
+    },
+    [_, Z]
+  );
+  M(() => {
+    let e = !1;
+    return (async () => {
+      if (c == null || c === "") {
+        e || g([]);
+        return;
+      }
+      const i = typeof c == "string" ? [c] : c;
+      if (!i.length) {
+        e || g([]);
+        return;
+      }
+      const w = await Promise.all(
+        i.map(async (a) => {
+          const v = b ? await b(a) : a;
+          return {
+            uid: a,
+            url: v,
+            thumbUrl: v,
+            response: a,
+            name: a.split("/").pop() ?? a
+          };
+        })
+      );
+      e || g(w);
+    })(), () => {
+      e = !0;
+    };
+  }, [c, b]);
+  const { t: h } = Ve(), Ne = ge(
+    () => y ? {
+      required: y,
+      validator: (e, t, i) => {
+        j || d != null && d.length ? i() : i(`${m ?? ""} ${h("err.validation.required")}`);
       }
     } : void 0,
-    [p, C, s == null ? void 0 : s.length, i, c]
-  ), se = x ?? c("message.uploadButtonText"), ae = fe(
+    [y, j, d == null ? void 0 : d.length, m, h]
+  ), ne = z ?? h("message.uploadButtonText"), se = ge(
     () => /* @__PURE__ */ r(
       Je,
       {
         showLoadingIndicator: te,
-        _buttonTitle: se,
-        buttonSize: w,
-        buttonType: f,
-        fileList: s,
-        hidePreview: S,
-        icon: P,
-        loading: T,
-        listType: H,
-        maxCount: R,
-        onChangeFile: ne,
-        onRemove: D,
-        showButtonText: v,
-        handlePreview: xe,
-        setFileList: b
+        _buttonTitle: ne,
+        buttonSize: k,
+        buttonType: n,
+        fileList: d,
+        hidePreview: O,
+        icon: R,
+        loading: N,
+        listType: Y,
+        maxCount: s,
+        onChangeFile: ie,
+        onRemove: T,
+        showButtonText: B,
+        handlePreview: je,
+        setFileList: g
       }
     ),
     [
       te,
-      se,
-      w,
-      f,
+      ne,
+      k,
+      n,
+      d,
+      O,
+      R,
+      N,
+      Y,
       s,
-      S,
-      P,
+      ie,
       T,
-      H,
-      R,
-      ne,
-      D,
-      v
+      B
     ]
   );
-  ye.current = ae.props.beforeUpload;
-  const [je, le] = m(0), [ze, ce] = m(0), [A, Ne] = m();
-  W(() => {
+  ke.current = se.props.beforeUpload;
+  const [Pe, ae] = I(0), [Ue, le] = I(0), [A, ze] = I();
+  M(() => {
     const e = setTimeout(() => {
-      A && localStorage.setItem(he, JSON.stringify(A));
+      A && localStorage.setItem(we, JSON.stringify(A));
     }, 400);
     return () => clearTimeout(e);
-  }, [A]), W(() => {
-    if (!C) {
-      le(0), ce(0);
+  }, [A]), M(() => {
+    if (!j) {
+      ae(0), le(0);
       const e = setTimeout(() => {
         var t;
-        (t = l.current) == null || t.reset();
+        (t = f.current) == null || t.reset();
       }, 1500);
       return () => clearTimeout(e);
     }
-  }, [C]);
-  const de = J(async (e) => {
+  }, [j]);
+  const ce = E(async (e) => {
     if (e) {
       const t = e.getCoordinates();
-      Ne(e.getState()), le((t == null ? void 0 : t.width) ?? 10), ce((t == null ? void 0 : t.height) ?? 10);
+      ze(e.getState()), ae((t == null ? void 0 : t.width) ?? 10), le((t == null ? void 0 : t.height) ?? 10);
     }
   }, []);
-  return /* @__PURE__ */ B(pe, { children: [
+  return /* @__PURE__ */ U(ue, { children: [
     /* @__PURE__ */ r(
       Me,
       {
-        label: i,
+        label: m,
         ...q,
-        name: g,
+        name: J,
         className: "mb-0",
-        rules: [Re, ...q.rules ?? []],
-        children: ae
+        rules: [Ne, ...q.rules ?? []],
+        children: se
       }
     ),
-    /* @__PURE__ */ B(
-      ue,
+    /* @__PURE__ */ U(
+      me,
       {
-        open: !!C,
+        open: !!j,
         maskClosable: !1,
-        onOk: () => ie(!1),
+        onOk: () => _(!1),
         closable: !1,
         okButtonProps: {
-          loading: _ === "crop",
-          disabled: _ === "skip-crop"
+          loading: V === "crop",
+          disabled: V === "skip-crop"
         },
-        onCancel: Se,
-        footer: (e, { CancelBtn: t, OkBtn: a }) => ve ? /* @__PURE__ */ B(me, { children: [
+        onCancel: xe,
+        footer: (e, { CancelBtn: t, OkBtn: i }) => be ? /* @__PURE__ */ U(fe, { children: [
           /* @__PURE__ */ r(t, {}),
           /* @__PURE__ */ r(
-            y,
+            x,
             {
               type: "primary",
-              loading: _ === "skip-crop",
-              disabled: _ === "crop",
-              onClick: () => ie(!0),
-              children: c("str.skipCrop")
+              loading: V === "skip-crop",
+              disabled: V === "crop",
+              onClick: () => _(!0),
+              children: h("str.skipCrop")
             }
           ),
-          /* @__PURE__ */ r(a, {})
-        ] }) : /* @__PURE__ */ r(pe, { children: e }),
+          /* @__PURE__ */ r(i, {})
+        ] }) : /* @__PURE__ */ r(ue, { children: e }),
         destroyOnHidden: !0,
         children: [
           /* @__PURE__ */ r(
             Be,
             {
-              ref: l,
+              ref: f,
               stencilProps: {
                 grid: !0
               },
               style: { border: "1px solid black" },
-              src: C,
+              src: j,
               onChange: (e) => {
-                de(e);
+                ce(e);
               },
-              aspectRatio: O ? {
-                minimum: O,
-                maximum: O
+              aspectRatio: F ? {
+                minimum: F,
+                maximum: F
               } : void 0
             }
           ),
-          /* @__PURE__ */ r("p", { className: "text-center", children: [je, ze].join(" ⨉ ") }),
-          /* @__PURE__ */ r("div", { className: "mt-2 d-flex justify-content-center", children: /* @__PURE__ */ B(me.Compact, { children: [
+          /* @__PURE__ */ r("p", { className: "text-center", children: [Pe, Ue].join(" ⨉ ") }),
+          /* @__PURE__ */ r("div", { className: "mt-2 d-flex justify-content-center", children: /* @__PURE__ */ U(fe.Compact, { children: [
             /* @__PURE__ */ r(
-              y,
+              x,
               {
                 size: "large",
-                tooltip: c("str.rotateLeft"),
-                icon: /* @__PURE__ */ r(Pe, {}),
+                tooltip: h("str.rotateLeft"),
+                icon: /* @__PURE__ */ r(Re, {}),
                 onClick: () => re(!0)
               }
             ),
             /* @__PURE__ */ r(
-              y,
+              x,
               {
                 size: "large",
                 icon: /* @__PURE__ */ r(Te, {}),
-                tooltip: c("str.rotateRight"),
+                tooltip: h("str.rotateRight"),
                 onClick: () => re(!1)
               }
             ),
             /* @__PURE__ */ r(
-              y,
+              x,
               {
                 size: "large",
                 icon: /* @__PURE__ */ r(_e, {}),
-                tooltip: c("str.flipHorizontal"),
+                tooltip: h("str.flipHorizontal"),
                 onClick: () => oe("h")
               }
             ),
             /* @__PURE__ */ r(
-              y,
+              x,
               {
                 size: "large",
                 icon: /* @__PURE__ */ r(Ee, {}),
-                tooltip: c("str.flipVertical"),
+                tooltip: h("str.flipVertical"),
                 onClick: () => oe("v")
               }
             )
@@ -299,70 +345,70 @@ const et = ({
       }
     ),
     /* @__PURE__ */ r(
-      ue,
+      me,
       {
-        open: Fe,
-        title: be,
+        open: Oe,
+        title: ye,
         footer: null,
-        onCancel: Oe,
+        onCancel: Se,
         children: /* @__PURE__ */ r("div", { className: "text-center", children: /* @__PURE__ */ r("img", { alt: "example", style: { maxWidth: "400px" }, src: Ie }) })
       }
     )
   ] });
 }, Je = ({
-  _buttonTitle: o,
-  buttonSize: p,
-  buttonType: f,
-  fileList: i,
-  hidePreview: g,
-  icon: h,
-  loading: O,
-  maxCount: x,
-  onChangeFile: S,
-  onRemove: w,
-  showButtonText: v,
-  handlePreview: Y,
-  setFileList: P,
-  showLoadingIndicator: T,
-  listType: R = "picture"
-}) => /* @__PURE__ */ B(
-  Le,
+  _buttonTitle: c,
+  buttonSize: b,
+  buttonType: y,
+  fileList: n,
+  hidePreview: m,
+  icon: J,
+  loading: C,
+  maxCount: F,
+  onChangeFile: z,
+  onRemove: O,
+  showButtonText: k,
+  handlePreview: B,
+  setFileList: X,
+  showLoadingIndicator: R,
+  listType: N = "picture"
+}) => /* @__PURE__ */ U(
+  He,
   {
     accept: "image/x-png,image/gif,image/jpeg",
-    fileList: i,
-    defaultFileList: i,
+    fileList: n,
+    defaultFileList: n,
     onChange: () => {
     },
-    className: (i.length >= x ? " hide-upload " : "") + " mb-0",
+    className: (n.length >= F ? " hide-upload " : "") + " mb-0",
     multiple: !1,
-    onPreview: g ? void 0 : Y,
-    onDrop: (n) => (S(n.dataTransfer.files.item(0)), !1),
-    listType: R,
-    showUploadList: !g,
-    onRemove: (n) => {
-      const D = i.filter((H) => n.uid !== H.uid);
-      w == null || w(n), P(D);
+    onPreview: m ? void 0 : B,
+    onDrop: (s) => (z(s.dataTransfer.files.item(0)), !1),
+    listType: N,
+    showUploadList: !m,
+    onRemove: (s) => {
+      const S = n.filter((T) => s.uid !== T.uid);
+      O == null || O(s), X(S);
     },
-    beforeUpload: async (n) => (S(n), !1),
-    maxCount: x,
+    beforeUpload: async (s) => (z(s), !1),
+    maxCount: F,
     children: [
-      T && /* @__PURE__ */ r(De, {}),
-      /* @__PURE__ */ r("div", { className: "d-flex flex-column", children: i.length < x && (R === "picture-circle" ? /* @__PURE__ */ r(we, {}) : /* @__PURE__ */ r(
-        y,
+      R && /* @__PURE__ */ r(Le, {}),
+      /* @__PURE__ */ r("div", { className: "d-flex flex-column", children: n.length < F && (N === "picture-circle" ? /* @__PURE__ */ r(ve, {}) : /* @__PURE__ */ r(
+        x,
         {
-          loading: O,
-          tooltip: v ? void 0 : o,
-          size: p,
-          icon: h,
-          type: v ? f : "text",
-          children: v ? o : void 0
+          loading: C,
+          tooltip: k ? void 0 : c,
+          size: b,
+          icon: J,
+          type: k ? y : "text",
+          children: k ? c : void 0
         }
       )) })
     ]
   },
-  i.length
+  n.length
 );
 export {
   Je as UploadComponent,
-  et as default
+  tt as default
 };