@kingteza/crud-component 1.44.2 → 1.46.0

package/dist/crud/FileCrudField.es.js

@@ -1,179 +1,180 @@
-import { jsxs as f, jsx as s, Fragment as V } from "react/jsx-runtime";
-import { FileOutlined as Z, FilePptOutlined as B, FileExcelOutlined as m, FileTextOutlined as v, FileWordOutlined as y, FilePdfOutlined as T, FileImageOutlined as tt, ExportOutlined as et } from "@ant-design/icons";
-import { Form as b, Upload as st, Modal as lt } from "antd";
-import S from "mime";
-import { useState as w, useCallback as j, useEffect as A, useMemo as H } from "react";
-import { useTranslationLib as rt } from "../locale/index.es.js";
-import nt from "../util/ValidationUtil.es.js";
-import P from "../common/button/Button.es.js";
-import at from "../common/layout/VerticalSpace.es.js";
-import it from "../util/CrudUtil.es.js";
-import ct from "../util/ImageUtil.es.js";
-function It({
+import { jsxs as h, jsx as e, Fragment as D } from "react/jsx-runtime";
+import { UploadOutlined as B, FileOutlined as v, FilePptOutlined as y, FileExcelOutlined as m, FileTextOutlined as T, FileWordOutlined as tt, FilePdfOutlined as et, FileImageOutlined as st, ExportOutlined as rt } from "@ant-design/icons";
+import { Form as V, Upload as lt, Modal as nt } from "antd";
+import z from "mime";
+import { useState as g, useCallback as H, useEffect as A, useMemo as S } from "react";
+import { useTranslationLib as it } from "../locale/index.es.js";
+import at from "../util/ValidationUtil.es.js";
+import I from "../common/button/Button.es.js";
+import ct from "../common/layout/VerticalSpace.es.js";
+import ot from "../util/CrudUtil.es.js";
+import ut from "../util/ImageUtil.es.js";
+function pt({
   name: n,
   label: t,
-  required: l,
-  provider: e,
-  onUploading: a,
-  onRemoved: u,
-  fieldClassName: F,
-  accept: I,
-  rules: L,
-  maxCount: D = 1,
-  block: W,
-  fieldHelper: _,
-  formLayoutProps: q,
-  preprocessBeforeUpload: g,
-  ...z
+  required: r,
+  provider: s,
+  onUploading: i,
+  onRemoved: f,
+  onUploadComplete: u,
+  fieldClassName: b,
+  accept: L,
+  rules: W,
+  maxCount: N = 1,
+  block: _,
+  fieldHelper: q,
+  formLayoutProps: R,
+  preprocessBeforeUpload: w,
+  ...G
 }) {
-  const d = b.useFormInstance(), R = it.getRealName(n, "upsertFieldName"), h = b.useWatch(R, d), [N, k] = w(!1), [E, G] = w(!1), J = j(
-    async (r) => {
+  const d = V.useFormInstance(), J = ot.getRealName(n, "upsertFieldName"), F = V.useWatch(J, d), [k, E] = g(!1), [M, K] = g(!1), Q = H(
+    async (l) => {
       var o, c;
       try {
-        const { file: i } = r, x = i.name;
-        k(!0), G(!0), a == null || a(!0);
-        const C = x ?? "", U = C.split("."), Q = U[U.length - 1], X = e.generateFileName(C), Y = `${await e.getInitialPath()}/${X}.${Q}`;
-        let O = i;
-        g && (typeof g == "function" ? O = await g(i) : g.compressImage && (O = await ct.resizeImage(i)));
-        const $ = await e.upload(
-          { ...i, originFileObj: O },
-          Y
+        const { file: a } = l, O = a.name;
+        E(!0), K(!0), i == null || i(!0);
+        const P = O ?? "", j = P.split("."), Y = j[j.length - 1], Z = s.generateFileName(P), U = `${await s.getInitialPath()}/${Z}.${Y}`;
+        let C = a;
+        w && (typeof w == "function" ? C = await w(a) : w.compressImage && (C = await ut.resizeImage(a)));
+        const p = await s.upload(
+          { ...a, originFileObj: C },
+          U
         );
-        a == null || a(!1), d.setFieldValue(n, $), (o = r.onSuccess) == null || o.call(r, $);
-      } catch (i) {
-        (c = r.onError) == null || c.call(r, i);
+        u == null || u(p), i == null || i(!1), d.setFieldValue(n, p), (o = l.onSuccess) == null || o.call(l, p);
+      } catch (a) {
+        (c = l.onError) == null || c.call(l, a);
       } finally {
-        k(!1);
+        E(!1);
       }
     },
-    [d, n, a, e]
-  ), [p, M] = w([]);
+    [d, n, u, i, w, s]
+  ), [x, $] = g([]);
   A(() => {
-    !E && h && Promise.all(
-      (Array.isArray(h) ? h : [h]).map(
-        async (r) => {
-          const o = S.getType(r), c = r.split("/").pop(), i = await e.getRealUrl(r);
+    !M && F && Promise.all(
+      (Array.isArray(F) ? F : [F]).map(
+        async (l) => {
+          const o = z.getType(l), c = l.split("/").pop(), a = await s.getRealUrl(l);
           return {
-            uid: r,
-            url: i,
+            uid: l,
+            url: a,
             type: o,
             name: c
           };
         }
       )
-    ).then((r) => M(() => r.map(({ url: c, type: i, uid: x, name: C }) => ({ uid: x, url: c, type: i, response: x, thumbUrl: c, name: C }))));
-  }, [h, E, N, e]);
-  const K = j(
-    async (r) => {
-      const o = r.response, c = o || d.getFieldValue(n);
-      await e.delete(c), u == null || u(), r && d.setFieldsValue({ [n]: null });
+    ).then((l) => $(() => l.map(({ url: c, type: a, uid: O, name: P }) => ({ uid: O, url: c, type: a, response: O, thumbUrl: c, name: P }))));
+  }, [F, M, k, s]);
+  const X = H(
+    async (l) => {
+      const o = l.response, c = o || d.getFieldValue(n);
+      await s.delete(c), f == null || f(), l && d.setFieldsValue({ [n]: null });
     },
-    [d, n, u, e]
+    [d, n, f, s]
   );
-  return /* @__PURE__ */ f(
-    b.Item,
+  return /* @__PURE__ */ h(
+    V.Item,
     {
       label: t,
-      required: l,
+      required: r,
       name: n,
-      ...q,
-      className: F,
+      ...R,
+      className: b,
       rules: [
-        ...l ? nt.required(t) : [],
-        ...L ?? []
+        ...r ? at.required(t) : [],
+        ...W ?? []
       ],
-      help: _,
+      help: q,
       children: [
-        /* @__PURE__ */ s("input", { hidden: !0 }),
-        /* @__PURE__ */ s(
-          st,
+        /* @__PURE__ */ e("input", { hidden: !0 }),
+        /* @__PURE__ */ e(
+          lt,
           {
-            ...z,
-            fileList: p,
-            className: ((p == null ? void 0 : p.length) ?? 0) >= D ? "hide-upload" : "",
-            maxCount: D,
-            customRequest: J,
-            onRemove: K,
+            ...G,
+            fileList: x,
+            className: ((x == null ? void 0 : x.length) ?? 0) >= N ? "hide-upload" : "",
+            maxCount: N,
+            customRequest: Q,
+            onRemove: X,
             listType: "picture",
-            onChange: ({ fileList: r }) => {
-              M(r);
+            onChange: ({ fileList: l }) => {
+              $(l);
             },
-            accept: I,
-            style: W ? { width: "100%" } : void 0,
-            children: /* @__PURE__ */ s(P, { loading: N, children: "Upload File" })
+            accept: L,
+            style: _ ? { width: "100%" } : void 0,
+            children: /* @__PURE__ */ e(I, { icon: /* @__PURE__ */ e(B, {}), block: !0, size: "large", loading: k, children: "Upload File" })
           }
         )
       ]
     }
   );
 }
-const Ot = ({ provider: n, value: t }) => {
-  const [l, e] = w();
+const Vt = ({ provider: n, value: t }) => {
+  const [r, s] = g();
   return A(() => {
-    t && n.getRealUrl(t).then((a) => {
-      e({
-        mimeType: S.getType(t),
-        url: a,
+    t && n.getRealUrl(t).then((i) => {
+      s({
+        mimeType: z.getType(t),
+        url: i,
         fileName: t.split("/").pop() ?? t
       });
     });
-  }, [n, t]), l ? /* @__PURE__ */ s(
-    ot,
+  }, [n, t]), r ? /* @__PURE__ */ e(
+    ft,
     {
-      fileName: l.fileName,
-      url: l == null ? void 0 : l.url,
-      mimeType: l == null ? void 0 : l.mimeType
+      fileName: r.fileName,
+      url: r == null ? void 0 : r.url,
+      mimeType: r == null ? void 0 : r.mimeType
     }
-  ) : /* @__PURE__ */ s(V, {});
-}, ot = ({ url: n, mimeType: t = "", fileName: l }) => {
-  const e = H(() => t != null && t.includes("image") ? "image" : t != null && t.includes("pdf") ? "pdf" : t != null && t.includes("word") ? "word" : t != null && t.includes("text") ? "text" : t != null && t.includes("presentation") ? "presentation" : t != null && t.includes("excel") || t != null && t.includes("spreadsheet") ? "excel" : "file", [t]), a = H(() => {
-    switch (e) {
+  ) : /* @__PURE__ */ e(D, {});
+}, ft = ({ url: n, mimeType: t = "", fileName: r }) => {
+  const s = S(() => t != null && t.includes("image") ? "image" : t != null && t.includes("pdf") ? "pdf" : t != null && t.includes("word") ? "word" : t != null && t.includes("text") ? "text" : t != null && t.includes("presentation") ? "presentation" : t != null && t.includes("excel") || t != null && t.includes("spreadsheet") ? "excel" : "file", [t]), i = S(() => {
+    switch (s) {
       case "image":
-        return /* @__PURE__ */ s(tt, {});
+        return /* @__PURE__ */ e(st, {});
       case "pdf":
-        return /* @__PURE__ */ s(T, {});
+        return /* @__PURE__ */ e(et, {});
       case "word":
-        return /* @__PURE__ */ s(y, {});
+        return /* @__PURE__ */ e(tt, {});
       case "text":
-        return /* @__PURE__ */ s(v, {});
+        return /* @__PURE__ */ e(T, {});
       case "excel":
-        return /* @__PURE__ */ s(m, {});
+        return /* @__PURE__ */ e(m, {});
       case "presentation":
-        return /* @__PURE__ */ s(B, {});
+        return /* @__PURE__ */ e(y, {});
       default:
-        return /* @__PURE__ */ s(Z, {});
+        return /* @__PURE__ */ e(v, {});
     }
-  }, [e]), [u, F] = w(!1), { t: I } = rt();
-  return e !== "file" && e !== "text" ? /* @__PURE__ */ f(V, { children: [
-    /* @__PURE__ */ s(
-      lt,
+  }, [s]), [f, u] = g(!1), { t: b } = it();
+  return s !== "file" && s !== "text" ? /* @__PURE__ */ h(D, { children: [
+    /* @__PURE__ */ e(
+      nt,
       {
-        open: u,
-        title: l,
-        onCancel: () => F(!1),
-        footer: /* @__PURE__ */ s(V, {}),
+        open: f,
+        title: r,
+        onCancel: () => u(!1),
+        footer: /* @__PURE__ */ e(D, {}),
         width: "100%",
         style: { top: "8px", minHeight: "700px" },
         destroyOnHidden: !0,
-        children: /* @__PURE__ */ f(at, { children: [
-          /* @__PURE__ */ s(
-            P,
+        children: /* @__PURE__ */ h(ct, { children: [
+          /* @__PURE__ */ e(
+            I,
             {
-              tooltip: l,
-              icon: /* @__PURE__ */ s(et, {}),
+              tooltip: r,
+              icon: /* @__PURE__ */ e(rt, {}),
               target: "_blank",
               href: n,
               style: { textDecoration: "none" },
-              children: I("str.openInNewTab")
+              children: b("str.openInNewTab")
             }
           ),
-          e === "image" ? /* @__PURE__ */ s("img", { src: n, alt: l, style: { width: "100%" } }) : e === "pdf" ? /* @__PURE__ */ f("iframe", { title: l, src: n, width: "100%", height: "700px", children: [
+          s === "image" ? /* @__PURE__ */ e("img", { src: n, alt: r, style: { width: "100%" } }) : s === "pdf" ? /* @__PURE__ */ h("iframe", { title: r, src: n, width: "100%", height: "700px", children: [
             "This browser does not support PDFs. Please download the PDF to view it:",
-            /* @__PURE__ */ s("a", { href: n, children: "Download PDF" })
-          ] }) : /* @__PURE__ */ f(
+            /* @__PURE__ */ e("a", { href: n, children: "Download PDF" })
+          ] }) : /* @__PURE__ */ h(
             "iframe",
             {
-              title: l,
+              title: r,
               src: `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
                 n
               )}`,
@@ -181,13 +182,13 @@ const Ot = ({ provider: n, value: t }) => {
               height: "700px",
               children: [
                 "This browser does not support open ",
-                e.toUpperCase(),
+                s.toUpperCase(),
                 ". Please download the",
-                e.toUpperCase(),
+                s.toUpperCase(),
                 " to view it:",
-                /* @__PURE__ */ f("a", { href: n, children: [
+                /* @__PURE__ */ h("a", { href: n, children: [
                   "Download ",
-                  e.toUpperCase()
+                  s.toUpperCase()
                 ] }),
                 "."
               ]
@@ -196,20 +197,20 @@ const Ot = ({ provider: n, value: t }) => {
         ] })
       }
     ),
-    /* @__PURE__ */ s(
-      P,
+    /* @__PURE__ */ e(
+      I,
       {
-        tooltip: l,
-        icon: a,
+        tooltip: r,
+        icon: i,
         shape: "circle",
-        onClick: () => F(!0)
+        onClick: () => u(!0)
       }
     )
-  ] }) : /* @__PURE__ */ s(
-    P,
+  ] }) : /* @__PURE__ */ e(
+    I,
     {
-      tooltip: l,
-      icon: a,
+      tooltip: r,
+      icon: i,
       target: "_blank",
       href: n,
       shape: "circle"
@@ -217,7 +218,7 @@ const Ot = ({ provider: n, value: t }) => {
   );
 };
 export {
-  ot as FileCellValue,
-  Ot as FileCrudCellValue,
-  It as default
+  ft as FileCellValue,
+  Vt as FileCrudCellValue,
+  pt as default
 };

package/dist/crud/ImageCrudField.cjs.js

@@ -1 +1 @@
-"use strict";var H=Object.defineProperty;var T=(s,e,t)=>e in s?H(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var q=(s,e,t)=>T(s,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),W=require("@ant-design/icons"),F=require("antd"),x=require("path-browserify"),d=require("react"),G=require("../util/NumberUtil.cjs.js"),J=require("../util/ValidationUtil.cjs.js"),K=require("uuid"),L=require("../common/picker/ImagePicker.cjs.js"),Q=require("../util/ImageUtil.cjs.js");class N{}class X extends N{constructor(t="",l=""){super();q(this,"rootPath");q(this,"subPath");this.rootPath=t,this.subPath=l}cloneFilePath(t){const l=x.parse(t),a=`${l.name}_cloned_${G.default.randInt(1e5)}`;return x.format({dir:l.dir,ext:l.ext,name:a})}generateFileName(t){return`${t.split(".")[0]}_${K.v4().replace("-","")}`}}function Y({formLayoutProps:s,name:e,label:t,required:l,provider:a,onUploading:i,aspectRatio:$,onRemoved:m,fieldClassName:A,hideLabel:k=!1,listType:C,fieldHelper:O,showSkipCropButton:S=!1,skipResize:_=!1,asyncUpload:B=!1,maxCount:h=1},M){const f=F.Form.useFormInstance(),o=e,y=F.Form.useWatch(o,f),z=d.useCallback(r=>a.getRealUrl(r),[a]),g=d.useCallback(async(r,P)=>{if(P){i==null||i(!0);try{const u=r.name,c=u.split("."),p=c[c.length-1],I=a.generateFileName(u),w=`${await a.getInitialPath()}/${I}.${p}`,j=await a.upload(r,w),V=f.getFieldValue(o);if(h>1){const E=Array.isArray(V)?V:V?[V]:[];f.setFieldValue(o,[...E,j].filter(Boolean))}else f.setFieldValue(o,j);return j}finally{i==null||i(!1)}}else{const u=f.getFieldValue(o);if(h>1){const c=r.response??(typeof r.uid=="string"?r.uid:void 0);if(!c)return;await a.delete(c),m==null||m();const I=(Array.isArray(u)?u:u?[u]:[]).filter(w=>w!==c);f.setFieldValue(o,I.length?I:null)}else{const c=await a.delete(u);m==null||m(),c&&f.setFieldValue(o,null)}}},[f,h,o,m,i,a]);d.useImperativeHandle(M,()=>({async uploadBlob(r,P){const u=await Q.getBase64(r),c={name:P,uid:P+Math.random().toString(36).substring(2,15),url:u,originFileObj:r};await g(c,!0)}}),[g]);const D=d.useMemo(()=>y?(Array.isArray(y),y):h>1?[]:void 0,[y,h]);return n.jsxs(F.Form.Item,{rules:l?J.required(t):[],label:k?null:t,required:l,name:o,help:O,...s,className:A,children:[n.jsx(L.default,{noStyle:!0,asyncUpload:B,listType:C,aspectRatio:$,values:D,getRealUrl:z,onRemove:r=>{r&&g(r,!1)},onAdd:async r=>{if(r)return g(r,!0)},className:A,showSkipCropButton:S,skipResize:_,maxCount:h}),n.jsx(F.Input,{hidden:!0})]})}const Z=d.forwardRef(Y),U=({provider:s,value:e})=>{const[t,l]=d.useState([]);return d.useEffect(()=>{if(!e){l([]);return}const a=Array.isArray(e)?e:[e];Promise.all(a.filter(Boolean).map(i=>s.getRealUrl(i))).then(l)},[s,e]),t.length?n.jsx(n.Fragment,{children:t.map(a=>n.jsx(b,{url:a},a))}):n.jsx(n.Fragment,{})},b=({url:s})=>n.jsx(F.Avatar,{className:"p-0",children:n.jsx(F.Image,{className:"m-0 p-0 position-relative",src:s,preview:{mask:n.jsx(W.EyeOutlined,{})}})});exports.FileDownloadProvider=N;exports.FileUploadProvider=X;exports.ImageCellValue=b;exports.ImageCrudCellValue=U;exports.default=Z;
+"use strict";var G=Object.defineProperty;var J=(s,e,t)=>e in s?G(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var A=(s,e,t)=>J(s,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),K=require("@ant-design/icons"),F=require("antd"),b=require("path-browserify"),h=require("react"),L=require("../util/NumberUtil.cjs.js"),Q=require("../util/ValidationUtil.cjs.js"),X=require("uuid"),Y=require("../common/picker/ImagePicker.cjs.js"),Z=require("../util/ImageUtil.cjs.js");class ${}class p extends ${constructor(t="",l=""){super();A(this,"rootPath");A(this,"subPath");this.rootPath=t,this.subPath=l}cloneFilePath(t){const l=b.parse(t),r=`${l.name}_cloned_${L.default.randInt(1e5)}`;return b.format({dir:l.dir,ext:l.ext,name:r})}generateFileName(t){return`${t.split(".")[0]}_${X.v4().replace("-","")}`}}function R({formLayoutProps:s,name:e,label:t,required:l,provider:r,onUploading:i,aspectRatio:O,onRemoved:m,onUploadComplete:g,fieldClassName:x,hideLabel:S=!1,listType:_,fieldHelper:B,showSkipCropButton:M=!1,skipCrop:z=!1,skipResize:D=!1,asyncUpload:E=!1,maxCount:d=1},H){const o=F.Form.useFormInstance(),f=e,y=F.Form.useWatch(f,o),T=h.useCallback(a=>r.getRealUrl(a),[r]),P=h.useCallback(async(a,I)=>{if(I){i==null||i(!0);try{const u=a.name,c=u.split("."),N=c[c.length-1],V=r.generateFileName(u),q=`${await r.getInitialPath()}/${V}.${N}`,w=await r.upload(a,q);g==null||g(w);const j=o.getFieldValue(f);if(d>1){const C=Array.isArray(j)?j:j?[j]:[];o.setFieldValue(f,[...C,w].filter(Boolean))}else o.setFieldValue(f,w);return w}finally{i==null||i(!1)}}else{const u=o.getFieldValue(f);if(d>1){const c=a.response??(typeof a.uid=="string"?a.uid:void 0);if(!c)return;await r.delete(c),m==null||m();const V=(Array.isArray(u)?u:u?[u]:[]).filter(q=>q!==c);o.setFieldValue(f,V.length?V:null)}else{const c=await r.delete(u);m==null||m(),c&&o.setFieldValue(f,null)}}},[o,d,f,m,g,i,r]);h.useImperativeHandle(H,()=>({async uploadBlob(a,I){const u=await Z.getBase64(a),c={name:I,uid:I+Math.random().toString(36).substring(2,15),url:u,originFileObj:a};await P(c,!0)}}),[P]);const W=h.useMemo(()=>y?(Array.isArray(y),y):d>1?[]:void 0,[y,d]);return n.jsxs(F.Form.Item,{rules:l?Q.required(t):[],label:S?null:t,required:l,name:f,help:B,...s,className:x,children:[n.jsx(Y.default,{noStyle:!0,asyncUpload:E,listType:_,aspectRatio:O,values:W,getRealUrl:T,onRemove:a=>{a&&P(a,!1)},onAdd:async a=>{if(a)return P(a,!0)},className:x,showSkipCropButton:M,skipCrop:z,skipResize:D,maxCount:d}),n.jsx(F.Input,{hidden:!0})]})}const U=h.forwardRef(R),v=({provider:s,value:e})=>{const[t,l]=h.useState([]);return h.useEffect(()=>{if(!e){l([]);return}const r=Array.isArray(e)?e:[e];Promise.all(r.filter(Boolean).map(i=>s.getRealUrl(i))).then(l)},[s,e]),t.length?n.jsx(n.Fragment,{children:t.map(r=>n.jsx(k,{url:r},r))}):n.jsx(n.Fragment,{})},k=({url:s})=>n.jsx(F.Avatar,{className:"p-0",children:n.jsx(F.Image,{className:"m-0 p-0 position-relative",src:s,preview:{mask:n.jsx(K.EyeOutlined,{})}})});exports.FileDownloadProvider=$;exports.FileUploadProvider=p;exports.ImageCellValue=k;exports.ImageCrudCellValue=v;exports.default=U;

package/dist/crud/ImageCrudField.d.ts

@@ -6,10 +6,13 @@ export interface _ImageCrudField<T> extends InitialCrudField<T> {
     provider: FileUploadProvider;
     onUploading?: (isUploading: boolean) => void;
     onRemoved?: () => void;
+    onUploadComplete?: (finalPath: string) => void;
     aspectRatio?: number;
     fieldClassName?: string;
     listType?: UploadListType;
     showSkipCropButton?: boolean;
+    /** When true, skips the crop modal entirely and uploads the original image. */
+    skipCrop?: boolean;
     skipResize?: boolean;
     asyncUpload?: boolean;
     maxCount?: number;