@kingteza/crud-component 1.44.1 → 1.44.2

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

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